プログラミング学習法として、自分でコードを書くこと以外に人のコードを読むことがありますが、他人の書いたjavascriptを読む行為は中世で言うところのアイアンメイデンに匹敵するレベルの拷問である、という言葉もあるように、javascriptは上達のためのコードリーディングが非常に辛いです。ネット上を探してみても、見当たるのはクソコードばかり…
そこで、javascriptをある程度書ける人（http://d.hatena.ne.jp/language_and_engineering/20100111/p1で言うところの「ノーマル」「中級者」くらいの人）が読んだらレベルアップできるような、javascirptの素敵なコードがあったら教えていただきたいです。そのコードがなぜオススメなのか、コードの見所はどこなのかもあわせて教えていただけると幸いです。
No.3
3
2
125pt
underscore.jsをおすすめします。
underscore.jsはいわゆるユーティリティ関数群のようなもので、一つ一つの関数はとてもコンパクトなので読みやすいです。
また、コメントが細かく書かれているのもいいと思います。
ドキュメントを日本語訳してくださった方がいるので、それを読めば何をするものなのかも簡単に分かると思います。
https://sites.google.com/site/nextliteracy/javascript/underscore-js
jQueryはいきなり読みだすには量が多すぎる気がします。
またトリッキーな実装が多くて、汎用性も低いように感じます。
No.2
53175
125pt
jQueryのソースコードを読むのをおすすめします。
ただ、どことかは明示的には私は示せません。
素敵なコードのほとんどは、ここに含まれています。
勉強するのなら、Javascriptの場合は本の方が良いと思います。
1つめの「JavaScriptパターン ―優れたアプリケーションのための作法」が、JavaScriptのjQueryソースコードを読んでもいまいちピントこない人が読むと良いと思います。またこちらの本を読む方が効率的です。
あと、デザインパターンのような典型パターンを覚えてしまうというのが良いと思います。2冊目とか3冊目あたりですね。
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford 水野 貴明 
JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov 豊福 剛 
ハイパフォーマンスJavaScript
Nicholas C. Zakas 水野 貴明 
javascriptできる人はたいてい他の言語もできるので
javascriptだけで素敵なコード？を理解するのは近道ではないと思います。
javascriptはある意味、他の言語と比べて、拷問系ですよ。
No.3
32
ここでベストアンサー
125pt
underscore.jsをおすすめします。
underscore.jsはいわゆるユーティリティ関数群のようなもので、一つ一つの関数はとてもコンパクトなので読みやすいです。
また、コメントが細かく書かれているのもいいと思います。
ドキュメントを日本語訳してくださった方がいるので、それを読めば何をするものなのかも簡単に分かると思います。
https://sites.google.com/site/nextliteracy/javascript/underscore-js
jQueryはいきなり読みだすには量が多すぎる気がします。
またトリッキーな実装が多くて、汎用性も低いように感じます。
No.4
49742154
125pt
javascriptを用いたプログラミングの複雑さに苦しめられている人は（僕を含め）非常に多いんではないかと思います。
javascript 自体は、それほど複雑な言語じゃありません。
癖があるとしたら、
といった辺りだと思います。
で、何かをやろうとしてソースコードを探すと、大半は jQuery を使ってると思います。
jQuery は、先の三つが満載で、かつ、ライブラリも豊富なので、それぞれのライブラリの使い方も知らなきゃいけない、と。
そういったソースを読めるようになるためには、単純な jQuery を使うコードを理解していくのが良いと思います。
jQuery のリファレンスは、単純なコードが併記されています。
まずは、jQuery Core の辺りから読んでいけば良いのではないかと思います。
http://api.jquery.com/
http://semooh.jp/jquery/
例えば、こんなん。
http://api.jquery.com/each/
<!DOCTYPE html> <html> <head> <style> div { color:red; text-align:center; cursor:pointer; font-weight:bolder; width:300px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div>Click here</div> <div>to iterate through</div> <div>these divs.</div> <script> $(document.body).click(function () { $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); }); </script> </body> </html>
英語のページですけど、ソースを読む分には、理解の妨げになることは無いでしょう。
jQuery 本体のコードは、jQuery を使ったソースが読めるようになってから、じゃないととても無理です。
jQuery の中でも、Core API などをバンバン使ってますし、複数のブラウザで動作するためのコードとかもあるので。
クロージャについては、jQuery を使ったソースを読むうちに、何となく分かってくると思いますが、レキシカルスコープについては、コードを読んでいるだけでは分かるようにならないと思うので、理屈は抑えておいた方が良いです。
以下のページは、簡単なコードを添えて、スコープについての説明をしています。当面は理解できなくても良いとは思いますが、こういうことがあるんだ、程度でも抑えておくと、ソースを読む助けになります。
http://d.hatena.ne.jp/susie-t/20070719
http://d.hatena.ne.jp/replication/20100309/1269052178
1
1
1
1
1
1
1
コメント（2件)
初心者が読んでも さっぱりできない上級者しか理解できないコードが ステキ？
さて どちらでしょうか？
JavaScriptが難しいのではなくて、HTMLやCSSを使いこなすのが難しい場合もありますしね。
真面目に答えるなら、JavaScriptでステキなものが書けるようになるよりも、jQueryなどの既存ライブラリを使える人になる方が、よっぽど役に立つのではないかと思ったりもします。