おっきなJavaScript開発の覚え書き
【ハタさんのブログ：Javascriptによる大規模開 発の覚え書き】 のエントリを見て、JavaScriptで大規模開発時の参考になればと、私の場合のものもちょっとまとめてみました。
１．JavaScriptライブラリの選択
JavaScriptの開発時には、全部1から書くなんてことも最近はあまりなく、
ライブラリを使うのが一般的だと思います。
Porototype.jsやJQueryなどのある程度軽量のものから、
ExtやYUI、Dojoなど機能が豊富なものもたくさんありますが
ファイルサイズが大きかったり、ライブラリによっては動作が鈍く感じられる機能などがあるのも実際のところです。
安易に使い慣れた、ライブラリを使い続けると後々、後悔する羽目になってしまうのでよく検討しましょう。
特定の機能だけを使う場合、単体のライブラリなんかもネットを探せば結構ころがっていますので、部分的にそれらを使い、後は自作するなんてのもありかと。API公開する場合など、
ある程度ライブラリ依存を気にしなくてよくなる面 もあります。
２．実行速度のログをとる
私の場合、ある程度完成してから速度アップできる箇所を探していきます。
ですので、開発中にログを毎回仕込んだりはあまりしません。
問題になりそうな実行速度だなと思ったら、その近辺に簡易的に仕込みます。
自作ログスクリプトもありですが、せっかくなので、あるものを使ってしまいましょう。
ということで、愛用している【Log4js】です。
私は最近は【Log4js(JavaScriptのログ出力ライブラリ)を改造してJavaScriptのベンチマークができるようにしました】で改造されたものをちょっといじって使っています。
（※ちなみに現在はver1.0-RC1でver0.3とはかなり変わっているようです。）
あまり余計なものをスクリプトに入れたくないので、最終的には部分的に仕込み速度を測って調整し、開発の最後には、 必ずログ関数は削除しています。
３．グローバル汚染を減らす。
大量の変数をグローバルに作るのはやめましょう。管理や運用でかなり面倒くさいです。
まとまったものは、それらのオブジェクトにぶら下げる形で定義したほうが管理しやすいです。
私の場合、こんな感じでまとめています。
var MyProject = {};
MyProject.HogeClass = function() {
alert("HogeClass");
}
MyProject.FooClass = function() {
alert("FooClass");
}
MyProject.FooClass.prototype.fooMethod = function() {
alert("bar");
}
MyProject.Common = {};
MyProject.Common.HogeHoge = ・・・
４．スタイル処理
JavaScriptで動的に作成した、要素にDOMでstyleを追加してやるのもよくやりますが、
ちょっとまって下さい。大規模なものになってくると操作する個数も増えてきたりします。
ある程度固定のものは事前にCSSで定義しておいて、JSではclass名やidを設定するだけにしてやりましょう。
DOMでstyle操作は思ったよりも重く、後々速度にひびいてきます。
さらに画像やエフェクト処理はJavaScriptがあまり得意としないところだと思います。
エフェクトを多用するが為に、速度が犠牲になることも多々あります。
そんな場合は、ホントにユーザが必要なエフェクトか再確認しましょう。
どうしても、エフェクトや画像等を多用しなければいけないなら、いっそFlashというのもありかと思います。
５．ブラウザの違い、バージョンアップに注意
前述のログをとっての高速化ですが、ブラウザごとに当然確認します。
ブラウザによって速度が全然変わってきます。
運用しているサービス「JsChart」の例ですと、なんとOpera、FirefoxがIEより、
2倍程度速い場合もあります。(canvas操作で、excanvas.jsのせいもあると思います。)
また、実際の速度だけでなく、体感速度もかなり変わります。
また、メジャーバージョンアップやマイナーアップの場合に影響がでたり。
「JsChart」の場合、Operaのバージョンアップで、いつの間にか崩れていたなんてことがありました。
Opera側のバグだったのですが、たった一行の（絶対いらないような）コードで直ったものの、それを発見するのに一日かかりました・・・。
あと、ライブラリのバージョンアップで動かなくなることもよくありますね。
６．リリース時にはファイルの圧縮
ある程度大きなものを作る場合、Jsファイルはコンポーネントごとに分割して作成した方が管理しやすいです。
また、各クラスやメソッドには必ずコメントを。（リリース版では消すこと。）
そうやって作成したファイルもリリース時にはなるべくまとめて、ひとつのファイルにしてしまいましょう。
JS圧縮ツールも結構あると思いますが、その中でも【JS Builder】が、なかなかいい働きをしてくれます。個別に圧縮はもちろん、複数ファイルの連結の順番を指定して圧縮もできます。
大量のファイルができてしまった場合には是非、検討してみてください。
これからますます、JSで大きなものを作る機会が多くなってくると思います。
速度面では特に注意したいですね。
