JavaScriptとHTMLとCSSはわけたほうがいいのに、そう思ってた時期が私にもありました。
ですが、一緒くたにする妥当な理由があったみたいです。
二つの指針
コンポーネントのモジュラリティを図るのに重要な指針が二つあります。凝集性と疎結合性です。
凝集性はモジュール内のプログラム片同士の依存度の高さです。
疎結合性はモジュール間の依存度の低さです。
両者が高いのが、モジュラリティの高いコンポーネントです。モジュラリティの高いコンポーネント同士を組み合わせると、問題を不要に複雑にすることなく解決することができます。
JavaScript HTML CSS
HTMLは文書構造、CSSは見た目、JavaScriptは動作とわけられます。
これはjQueryが目指した世界でもあります。
ですがご存知の通り、SPA全体をjQueryで組むとひどいことになります。
理由は簡単で、解決すべき問題のデータを、HTMLの構造に直接マッピングできないからです。
さきに書いた通り、情報処理はあるデータをあるデータに変換することです。jQueryは、イベントをうけとり、DOMを操作します。DOMの構造が問題のもつデータの構造と一致しない場合、そのマッピングのため、ひどい操作を強いられます。
JavaScript Template CSS
そこで登場するのがテンプレートエンジンです。テンプレートエンジンは少ない学習コストで、解決すべき問題のデータと、DOMの橋渡しを行います。
<div>私は{{person.name}}です。</div>
ですが、この分割は無用な複雑性を生みます。ぱっとみよさそうですが、なぜでしょう？
データの流れをみる
データはJavaScriptからTemplateに流し込まれます。また、イベントはDOMから発火されます。JavaScriptはDOMの情報を知っている必要があります。
さらに、見た目を更新しないといけない場面も多々あります。よってデータの流れからみる依存関係は、
JavaScript -> Template & CSS
です。ここまでならいいんです。これなら分けたほうがいいです。私も今までここまでしか見えてませんでした。
コードの依存関係を見る
ですが、ちょっと待ってください。コードだってデータです。その依存関係を洗い出す必要があります。
上のテンプレート、よくよく見てみると、 person.name があります。この情報、どこからきたかと考えると、JavaScriptなわけです。
つまり、 JavaScriptのもつ論理構造なしに、テンプレートは存在しえない のです。
ここでコードの依存関係は、こうなります。
Template & CSS -> JavaScript
なんということでしょう、循環参照してしまいました。
凝集性の観点から、一緒にしたほうがいい、という結論になってしまいました。
果たして代替案はあるのか
まず、なぜ分けたいのかを考えると、デザイナがJavaScriptを触れないから、というのが９割くらいだと思います。
よって、要件としては
- HTML＆CSSである
さらに、ヘッダ、フッタ等、複数ファイルで重複すると非常に面倒なことになりますので、
- Layout、Partialの仕組みがある
さらに、もともとの要件であるので
- JavaScriptの論理構造に依存しない
なので、こんなのはどうでしょう。
<template id="todo">
<div class="todo-name">記事を書く</div>
</template>
<template id="todo-list">
<todo class="todo-items" />
</template>
JavaScript側は
viewmodel: {
todoItems: [
{todoName: "記事を書く"}
]
}
……うーん。ぱっとみよさそうですが、よくよく考えると微妙感が。でも、だれか作ってそうです。
と本題に関しては終わったので、投げっぱなしで終わります。