「言語の役割を超えない」を言い換えるとそれぞれの役割内で実装することです。
私の考えるそれぞれの言語の役割は後に定義します。
HTMLやCSSを勉強し始めた人にこそ読んでほしい記事となっています。
それぞれの言語役割を明確に決めて運用することでのシンプルで実装しやすい開発環境ができるのだと考えています!
全員で統一されていないと読みづらいコードが生まれ、負債としてさまざまな形で事業の改善を妨げることです…。
なぜ発生してしまうのか？どうしたら防ぐことができるのか？
を個人の経験をもとに考えをまとめております。
サービス運営の参考になれば幸いです。
あくまでも個人の考えなので忌憚のないご意見があればぜひコメントください！
なぜ言語の役割を超えた実装が行われてしまうのか？
大きく3つの理由があると考えています。
- 言語の進化
- バリデートの甘さ
- なんでもできてしまう
詳しく説明していきます。
言語の進化
言語は常に進化しています。
真新しいものではないですが…
- JavaScriptでなくてもCSSでアニメーションが作れるようになった
- HTMLだけで開閉コンテンツ（アコーディオン）が表現できるようになった
などが挙げられると思います。
それぞれの言語でできる範囲が増えたことにより、どの言語で実装するのかの線引きが曖昧になったのではないかというのが私の考えです。
バリデートの甘さ
HTMLとCSSは書き方が多少間違っていたとしても上手く表示されてしまう、大きく崩れることはないと思います。
ブラウザーが高機能なため、HTMLの閉じタグがなくても自動で補ってくれます。
多少のエラーは許容され、いい感じに表示してくれるのがHTMLです。
CSSは、プロパティーが間違っている・記述が間違っている場合はスタイルが当たらないだけなので、大きな問題は起こりません。
言語の仕様を逸脱したハック的書き方も許容されるのでコードを書く人や制作チームの意向に大きく左右されるのが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
tableスタイル実現のためにtableタグを利用するのはHTMLの役割を放棄しているのでBadだと考えています。
空のタグが設置されている
空のタグはデザイン実現のために利用されることが多いと思います。
空のdivタグを設置してCSSでスタイリングをすることでデザインを実現したいことがしばしば発生すると思います。
SEO的な観点やHTMLのルールでは問題ないというのが私の解釈です。
ただ、セマンティクスの観点だと良いとは言えないと考えています。
できるだけ使わない方がいいのが理想かと思います。
CSSの役割
CSSの役割はユーザービリティを上げることや情報の優先度を明瞭にすることだと考えています。
また、CSSでアニメーションを定義できるようになってからはユーザーの目に触れる動作もCSSの役割ではないかと考えています。
考えるべきはJavaScriptとCSSどちらにアニメーションの所作を持たせるかということです。
CSSの役割を超えていると思う事例
テキストや画像をCSSで表示している場合だと考えます。
CSSにはテキストを表示するためのcontentプロパティーやimageタグを表示するためのbackground-imageタグがあります。
ページのコンテンツとして重要なテキストや画像を実装するのはHTMLの役割だと考えています。
正直線引きが難しい部分ではありますが、アイコンや背景などの装飾は画像であってもCSSで実装し文字などテキストが入ったような画像はHTML側で定義するという線引きをしています。テキストは基本的にcontentには含めません。
JavaScriptの役割
JavaScriptの役割はユーザーのアクションに対しての動作や状態変化によって発生する動きをつけることだと考えています。
動作といってもアニメーションではなく
- classのつけ外し
- 状態の変化の検知と変化に応じた処理の実行
などを指します。
ケースバイケースではありますが、時としてHTMLタグの生成は必要になる時があるかもしれませんが、
スタイルの付与はClassのつけ外しで実装できるのが理想だと考えています。
情報を取得、それに応じてコンテンツを生成することはあるかもしれませんが、
CSSはJavaScriptで付与しなくてもCSSとして定義しておき、JavaScriptで付与することだできるからです。
スタイルは一貫してCSSで実装するのが良いと考えています。
言語の役割を超えないようにするためには？
手法としては大きく2つあると考えています。
- lnitの導入
- メンバーのスキルアップとすり合わせ
lintの導入
lintもバージョンアップなどのメンテナンスコストが掛かります。
ただ、導入さえすれば誰にでも等しく問題があれば通知してくれますし、確認側のコードのレビュー前に最低限のチェックをしてくれるので一石二鳥です。
メンバーのスキルアップとすり合わせ
コストはかかりますがスキルアップは必須だと考えます。
理想で言えばメンバー全員がチームで定義された言語の役割を把握して判断できるのが理想です。
スキルアップを体系的に習得できるように整備することが大切だと考えます。
まとめ
HTMLとCSSとJavaScriptそれぞれの役割についてまとめてみました。
改めて考えてみると意外に考えることが多いのと、今はこうだけど数年後は変わってるんだろうなとも感じます。
私の考え方に疑問を感じる方もいるでしょう。
結局のところ言語仕様に則ってコーディングされているのであればどこにどんな役割を持たせようが大した問題ではないと考えています。
ただ、役割やコーディングにおけるルールがあやふやだとサービスの運用を開始して5年、10年経ったときに想像もできないほど大きな技術負債が生まれ大規模なリプレイスが発生してしまうことは間違いないと考えています。
HTMLやCSSやJavaScriptに限らず、開発チームでコーディングルールや言語の役割や責務は必ず話し合うことを強くオススメして締めくくりたいと思います。
ここまで読んでいただきありがとうございました！