HTMLのソースコードの形状ルール 今回のこの記事に対しての反響について



日頃から他の実装者が制作したWebサイトのソースコードを見るようにしていますが、美しいソースコードだと思えるソースコードにはなかなか出会えません。

「美しいソースコード」という意味には、単に「美しい」だけではなく「見やすい」という意味も含めて使用しています。

タイトなスケジュールに追われて、ソースコードを整える余裕がないというのが現状でしょうか。

中でも最も気になるのが、インデントです。

Webサイトのソースコードを見ると8割程度の割合で、インデントが付いています。

なぜインデントを付けるのかを聞くと「コーディングミスが防ぎやすい」「作業効率が良くなる」という回答がきます。

これについて否定はしませんが、ではインデントを付けないとコーディングミスが起きやすく、作業効率が悪いのかというと、そんなことはありません。



私は、インデントを付けません。



理由は、ソースコードの形状が美しくないからです。

また、BEM設計で実装することで、インデントを付けなくても十分に見やすいソースコードにすることができます。



次の画像は、あるWebサイトのソースコードをキャプチャした画像です。

コーディング作業云々を考えず、ソースコードの形状だけを見てください。 上のソースコードは、美しいと言えるでしょうか。

そもそもソースコードが美しいか美しくないか（綺麗かどうか）を考えたことがないマークアップエンジニアの方がいれば、それは考え方を改めたほうが良いでしょう。

ソースコードを書くことがあなたの仕事です。

その成果物に対し「美しいか」「綺麗か」「整頓されているか」「見やすいか」を追求する必要があります。

もし、上のソースコードを見て、美しいと思うのであれば、それは否定しません。

ただ、私は美しくないと考えます。

間違いなく、より美しくできます。

インデントルール 上で述べた通り、私はインデントを付けません。これが、ルールです。 インデントルール インデントは付けない。 理由は、ソースコードの形状がガタガタになってしまい、美しくなくなってしまうからです。

後ほど、私がコーディングしたソースコードをお見せしますが、インデントを付けず、全てのコードが左寄せに揃っているソースコードをインデントを、付けているソースコードと比較し、美しいと感じてもらえるはずです。

改行ルール どこで改行するか、そんなことコーディング作業中に意識したことなんてない、というマークアップエンジニア、意外と多いかもしれません。



次の画像は、あるWebサイトのソースコードをキャプチャした画像です。

インデントは付いていませんので、左揃えになっています。 こちらのソースコードもあまり美しいとは思えません。

理由は、改行位置が統一されていないからです。

改行が連続され、6行程度の空きができてしまっていたり、li要素の前に2つの改行が入り、1行の空きができている場合と、改行が無い場合があったりと、統一されていません。



どんな時に改行するか、ルールを決めて統一しましょう。



私は次のようなルールを設けています。 改行ルール 1 要素がブロック（CSS）の場合は、改行する。 次のようなコードを見てみます。 <div><p><a href="#">テキストテキストテキストテキスト</a></p></div> 上のコードを見ると、div要素とp要素がブロック、a要素はインラインですので、ルールを適用すると、次のようになります。 <div> <p><a href="#">テキストテキストテキストテキスト</a></p> </div> 改行ルール 2 要素がBlock（BEM設計）の場合は、前後に1行空ける。 別の機会に吉本式BEM設計（BEM設計ベース）については詳しく解説しますが、吉本式BEM設計（BEM設計ベース）は基本的にBEM設計を基にしています。BEM設計でBlockとなるアウトライン要素の前後には、1行空けるルールを設けています。 <section class="block"> <h2 class="block-tit">タイトル</h2> <p class="block-txt">テキストテキストテキストテキスト</p> </section> <section class="block"> <h2 class="block-tit">タイトル</h2> <p class="block-txt">テキストテキストテキストテキスト</p> </section> <section class="block"> <h2 class="block-tit">タイトル</h2> <p class="block-txt">テキストテキストテキストテキスト</p> </section> 改行ルールについては、上の2つです。

吉本式BEM設計（BEM設計ベース）では、次のようなソースコードは出てきません。



1. インラインとなっている要素（aタグ、imgタグ、spanタグなど）の前後に改行が入る。

2. 複数行の空きがある。（出てくる空きは必ず1行のみです。）



インデントをやめ、この改行ルールを適用するだけでも、ソースコードの形状は大幅に美しくなります。