JSとJS製ライブラリ、フレームワーク学ぶ際の参考サイト

Posted at 2013-12-21

はじめに

今年の7月くらいから本格的にJavaScriptを利用した自分にとって、webStormの導入は「あり」だなと思えるような記事でした。そんな私は半年間で掴んだ、JavaScriptを学ぶ際の勘所と参考サイトをストーリー仕立てで、まとめたいと思います。

これからJavaScriptを学ぶという人の参考になれば。
「プログラミングを１から学ぶ」といった際の参考ではないのであしからず。

##step1 JavaScriptを使ってwebページをリッチにしたい！

webページをJavaScriptでリッチにすると言えばjQueryが鉄板なのは知っていたので、jQueryを学び始めました。

jQueryの情報はググると大量に出てきて、ただ学ぶだけなら全く問題がありませんでした。
しかし、webの情報を鵜呑みにする大概、痛い目を見ます。

jQueryはバージョンアップにより、様々なところが変更され、現在のバージョンでは推奨されない方法が検索の結果として引っかることがあります。

例えばAjaxの方法なのですが、jQuery Ajax という検索ワードで出てくるサイト

以上の2つでは、Ajaxの書き方が異なります。
どっちも動作確認はしてないのですが、同じような挙動のコードを書くならば、

//日本語リファレンスの方法
//古い
$.ajax({
   type: "POST",
   url: "some.php",
   success: function(data){
     alert( "Data Saved: " + data );
   }
 });

//英語リファレンスの方法
//新しい
$.ajax({
type:"POST",
url: "some.php"
})
.done(function( data ) {
alert( "Data Saved: " + data);
});

まとめ
お手軽に手に入る情報が、現在のjQueryのバージョンで推奨されているか、要確認

##step2 JavaScriptでMVCっぽいこともしたい！

jQueryはググって推奨されているか確認するという方法でなんとなく使えるようになりました。しかし、jQueryを使うだけでは、コード量が増えるに連れて、スパゲッティーコードが発生することにも気づきました。

じゃあ、サーバーサイドのフレームワークでもお馴染みのMVCを自分でなんとなく再現できないかなということを考え始めました。

フレームワークっぽいことをしたいなら、JavaScriptでもオブジェクト指向を勉強しなければと言う点に至りました。その際にネックになったことが、JavaScreiptはプロトタイプベースのオブジェクト指向で、クラスベースではないと言う点でした。

よくわからずに、苦しんでいる際に非常に参考になったものは

このスライドを参考に、コードを書いてはスライドを見直し、わからなくなってはスライドを見直しという形で、非常に参考にさせて頂きました。

というか、このスライドだけでとりあえず何とかなった気がします。
これでJSでのオブジェクト指向を身につけて、俺々MVCフレームワークっぽいものが完成しました。

まとめ
JavaScriptでも、場合によってはオブジェクト指向を取り込んでスパゲッティーを回避しましょう。

##step3 俺々フレームワークを脱却したい

目標2ではオブジェクト指向なんとなくを身につけて、俺々フレームワークを完成させました。しかし、それで出来上がったコードをレビューしてもらうと、「この規模のコードを書くなら backbone とかのフレームワークを使ったほうが良かったね。」という話になりました。

ということで俺々フレームワークで実装したアプリケーションは、backboneを利用して書き直すこととなりました。

その際に参考になったサイトは

などです。

また、backnboneを利用する際に必須となっているunderscoreを学習する際には

などが参考になりました。

backboneに関しては学習中で、全てを掴んでいるわけでは無いので、あれこれとは言いません。
また、最近ではbackbone以外にも複数のフレームワーク(Anglar.jsとか)も比較するといいでしょう。

##step4 JavaScript自体をもっと学びたい！

色々とライブラリを使い、結果もっとJavaSciptとかプログラミング自体を勉強しようという結論に至りました。
その際に参考にしたのが以下のサイトです。

MDNはJavaScript自体を、クロージャーは複数のAjaxを制御する際に参考にしました。
メソッドチェーンはjQueryの参考書によく出てくるのが気になって調べました。

クロージャーとメソッドチェーンは知っていて損がないと思います。
JavaScript固有のものでは無いので、他の言語でも応用が効きますし。

##まとめ
以上のことが半年で勉強したことでした。
完全にとりとめのない、文章ばかりの記事となってしまい、すみません。

あと、リンク先の文章やスライドの作者様には非常に感謝しています。
とても役に立ちました。ありがとうございます。

勉強しての感想は、jQueryにしろ、Backboneにしろ、結局はJavaScriptを理解していないと、それらを効率的に利用することができないと思いました。

これからJavaScriptでガシガシ開発したい！という方の参考になればと思います。