HTMLを勉強中の方にぜひとも覚えて欲しいのがインデントです。
インデントについての基本的な知識に加え、実際の現場ではどのように使われているのかもお伝えしたいと思います！
インデントとは
インデントとは、文章の行頭を字下げすることです。
インデントとは、文章の行頭に空白を挿入して先頭の文字を右に押しやること。また、そのために左端に挿入された空白や、テキストエディタやワープロソフトの持つ字下げ機能のこと。
IT用語辞典－インデント
引用文にもある通り、エディタなどで空白（スペース、タブ）を使用して文章の先頭を字下げすることをインデントと言います。小説や読書感想文では、段落の最初にスペースを空けていますが、それもインデントです。また、MicrosoftOfficeのWordやExcelにもインデントという機能がありますよね。
この記事で解説しているインデントとは
色々なプログラミング言語でインデントが使用されています。もちろん、HTML、JavaScript、PHPなど、様々な言語でも使われているんですよ。
今回はその中でもHTMLのインデントについてご紹介したいと思います。
なぜインデントするの？
ここまでの記事を読んで、
迷える子羊わざわざインデントするなんて面倒臭いなあ
なんて思った方もいらっしゃるのではないでしょうか。念のため、「なぜインデントするのか」ということも説明しますね。
HTMLのコードを書く上でインデントをする意味は、コードを分かりやすくするためです。
当ブログでも何度かお伝えしていますが、実際の現場では
- 複数人でwebサイトを制作する
- 自分が作ったものを他の人が修正する
- コードレビューしてもらう
ということがあります。
かもめ自分が書いたコードを他の人が見る機会が多いということですね
そんなとき、ぐちゃぐちゃで見づらいコードだった場合、作業スピードが遅れてしまいますよね。そういったことにならないように、ある程度綺麗なコードを書くスキルやテクニックは必要というわけです。
インデントするとどうなるのか
ここからは、実際にインデントの有無をコードで見てみましょう。
<!-- インデントなし -->
<div>
<ul>
<li>アンパンマン</li>
<li>カレーパンマン</li>
<li>しょくぱんまん</li>
</ul>
</div>まずはインデントなしのコードです。
- どこまでがタグの範囲内か分かりにくい
- 親子構造が分かりにくい
といった具合で、全体的にコードが見辛いということがお分かりいただけたでしょうか？
今は数行のコードですので大丈夫ですが、これが数百行のコードになると、ぱっと見ただけでは分かりづらいですよね。
続いて、インデントをしたコードの場合です。
<!-- インデントあり -->
<div>
<ul>
<li>アンパンマン</li>
<li>カレーパンマン</li>
<li>しょくぱんまん</li>
</ul>
</div>先ほどと全く同じコードですが、インデントありです。比べてみると一目瞭然で、コードが見やすくなっていますね。
- 開始タグと終了タグが同階層にあるので、タグの範囲が分かりやすい
- 親子構造が分かりやすい
といった具合で、全体的にコードが見やすいですよね。
インデントの入力方法
エディタにインデントを入力する方法ですが、実は２つあるんです！
入力方法：半角スペース
半角スペースでインデントを入力する方法です。
エディタの設定や導入している拡張機能にもよりますが、半角スペースは「・」で表示されることが多いです。
| メリット | どんな環境でも半角スペースの幅は変わらないため、一定の見た目を保つことができる |
| デメリット | タブに比べて入力回数が増える |
入力方法：タブ
続いて、タブでインデントを入力する方法です。
今私が使用しているエディタではタブは何も表示しない設定になっていますが、設定や拡張機能によっては一本線で表示されることが多いです。
| メリット | 入力回数が少ない |
| デメリット | タブの幅は環境によって見た目が変わる |
どちらが正解？
実は、どちらが正解ということはありません。実際の現場でも両方見かけますし、体感的にどちらのほうが多いということはないです。
ただし、個人的にはタブを使用することをオススメします！ 上でデメリットとして挙げた部分はエディタの設定によって変更可能なことと、何より入力回数が少なく済むからですね。
かもめもし皆さんがweb制作の仕事に携わる際には、現場のコーディングルールに従って下さいね
半角スペースやタブの表示は、エディタの設定や拡張機能で変更することができる、というのは今までにお伝えしてきた通りです。
細かい部分ですが、少しずつ自分が使いやすいようにエディタをカスタマイズしていくと愛着が沸き、またコードを書くのが楽しくなります！
当ブログでおすすめしているVSCode、および拡張機能については以下の記事をご参考下さい。
インデントのルール
分かりやすくするため、インデントには２つのルールがあります。
その１：開始タグと終了タグの位置を揃える
インデントを使用する際、開始タグと終了タグの縦位置を揃える必要があります。
かもめ念のためおさらいですが、
開始タグ：<div>、<h1>、<ul＞
終了タグ： </div>、</h1>、</ul＞
でしたね。
<!-- NG -->
<div>
<ul>
<li>アンパンマン</li>
<li>カレーパンマン</li>
<li>しょくぱんまん</li>
</ul>
</div>こちらのサンプルコードは極端な例ですが……。
開始タグと終了タグの位置がバラバラなので、コードが全く整っていないですよね。
<!-- OK -->
<div>
<ul>
<li>アンパンマン</li>
<li>カレーパンマン</li>
<li>しょくぱんまん</li>
</ul>
</div><div>と</div>、<ul>と</ul＞の位置がそろっているため、どこからどこまでがタグの範囲内なのか分かりやすいですね。
その２：１親子＝１インデント
続いてインデントの数についてです。親子関係になる度、１つインデントします。
<!-- NG -->
<div>
<ul>
<li>アンパンマン</li>
<li>カレーパンマン</li>
<li>しょくぱんまん</li>
</ul>
</div>こちらも少し極端な例ですね。
<div>と<ul>の開始位置が、大きく開いているのが分かるでしょうか。
こうなってしまうと、親子関係が分かりづらくなってしまいます。
<!-- OK -->
<div>
<ul>
<li>アンパンマン</li>
<li>カレーパンマン</li>
<li>しょくぱんまん</li>
</ul>
</div>-
<div>と<ul> -
<ul>と<li>
はそれぞれ親子関係ですので、同じ数分インデントされていますね。
こうして親子関係になる度、１回インデントすることにより、HTMLの親子関係が一目見ただけで分かるようになります。
インデントまとめ
- インデントとは、文章の先頭を字下げすること
- インデントはいろいろなプログラミング言語で使用されている
- タブと半角スペース、２通りのインデントがある
- どちらを使うかは現場のコーディングルールに従う
- ルールその１：開始タグと終了タグの縦位置を揃える
- ルールその２：１親子＝１インデント
