今やwebプログラマの必須科目と言っても過言ではないくらいに必要な言語となったjavascriptですが、javascriptを用いたプログラミングの複雑さに苦しめられている人は(僕を含め)非常に多いんではないかと思います。

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

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2012/05/08 23:31:25
  • 終了:2012/05/15 23:35:04

ベストアンサー

id:yuku_t No.3

yuku_t回答回数3ベストアンサー獲得回数22012/05/09 16:52:07

ポイント125pt

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

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

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


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

その他の回答(3件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/05/08 23:47:49

ポイント125pt

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

id:pretaroe No.2

pretaroe回答回数531ベストアンサー獲得回数752012/05/09 13:23:56

ポイント125pt

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はある意味、他の言語と比べて、拷問系ですよ。

id:yuku_t No.3

yuku_t回答回数3ベストアンサー獲得回数22012/05/09 16:52:07ここでベストアンサー

ポイント125pt

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

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

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


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

id:a-kuma3 No.4

a-kuma3回答回数4363ベストアンサー獲得回数18002012/05/12 12:00:01

ポイント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

  • id:taknt
    初心者が読んでも内容がすぐわかるのが ステキなコード?

    初心者が読んでも さっぱりできない上級者しか理解できないコードが ステキ?

    さて どちらでしょうか?
  • id:tdoi
    難読化してるものもありますからね。
    JavaScriptが難しいのではなくて、HTMLやCSSを使いこなすのが難しい場合もありますしね。

    真面目に答えるなら、JavaScriptでステキなものが書けるようになるよりも、jQueryなどの既存ライブラリを使える人になる方が、よっぽど役に立つのではないかと思ったりもします。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません