色々な人に同じことを教えている気がするのでまとめておく。
他の言語でもいいので、変数、分岐、繰り返し、関数くらいがわかってたら、下のことにとりかかっても早くない。
上の方が効果/学習コストが高い。
困ったらChromeデバッガ
とにかく困ったらChromeデバッガを使う。jsもcssもhtmlもChromeデバッガを使って確認する。
使い方は一通り勉強した方がいい。
とりあえずjQueryとcoffeescriptを使う
jsのmvcフレームワークとかに比べると学習コストが激安。
初心者であれば、とりあえず使っておいて間違いない。
検索は、「javascript+◯◯」ではなく、「jquery+◯◯」
生jsを排除してなるべくjQueryに寄せて書くことで、IE対応を減らせる。記述量も減る。
変数を一つのグローバルなオブジェクトにまとめて格納する
名前空間の汚染を小さくするために、状態保存用のwindowオブジェクトプロパティ(≒グローバル変数)は一つのアプリケーションで一つだけしか使わないようにする。
//ダメな例
foo = 1
bar = 2
//良い例
window.hoge = {}
hoge.foo = 1
hoge.bar = 2
クロージャを覚える
外に出さなくてもいい変数は隠蔽する。下記では、fooが隠蔽されている。隠蔽は、coffeescriptのclassを参考にするとわかりやすいと思う。
func = function(){
var foo = 0;
return function(){
return foo = foo + 1;
}
}
bar = func()
bar()//->1
bar()//->2
bar()//->3
副作用のない書き方を覚える
jsは並列っぽい動き方をする上にスコープがわかりにくいので、意図しないところで変数が上書きされやすい。再帰関数、無名オブジェクト、無名関数を利用する。
テストを書くな
宣伝です。テストコードを書かないでリグレッションテストができるテスティングツールporkyをつくったので、使ってみてください。
https://github.com/puriketu99/porky