次期、散財.com の JS 管理は dojo toolkit

散財.com 開発ログ（自分用メモ）

最近の JavaScript 開発の悩み

• 無駄な処理をはさむと、処理が遅くなる。orz
• 細かくファイルを分けて、必要なものだけインクルードするようにする。orz
• ファイル数が非常に多くなる。orz
• ファイルの依存関係を脳内解決。orz
• ファイル数が多いので、リロード時の描画が遅い。orz
• 依存関係が脳内フラッシュして、カオスへ突入。orz
• バグが出た部分を直すと他のページへの影響が不明。orz

例えば、はてなの「この」編集ページ。

<script type="text/javascript" src="/js/prototype-1.4.0.js"></script>

<script type="text/javascript" src="/js/cookie.js"></script>
<script type="text/javascript" src="/js/splitter.js"></script>
<script type="text/javascript" src="/js/local_storage.js"></script>
<script type="text/javascript" src="/js/myfoto.js"></script>
<script type="text/javascript" src="/js/color_picker.js"></script>
<script type="text/javascript" src="/js/textinput_selection.js"></script>
<script type="text/javascript" src="/js/diary_edit.js"></script>
<script type="text/javascript" src="/js/listbox.js"></script>
<script type="text/javascript" src="/js/category.js"></script>

<script type="text/javascript" src="/js/fontsize.js"></script>
<script type="text/javascript" src="/js/preview.js"></script>
<script type="text/javascript" src="/js/campaign.js"></script>
<script type="text/javascript" src="/js/tooltip.0.2.js"></script>
<script type="text/javascript" src="/js/events/edit.js"></script>

やっぱり、ファイル数が多い。

やっぱり、パッケージ管理をする必要がある

個人的には好き勝手やりたいけど、今後のカオスを考えると最初のうちにやっといたほうがいい。
そこで、dojo toolkit。
ビルドもできるので、ファイルをひとつにまとめることができる。

ディレクトリ構成はこんな感じかなぁ

<PROJ_ROOT>/js/dojo/src/<dojo のライブラリ郡>
<PROJ_ROOT>/js/moch/src/<Mochikit のライブラリ郡>
<PROJ_ROOT>/js/3zai/src/<散財.com のライブラリ郡>
<PROJ_ROOT>/js/page/src/<ひとつのページにひとつ behavior.js 的な役割>
：
<PROJ_ROOT>/js/profiles/<ビルド用のプロファイル定義>
：

たとえば、URL が　http://3zai.com/mypage/index のページの JS は

<PROJ_ROOT>/js/page/src/mypage/index.js

dojo.provide('3zai.pages.mypage.index');

dojo.require('hoge.fuga.piyo');
dojo.require('foo.bar');
：
：

これらを一個一個ビルドする

こんな感じかな

cd <PROJ_ROOT>/js/dojo/buildscripts/
ant -Ddocless=true -DprofileFile=<PROJ_ROOT>/js/profiles/3zai.pages.mypage.index.profile.js -Drelease_dir=<DOC_ROOT>/js/ release intern-strings
mv <DOC_ROOT>/js/dojo.js <DOC_ROOT>/js/pages/mypage/index.js

でも、こんな感じのプロファイルスクリプトを用意しなければならない。

<PROJ_ROOT>/js/profiles/3zai.pages.mypage.index.profile.js

var dependencies = [
    '3zai.pages.mypage.index'
];
dependencies.prefixes = [
    'Mochikit', '../moch/src',
    '3zai', '../3zai/src',
    '3zai.pages', '../pages/src'
];
load('getDependencyList.js');

めんどうなので、自動生成するようにする。

var dependencies = [
    '[% js_pkg %]'  // ← <PROJ_ROOT>/js/pages/src 内の.jsから自動生成
];
dependencies.prefixes = [
    'Mochikit', '../moch/src',
    '3zai', '../3zai/src',
    '3zai.pages', '../pages/src'
];
load('getDependencyList.js');

あとは、全体を一気にビルドするスクリプトを書いてと・・・

・・・略

こんな感じで自動的にビルドできるようになったが・・・

• 数ページ分のビルドで 1分かかる。これでは、Try and Error ができない。
• とりあえず、解決策として、ローカル環境、テストサーバではビルドをせず、Ajaxの動的ロードで依存関係を解決するようにする。

最後に、若武者(id:Toilet)くん協力ありがとう。

しかし、ペアプログラミングって死ぬ程つかれるなー。
これからは、JavaScript もグループワーキングの時代だすな

よくわからんメモだな