HTML/CSS/JavaScriptの切り分けについて

最近になってフロントエンド画面の学習を始めたものです。
明確な答えというものは無いかも知れませんがご教授願います。

フロント画面を構成するHTML/CSS/JavaScriptはそれぞれ、
HTML ... 構造
CSS ... スタイリング
JavaScript ... 動作
という役割分担が成されていると認識しています。

CSSのスタイリングについては明確な気がするのですが、
HTMLとJavaScriptの分離について悩んでいます。

例えばTable要素で単純なカレンダーを作成しようとした時、

HTML
1<table class=′calendar′>
2  <!-- ①曜日行 -->
3  <tr class=′weekdays′>
4    <th>日</th>
5    <th>月</th>
6    ………
7    <th>土</th>
8  </tr>
9  <!-- ②日付行 -->
10  <tr class=′dates′>
11    <td></td>
12    <td></td>
13    <td></td>
14    <td></td>
15    <td></td>
16    <td></td>
17    <td></td>
18  </tr>
19  ………(6週分)
20</table>

上記①、②はJavaScriptでDOM生成しちゃいたいところなんですが、
構造との分離という観点で言うと、HTMLで記載するべきでしょうか？

HTML/CSS/JavaScriptのデザインパターン(？)のような考え方など、あればご教授頂けると幸いです。

行動規範の内容に同意します

回答2件

構造との分離という観点で言うと、HTMLで記載するべきでしょうか？

そんなことはないと思いますよー
通常のカレンダーは5行ですが、2月だけは4行があり得ますので、JavaScriptで生成した方がいいんでは。

つまり、状態によって構造が変化するような場合は、当然にHTMLを変更する必要があるので、だったら初めから動的に生成しても問題はないですよね。

HTML/CSS/JavaScriptのデザインパターン(？)のような考え方など、あれば

データバインディングを用いたMVVMまたはFlux、というのが流行のようですよ。

Fluxに学ぶVuex - Qiita

投稿2021/11/20 02:38

Lhankor_Mhy

総合スコア36191

結局はどういうアプリケーションにしたいか、次第です。
「これ」という確固たるものはないと思います。
CSSもJavaScriptもフレームワークやライブラリ、プラグインがあるので、それらを用いると「全て総合して利用する」ことになります（それに大抵は静的サイトではないのでサーバーサイドの言語やテンプレートエンジンが絡んでくる）。

ご存知の通り、JavaScriptでDOM操作をすることができます。
HTMLを生成し、CSSを付与することもできます。
HTMLファイルには要素が何も書いてない状態でもOKなわけです（あまり大量に生成するとパフォーマンス良くないとは思うけど）

あとはその要素が「動的に作られるものかどうか」次第ではないでしょうか。

結局は「作りたいものが作れている」「要件を満たせていて不具合がない」状態なら作る側も使う側もそれで良いのですから。

投稿2021/11/19 20:28