人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

今やwebプログラマの必須科目と言っても過言ではないくらいに必要な言語となったjavascriptですが、javascriptを用いたプログラミングの複雑さに苦しめられている人は(僕を含め)非常に多いんではないかと思います。
プログラミング学習法として、自分でコードを書くこと以外に人のコードを読むことがありますが、他人の書いたjavascriptを読む行為は中世で言うところのアイアンメイデンに匹敵するレベルの拷問である、という言葉もあるように、javascriptは上達のためのコードリーディングが非常に辛いです。ネット上を探してみても、見当たるのはクソコードばかり…
そこで、javascriptをある程度書ける人(http://d.hatena.ne.jp/language_and_engineering/20100111/p1で言うところの「ノーマル」「中級者」くらいの人)が読んだらレベルアップできるような、javascirptの素敵なコードがあったら教えていただきたいです。そのコードがなぜオススメなのか、コードの見所はどこなのかもあわせて教えていただけると幸いです。

●質問者: shim0mura
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Cherenkov
●125ポイント

興味があるものを読みましょう。強い動機付けが必要です。
本はこれがおすすめ。


2 ● pretaroe
●125ポイント

jQueryのソースコードを読むのをおすすめします。
ただ、どことかは明示的には私は示せません。
素敵なコードのほとんどは、ここに含まれています。


勉強するのなら、Javascriptの場合は本の方が良いと思います。
1つめの「JavaScriptパターン ―優れたアプリケーションのための作法」が、JavaScriptのjQueryソースコードを読んでもいまいちピントこない人が読むと良いと思います。またこちらの本を読む方が効率的です。

あと、デザインパターンのような典型パターンを覚えてしまうというのが良いと思います。2冊目とか3冊目あたりですね。


JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford 水野 貴明
4873113911



JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov 豊福 剛
4873114888



ハイパフォーマンスJavaScript
Nicholas C. Zakas 水野 貴明
487311490X



javascriptできる人はたいてい他の言語もできるので
javascriptだけで素敵なコード?を理解するのは近道ではないと思います。

javascriptはある意味、他の言語と比べて、拷問系ですよ。


3 ● yuku_t
●125ポイント ベストアンサー

underscore.jsをおすすめします。

underscore.jsはいわゆるユーティリティ関数群のようなもので、一つ一つの関数はとてもコンパクトなので読みやすいです。
また、コメントが細かく書かれているのもいいと思います。
ドキュメントを日本語訳してくださった方がいるので、それを読めば何をするものなのかも簡単に分かると思います。

https://sites.google.com/site/nextliteracy/javascript/underscore-js


jQueryはいきなり読みだすには量が多すぎる気がします。
またトリッキーな実装が多くて、汎用性も低いように感じます。


4 ● a-kuma3
●125ポイント

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ