どこまでを動的に、どこまでを静的に作るか

質問

Javascript, jQueryを用いてシステムを作っています。

例えば、データベースから取り出したデータを表に表示したり、自作のダイアログボックス(div要素など)を出したり引っ込めたりする、といった場合を考えます。

そのとき、静的な部分(表のtableタグ・ダイアログボックスなど)と動的な部分(表の内部のtrやtdなど)が分かれます。

そこで、静的な部分は極力HTMLに直接書くようにするのか、白紙のHTMLにJavascriptで全ての要素を配置していくのか迷っています。

静的な部分をHTMLで書くようにした場合、後でJavascriptから操作するための空のタグが大量発生し、結局HTMLだけを見ても意味不明ということになり、表の行数など動的に変化する部分は結局要素をJavascriptから生成しなければならず、静的に生成した要素と動的に生成した要素が混ざり合って一貫性が失われるといった問題を個人的には感じています。

逆に、すべてをJavascriptで記述した場合、全体としては記述量は増えることになりますし、読み込みも遅くなりそうに思えます。

どこまでをHTMLで書き、どこまでをJavascriptで書くのか、何か流儀のようなものがあればご教授ください。よろしくお願いします。

回答No.2

think49

データベースからデータを取り出すならサーバサイド言語で取り出すのか、クライアントサイド言語で取り出すのか、で実装法が変わると思います。
私は JavaScript はなくても動作するように実装するので 下記のように使い分けます。

- JavaScript が無効ならサーバサイドスクリプトでHTML出力
- JavaScript が有効なら初回出力時だけサーバサイドスクリプトでHTML出力し、動的変更部分はJavaScriptでDOM操作

> 静的な部分をHTMLで書くようにした場合、後でJavascriptから操作するための空のタグが大量発生し
上述のように JavaScript がなくてもサーバサイドスクリプトでHTML出力するので空タグが多量発生する事はありません。
JavaScript はあくまで動的出力に留める事で無駄なHTMLが生まれないようにしています。
これは「でしゃばらないJavaScript」や「控えめなJavaScript」と呼ばれます。
http://www.ibm.com/developerworks/jp/web/library/wa-aj-unobtrusive/

# Re: hxwqt563さん

お礼

なるほど、Javascriptがなくても動くように実装する、目から鱗です。
適切な設計を考えれば自然と出る結論のはずが、すっかり見失っていました。
ご回答ありがとうございました。

回答No.1

shockatz

非常に悩ましい問題です。

自分はknockoutjsや、angularjsのような「UI自動制御モジュール」をテンプレートエンジンとして使い、ジレンマに終止符を打ちました。

インターフェース要素を、ユーザの入力経過に合わせてAjaxで取得し、動的に連動表示するケースなどでは大きな威力を発揮します。

モデルの定義など、一度データスキーマを作らねばいけない手間はありますが、慣れれば、バグも発生しにくく、作業を標準化しやすいのでおすすめです。

knockoutjs
http://knockoutjs.com/
http://kojs.sukobuto.com/

いったん理解できれば、イベントハンドラだらけのjavascriptに戻る気はなくなるでしょう。

、

お礼

悩ましい問題な割に、調べても解決策や流儀が出てこないので困っていました。
このような問題を解決するモジュールが出ていることはとても参考になりました。有り難うございます。