プログラミング・開発 > prototype.jsの内側から覗くJavaScriptの世界(from Kanasan.JS)

随分と更新の間隔が空いてますが、Kanasansoft Web Lab.主催、Kanasan.JS#2に参加してきました。

「東京者(とうきょうもん)に負けてられへん」という思いを胸に秘めた(か定かではないですが)、熱い浪速（というより関西圏）のJavaScriptorが集まる勉強会です。

今回はJavaScriptに興味がある方には馴染み深い、prototype.jsのソースを読むのがテーマでした。

で、技術的なTipsを書きたい所ですが、レベルが高すぎて消化不良な感じなので、
今回の勉強会に参加して感じたJavaScriptという言語についてと、 prototype.jsのソースを読んで感じた、ライブラリとしての概念や、最近人気のあるjQueryとの対比も含めて書いてみようと思います。

ブログを書くまでが勉強会らしいです。勉強会の感想はKanasan.JS#2終了しました (Kanasansoft Web Lab.)に集まる予定なのでそちらを参照下さい。

勉強会に参加して分かったJavaScriptレベル

自分自身のJavaScriptの習熟度は、中級ぐらいかなと思っていたのですが、とんでもない。
初級者だったことが分かりました。今回の勉強会に参加して分かった、簡単なJavaScriptのレベル分けると以下のような感じ

レベル1

functionを使って、googleから拾ったサンプルを動かすことができる

レベル2

DOM操作を覚えて、ライブラリを使える

レベル3

JavaScriptがprototype型のオブジェクト指向という事を理解する

thisの挙動、無名関数、クロージャー、スコープチェーン等が何となく分かる

レベル4

ソースを読むだけで、オブジェクトのスコープや、thisが参照するオブジェクトがすらすらと頭に入る

レベル5

他の言語と比較して、JavaScriptの言語として足りない機能を実装出来る

レベル6

ソースコードから人の思考を読み取る事ができる。コーディングスタイルからブラウザのバグを推測できる

レベル7

頭に仕様書とブラウザごとの挙動の違いが入っている

ざっくり分けるとこんな感じかな。何かつっこみがあれば宜しくです。

ちなみに僕はレベル3ぐらいです。

レベル5になるには、豊富な言語経験に加えて、デザインパターンや、アルゴリズム、設計等プログラマーとして力量が問われます。

レベル6になるには、エスパーの能力が必要です。

レベル7になるには、高度な頭脳が必要です。

言語としてのJavaScript

柔軟な書き方が出来る言語仕様

プログラミング経験が豊富な人から、プログラムを始めたばかりの人まで、レベルに合わせた書き方が出来る

オブジェクト指向とか分かっていなくても、手続き型のような形でも書けるし、 prototypeの利用、クロージャー、無名関数を使った高度な書き方も出来るのが魅力の一つです。 但し、理解度によって、全く別の言語にも見えるので、大規模なプロジェクトでは使いにくいという側面も否めません

少ないメソッド

言語仕様としては柔軟ですが、開発でよく必要になりそうなメソッドは意外と少ない為、 サーバーサイドの言語では当然のように存在するメソッドがなかったりします。

僕は基本的にPHPを使うのですが、PHPならあの関数を使えばすぐ出来るのに、 JavaScriptで一から手書きしなければならないという事が多々あります。

プログラミング言語としてのJavaScriptに加えて、DOMやCSS等の知識も必要

クライアントサイドである以上、DOM操作やCSSの扱いは覚える事が必要になってきます。

この辺りが良くも悪くも、Webデザイナーとプログラマーが交わる点でもあります。

prototype.jsの特徴

まだソースを全部読めていないし、理解度も低めとは思いますが、少しだけ。

prototype.jsが出てきた当初はAjaxが簡単に利用できるライブラリとして出てきたイメージがありますが、それは改める必要があります。 JavaScriptの皮を被りながら、その中身はRubyと関数型言語の血が流れています。

言語として足りない機能を拡張する

スクリプト言語として、メソッドが少ない点を補います

クロスブラウザな実装

ソースを読むと、黒魔術的なブラウザ判別の方法や、ネイティブのメソッド上書き等、ブラウザ互換を保つ為の様々な工夫があります

そこがはまりどころになる可能性もありです。特にネイティブメソッドの上書き

イテレーターが肝

Rubyの影響で、ネイティブに存在しない様々なイテレーターを実装し、これが各処理の様々な所で使われています

これを理解していないと、ソースを読むのが辛すぎる

破壊的な仕様を回避する為の処理

配列の操作とか破壊的な所を回避する仕組みが色々されている

thisの参照を制限する

bindが有名ですが、これは頻繁に使われています。あとはapplyとかcallとか

無名関数、クロージャーを駆使

スコープを追いかけるのが大変

メソッドチェーンの多用

イテレーターのメソッドチェーンに無名関数を使って書かれると、解読するのが難解

関数型言語のよう

擬似的なクラスの実装

prototype型でありながら、クラス型のように使えます

1.6からはさらにスマートに書けるようになっています

prototype.jsとjQueryの使い分け方

今回、jQueryはノータッチですが、最近よくjQUeryを使うので、prototype.jsと使い分けを書いてみます。

prototype.jsは

プログラマーが使う為にある

JavaScriptという言語の限界を突破する為にある

重いのがたまに傷。エフェクトを使いたくて、script.aculo.usとか入れると特に辛い

jQueryは

デザイナーやプログラミングが分からない人でも簡単に使う為のもの

DOM操作や見栄えのあるエフェクトが中心

ソースの量は少なめで、必要に応じてプラグインを読み込む

prototype.jsより軽い

ちょっとAjax使いたいとか、ページに動きを加えたい時は、jQuery、

JavaScriptを駆使して、クライアントサイドでガリガリと書きたい時は、prototype.jsという使い分けが出来そうです。

恐らく最近のJavaScriptの使い方としては、半透明使いたいとか、フェイドインさせたいとか、 AjaxではなくダイナミックHTML(これがAjaxと誤解されている風潮はありますが)のような使われ方が多く、 そのほとんどはjQueryで足りているので、jQueryをお勧めします。

クライアントサイドで複雑な処理等が必要になった場合は、prototyp.jsを使うと格段に楽に書けると思います。

Kanasan.JSへ参加した感想

他の言語(Rubyとか関数型言語とか)に精通していたり、言語経験豊富でプログラマーとして優れている人が多い

• コードリーディングを開始してすぐに、バグ(高機能なバグは仕様という噂も)を2〜3見つける。最大の問題は英語で誰が報告するのか!?
• 僕自身はソースは追いかけるのが精一杯ですが、その中の空気を共有出来るのは大いにメリットがあるはず
• コードスタイルを見ただけで、過去の遺産だとか、パッチを当ててそのままとか、if文の中の右辺と左辺が逆な事から、何かのブラウザでバグがあったのではないかとか、エスパーな人達がたくさんいます。コードは全てを物語るという事か

もうワンステップJavaScriptを学びたい人にお勧め

• JavaScriptというより、プログラマーとして長けている人たちが多いので、そんな方に質問が出来る環境はとても素晴らしいと思います。
• 僕はソースを読むのに精一杯で、解説頂くと何とか理解できましたが、何が分からないかが分からない状態です。
• 自分自身は言語経験の少なさが今後の課題です

12時間耐久の良し悪し

09:00?21:00と普段12時間(休憩もあるので厳密ではないですが)もソース読む機会はないので、良いといえば良いですが、体力的には辛くも感じました。この辺りは意見が分かれる所でしょうか。

レベルによってセグメント分けは必要かなと

前回、途中で初心者と上級者でグループ分けした事や、読書会が開かれた訳がよく分かりました。

読書会もレベルが高かったと聞きますが、明確な参加者のレベル分けは必要なのかなと少し思いました。

例えばクロージャーを理解する会とか、ブラウザごとの仕様の違いを勉強するとか、テーマとレベルを絞ると更に充実して、濃い勉強会が出来そうです。

総論

浪速のJavaScriptの集まりは楽しい。

以下、メモから抜き出して、垂れ流しておきます。

Templateオブジェクトはインスタンス可能な文字列フォーマットとして使える

多分HTMLのテンプレートとしても使える。

バグは含んでいる

正規表現が難しいすぎる

なんだこの集団は。。。レベルたけー。僅かな修正も見逃さない、CTUではなくCRU(Code Reading Unit)です。

一時変数にmemoというのは分かりやすい。

よく分かってない事。

shallow copyとかdeep cloneとか

curry、methotizeの挙動。wrapは分かったけどもう少しみたい

1.6でClass.createがすっきり書ける。

継承して$superで参照出来るのもいい

reduce()はprototype.jsの七不思議の一つ、用途が謎。古いバージョンの名残か?犯人はsam

safari2ではhashが重複するらしい。それはハッシュと呼んでいいのか？

safariとかでAjaxのパラメータに「&_=」を加えるのは謎。ググってもみんな理由が分からないよう。とんでもないBKの悪寒

コメントの付け方は謎(ほぼ皆無だがなぜここだけ?というとこにある)。changelogで管理しているのか?SVNのリポジトリみてもないっぽい

Ajax周りのイベント管理とかは参考になりそう。あとはリクエストヘッダの発行とか

• なぜRSSリーダーを使うか?
• ページ上部へ戻る
• JavaScriptでJashの処理をインターセプトして、Lingrやtwitterに投稿する

Posted at 37to : commetns(0) : trackbacks(0)