f:id:j-takasuka:20211124145219j:plain — スパゲッティ

はじめまして

こんにちは、高須賀　淳と申します。中途採用で入社して8年目です。普段は、HTML・CSS・JavaScriptを用いてWebサイトの設計・実装を中心に活動をしています。

今回のお話は

「開発・運用しやすくするHTMLコーディングのTips」と題して具体的なソースコードを交えてお話ししたいと思います。
HTMLは、なんとなく書いてなんとなく出来てしまう一見すると簡単な言語です。
それ故に闇雲にコードを書いてしまうといつの間にかスパゲッティーコードになったり、何のコードか意味がわからなくなり、いざ修正しようとした時にどこから手をつけてよいか分からない状態になっていたりと困ることはないでしょうか。
それらを解決する第一歩として、HTMLコーディングのコツをまとめます。
HTMLコーディングを始めたばかりの方や普段アプリ開発メインでHTMLを片手間で書いている方のヒントになればと思います。

開発・運用しやすいHTMLコーディングとは

まず、前提としてどのようなHTMLのソースコードが開発・運用しやすいでしょうか。

修正時に影響範囲が少ない
ソースコードが見やすい
ソースコードから何をしているか予想がつきやすい
追加削除が容易

などでしょうか。
これらを念頭において、具体的な実装方法を解説いたします。

具体的な実装方法

HTML

一貫性のある構造をつくる

○良い例

<ul>
 <li><label>ラベルテキスト1<input type="text" /></label></li>
 <li><label>ラベルテキスト2<input type="text" /></label></li>
 <li><label>ラベルテキスト3<input type="text" /></label></li>
 <li><label>ラベルテキスト4<input type="text" /></label></li>
 <li><label>ラベルテキスト5<input type="text" /></label></li>
</ul>

×悪い例

<div>
 <label>ラベルテキスト1<input type="text" /></label>
</div>
<p><label>ラベルテキスト2<input type="text" /></label></p>
<ul>
 <li><label for="input">ラベルテキスト3</label><input type="text" id="input" /></li>
 <li><label>ラベルテキスト4<input type="text" /></label></li>
 <li><label>ラベルテキスト5<input type="text" /></label></li>
</ul>

ポイント説明: 良い例では、HTML構造に一貫性があるため、例えば、動的なWebサイトで出力しやすくしています。
一方で悪い例では、構造がバラバラでその都度違う条件のプログラムが必要になり作りが煩雑になります。

セマンティックな（意味付けをした）マークアップする

○良い例

<h1>見出し</h1>

<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
</ul>

×悪い例

<div>見出し</div>

<p>リスト1</p>
<p>リスト2</p>
<p>リスト3</p>

ポイント説明: セマンティックな（意味付けをした）マークアップは、ソースコードの見通しの良さに繋がります。

CSS

CSSの中にコンテンツ要素を入れない

○良い例

<p>10個</p>

×悪い例

<p>10</p>

p:after {
 content: "個";
}

ポイント説明: 文字などのコンテンツをCSS側に記述するとHTMLとCSSのダブルメンテナンスになる可能性が出てきます。
文字列は、HTMLに集中させて影響範囲を小さくすることで運用・更新しやすくなります。

詳細度を極力低く

○良い例

.class1 {
 ・・・
}
.class2 {
 ・・・
}
.class3 {
 ・・・
}

×悪い例

.class1 p {
 ・・・
}
.class2 .class3 .class4 {
 ・・・
}
ul li.class3 {
 ・・・
}

ポイント説明: CSSの詳細度をなるべく低く一定にすることで上書きが容易になり管理しやすくなります。
逆にカスケード（入れ子構造に）しすぎて詳細度が高くなるとデザイン適用が上書きの繰り返しになりスパゲッティコードになります。

CSSクラス名を汎用的にする

○良い例

.btn--primary {
 color: red;
}

×悪い例

.btn--red {
 color: red;
}

ポイント説明: 悪い例の様に色をクラス名にすると、そのパーツの色が変更になった場合、クラス名の変更を余儀なくされます。
良い例の様にprimary（一次）など優先順位を表すクラス名にしておけば、色が変更になってもCSSの調整だけで済みます。

JavaScript

スタイルをCSSクラスレベルで操作する（styleで調整しない）

○良い例

.is-hide {
 display: none;
}

Element.classList.add('is-hide');
Element.classList.remove('is-hide');

×悪い例

Element.style.display = 'none';
Element.style.display = 'block';

ポイント説明: 要素の表示非表示をCSSクラスの付け替えで実現することで、同じコードを繰り返し使えるようになりロジックを統一することができます。

DOM操作時は、CSSクラスで要素取得する

○良い例

const Elm = Element.document.querySelector('.js-element');

×悪い例

const Elm1 = Element.document.querySelector('#id');
const Elm2 = Element.document.querySelector('#id ul li');

ポイント説明: 要素の取得をタグに依存させないことで、同じコードを繰り返し使えるようになりロジックを統一することができます。

まとめ

一つ一つのTipsは、簡単なものですがルールを決めて設計することで開発・運用しやすいWebサイトが実現できると思います。
今回ご紹介したソースコード例は、私が考えるごく一部のアイデアです。これらをヒントにしていただき、より良いWebサイト制作を目指しましょう。