HTMLとCSSとJavaScriptそれぞれの役割について考えをまとめてみた。

「言語の役割を超えない」を言い換えると**それぞれの役割内で実装すること**です。
私の考えるそれぞれの言語の役割は後に定義します。

**HTMLやCSSを勉強し始めた人にこそ読んでほしい記事となっています。**

:::note info
それぞれの言語役割を明確に決めて運用することでのシンプルで実装しやすい開発環境ができるのだと考えています!
:::

全員で統一されていないと**読みづらいコードが生まれ、負債としてさまざまな形で事業の改善を妨げる**ことです…。

なぜ発生してしまうのか？どうしたら防ぐことができるのか？
を個人の経験をもとに考えをまとめております。
サービス運営の参考になれば幸いです。

:::note warn
あくまでも個人の考えなので忌憚のないご意見があればぜひコメントください！
:::

### なぜ言語の役割を超えた実装が行われてしまうのか？

大きく3つの理由があると考えています。
1. 言語の進化
1. バリデートの甘さ
1. なんでもできてしまう

詳しく説明していきます。

### 言語の進化
言語は常に進化しています。
真新しいものではないですが…
- JavaScriptでなくてもCSSでアニメーションが作れるようになった
- HTMLだけで開閉コンテンツ（アコーディオン）が表現できるようになった
などが挙げられると思います。

:::note warn
**それぞれの言語でできる範囲が増えたことにより、どの言語で実装するのか**の線引きが曖昧になったのではないかというのが私の考えです。
:::

### バリデートの甘さ
HTMLとCSSは書き方が多少間違っていたとしても上手く表示されてしまう、大きく崩れることはないと思います。

:::note warn
ブラウザーが高機能なため、HTMLの閉じタグがなくても自動で補ってくれます。
多少のエラーは許容され、いい感じに表示してくれるのがHTMLです。
:::

CSSは、プロパティーが間違っている・記述が間違っている場合はスタイルが当たらないだけなので、大きな問題は起こりません。

:::note alert
言語の仕様を逸脱したハック的書き方も許容されるのでコードを書く人や制作チームの意向に大きく左右されるのがHTMLとCSSです。
:::

### なんでもできてしまう
HTMLとCSSは動的な機能を追加しようと思うと限界がきますが、JavaScirptの場合は違います。
JavaScriptは、HTMLタグを生成することもスタイルをあてるできてしまうため**役割を超えやすい**と考えています。

HTML、CSS、JavaScriptそれぞれの理由で意図的でなくても、私が考える言語の役割を超えて実装されるケースというのが存在していると考えています。

## 言語の役割
私が考える言語の役割について実際にあった例を元に話します。
ご存じの点も多いと思いますが、お付き合いいただければと思います。

### HTMLの役割
HTMLは文字をマークアップするための言語です。
文章の構造をコンピューターが理解できるようにタグを用いて表現するものです。

よってHTMLの役割は**文書構造を正しくコンピューターに伝えること**が私の結論です。

#### HTMLの役割を超えていると思う事例
私が、HTMLの役割を超えていると感じるのは**文書構造以外をHTMLで表現しようとしている場合**です。

- HTMLでスタイルを実現しようとしている
- 空のタグが設置されている

具体的に説明します。

##### HTMLでスタイルを実現しようとしている
HTMLのルールを無視しているわけではないですが、**HTMLでスタイルを実現しようとしている点でHTMLの役割を超えている**と考えています。

- `<br>`タグを多用してコンテンツ間のマージンを調整する
- tableのようなスタイルを実現させるためにtableタグを利用する
- style属性を利用したインラインCSS

:::note alert
**tableスタイル実現のためにtableタグを利用するのはHTMLの役割を放棄している**のでBadだと考えています。
:::

##### 空のタグが設置されている
空のタグはデザイン実現のために利用されることが多いと思います。
空のdivタグを設置してCSSでスタイリングをすることでデザインを実現したいことがしばしば発生すると思います。

SEO的な観点やHTMLのルールでは問題ないというのが私の解釈です。
ただ、セマンティクスの観点だと良いとは言えないと考えています。
できるだけ使わない方がいいのが理想かと思います。

https://developer.mozilla.org/ja/docs/Glossary/Semantics

### CSSの役割
CSSの役割は**ユーザービリティを上げることや情報の優先度を明瞭にすること**だと考えています。
また、CSSでアニメーションを定義できるようになってからはユーザーの目に触れる動作もCSSの役割ではないかと考えています。

考えるべきは**JavaScriptとCSSどちらにアニメーションの所作を持たせるか**ということです。

#### CSSの役割を超えていると思う事例
テキストや画像をCSSで表示している場合だと考えます。

CSSにはテキストを表示するためのcontentプロパティーやimageタグを表示するためのbackground-imageタグがあります。
ページのコンテンツとして重要なテキストや画像を実装するのはHTMLの役割だと考えています。

:::note info
正直線引きが難しい部分ではありますが、アイコンや背景などの装飾は画像であってもCSSで実装し文字などテキストが入ったような画像はHTML側で定義するという線引きをしています。テキストは基本的にcontentには含めません。
:::

## JavaScriptの役割
JavaScriptの役割はユーザーのアクションに対しての動作や状態変化によって発生する動きをつけることだと考えています。
動作といってもアニメーションではなく

- classのつけ外し
- 状態の変化の検知と変化に応じた処理の実行

などを指します。

ケースバイケースではありますが、時としてHTMLタグの生成は必要になる時があるかもしれませんが、
**スタイルの付与はClassのつけ外しで実装できるのが理想**だと考えています。

情報を取得、それに応じてコンテンツを生成することはあるかもしれませんが、
CSSはJavaScriptで付与しなくてもCSSとして定義しておき、JavaScriptで付与することだできるからです。

:::note info
**スタイルは一貫してCSSで実装するのが良い**と考えています。
:::

## 言語の役割を超えないようにするためには？
手法としては大きく2つあると考えています。
- lnitの導入
- メンバーのスキルアップとすり合わせ

### lintの導入
lintもバージョンアップなどのメンテナンスコストが掛かります。
ただ、導入さえすれば誰にでも等しく問題があれば通知してくれますし、**確認側のコードのレビュー前に最低限のチェックをしてくれるので一石二鳥**です。

### メンバーのスキルアップとすり合わせ
コストはかかりますがスキルアップは必須だと考えます。
理想で言えばメンバー全員がチームで定義された言語の役割を把握して判断できるのが理想です。

:::note info
**スキルアップを体系的に習得できるように整備することが大切**だと考えます。
:::

## まとめ
HTMLとCSSとJavaScriptそれぞれの役割についてまとめてみました。
**改めて考えてみると意外に考えることが多いのと、今はこうだけど数年後は変わってるんだろうなとも感じます。**

私の考え方に疑問を感じる方もいるでしょう。
結局のところ言語仕様に則ってコーディングされているのであれば**どこにどんな役割を持たせようが大した問題ではないと考えています。**

ただ、役割やコーディングにおけるルールがあやふやだとサービスの運用を開始して5年、10年経ったときに**想像もできないほど大きな技術負債が生まれ大規模なリプレイスが発生してしまうこ**とは間違いないと考えています。

HTMLやCSSやJavaScriptに限らず、開発チームでコーディングルールや言語の役割や責務は必ず話し合うことを強くオススメして締めくくりたいと思います。

ここまで読んでいただきありがとうございました！