本講座ではインデントによるコードの読みやすさについて考えてみます。

インデントとは

インデントという言葉には馴染みがあるかもしれませんね。

インデントは字下げをすることで、HTML、CSSを始め、あらゆるコンピュータ言語で行われます。

インデントに使用する文字

インデントにはtab、または半角スペースが用いられます。
半角スペースを用いる場合、2スペース(半角スペースを2つ)または4スペース(半角スペースを4つ)が主流になっています。

どのインデントを行うかは好みになりますが、Gieerでは表示の都合上、半角スペースの2スペースを使用していきます。

インデントされていないコード

インデントされていないHTMLのコードを見てみましょう。

<body>
<div>
<h1>インデントされていないコード</h1>
<ul>
<li>インデントされていないと</li>
<li>
<div>読みづらい気がしませんか?</div>
</li>
</ul>
</div>
</body>

なんとなく、読みづらい気がしませんか?

インデントされたコード

インデントされたHTMLのコードを見てみましょう。

<body>
  <div>
    <h1>インデントされていないコード</h1>
    <ul>
      <li>インデントされていないと</li>
      <li>
        <div>読みづらい気がしませんか?</div>
      </li>
    </ul>
  </div>
</body>

なんとなく綺麗に見えますね。

インデントのメリット

インデントを行うメリットは、単純に見た目が綺麗ということもありますが、階層構造がわかりやすいというメリットもあります。

では、以下のHTMLでtable要素を子に持つli要素はどこからどこまででしょうか?

<body>
<div>
<h1>インデントされていないコード</h1>
<ul>
<li>インデントされていないと</li>
<li>
<div>読みづらい気がしませんか?</div>
<div>極端な読みづらい例</div>
</li>
<li>
<table>
<tr>
<td>項目1</td>
<td>項目2</td>
</tr>
<tr>
<td>データです</td>
<td>データです</td>
</tr>
<tr>
<td>データです</td>
<td>データです</td>
</tr>
<tr>
<td>データです</td>
<td>データです</td>
</tr>
</table>
</li>
<li>
<div>リストです</div>
</li>
<li>
<div>リストです</div>
</li>
</ul>
</div>
</body>

パッとは分かりませんね。

では、このコードをインデントしてみます。

<body>
  <div>
    <h1>インデントされていないコード</h1>
    <ul>
      <li>インデントされていないと</li>
      <li>
        <div>読みづらい気がしませんか?</div>
        <div>極端な読みづらい例</div>
      </li>
      <li>
        <table>
          <tr>
            <td>項目1</td>
            <td>項目2</td>
          </tr>
          <tr>
            <td>データです</td>
            <td>データです</td>
          </tr>
          <tr>
            <td>データです</td>
            <td>データです</td>
          </tr>
          <tr>
            <td>データです</td>
            <td>データです</td>
          </tr>
        </table>
      </li>
      <li>
        <div>リストです</div>
      </li>
      <li>
        <div>リストです</div>
      </li>
    </ul>
  </div>
</body>

どうでしょう?
table要素を子に持つli要素がパッと分かるようになったのではないでしょうか?

このようにインデントすることで、要素を追加したくなった時や削除したくなったときにも、すぐに該当の場所を探すことができるようになります。

これはHTMLに限らず、他の言語でも同じメリットが受けられます。

改行

インデントと同様に、改行もコードの読みやすさに影響を与えます。

改行を全くしないと当然読みづらくなりますが、むやみに改行しても読みづらくなってしまいます。
改行のし過ぎで読みづらくなってしまうのは、何を基準に改行しているかが人それぞれ異なるためです。

HTMLにおいては、空行を入れないのが主流になっています。

改行しない場面

table要素の一部分を切り取ってみます。

<tr>
  <td>
    tdタグは
  </td>
  <td>
    表のデータを表すタグです
  </td>
</tr>

このtd要素を改行せずに書いてみます。

<tr>
  <td>tdタグは</td>
  <td>表のデータを表すタグです</td>
</tr>

どちらの方が読みやすいでしょうか?

わたくしnkztは、"短いテキストのみを内包する場合は改行しない"ようにしています。

このように厳密はルールはありませんので、最終的にはあなたが読みやすいと思う書き方をするのが正解です。

コードを整形してみよう

ここまでの講座で、わたしたちはindex.htmllink.htmlの2つのHTMLファイルを作ってきましたね。
このコードをインデントして整形してみましょう。
あなたが読みやすいと思うように整形してみてください。

nkztは以下のようにしてみました。

  • index.html
<!doctype html>
<html>
<head>
  <title>はじめてのHTML</title>
</head>
<body>
  <h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>
  <a href="link.html">はじめてのリンク</a>
</body>
</html>
  • link.html
<!doctype html>
<html>
<head>
  <title>はじめてのリンク</title>
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="index.html">はじめてのHTML</a>
</body>
</html>

階層を現すという点ではheadbodyもインデントするのが正しいのですが、この2つの要素は必ず出現する要素のため、インデントをしないのが慣習になっているようです。
body直下の要素もインデントしないことがあります)

まとめ

本講座では

  • インデントの方法
  • 読みやすいコードとは

について学びました。

読みやすいコードは、今後共に働いていく方や、未来の自分自身にも優しいコードになります。
コーディング中や作業がひと段落した時などに、気にかけてみてください。

本講座の最終コード

  • index.html
<!doctype html>
<html>
<head>
  <title>はじめてのHTML</title>
</head>
<body>
  <h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>
  <a href="link.html">はじめてのリンク</a>
</body>
</html>
  • link.html
<!doctype html>
<html>
<head>
  <title>はじめてのリンク</title>
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="index.html">はじめてのHTML</a>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...