コードに改行を入れる方法とその利点についてHTMLを例に考える

あるプロジェクトで、一行が長いコードを扱う機会があったので、一行を短くする（改行を入れる）方法とメリット・デメリットについて考えてみました。

ここでは、長くなってしまいがちなHTMLを例として取り上げます。例えば以下のようなコードです。

<ul><li class="beast" id="cat">ねこ</li><li class="beast" id="fish">さかな</li></ul>

このように一行の文字数が多くなってしまうと、いくつかデメリットがあります。この例だと、どんな要素や属性があるのか一目ではわからなくなってしまっています。¹

これを、例えば以下のように変更してみます。

<ul>
  <li class="beast" id="cat">ねこ</li>
  <li class="beast" id="fish">さかな</li>
</ul>

どんな要素や属性があるのかわかりやすくなりました。²

また、一行を短くすると差分がわかりやすくなるというメリットもあります。

例として、さかなにtitle属性を追加する場合を考えてみます。追加後のHTMLは以下のようになります。

<ul>
  <li class="beast" id="cat">ねこ</li>
  <li class="beast" id="fish" title="ねこの友人">さかな</li>
</ul>

diffコマンドなどで差分を取ると、以下のように表示されます。

 <ul>
   <li class="beast" id="cat">ねこ</li>
-  <li class="beast" id="fish">さかな</li>
+  <li class="beast" id="fish" title="ねこの友人">さかな</li>
 </ul>

一目ではどこが変わったのかわかりづらいですね。³

では、もう少し改行してみます。以下の例ではどうでしょうか。

<ul>
  <li class="beast"
      id="cat">ねこ</li>
  <li class="beast"
      id="fish">さかな</li>
</ul>

属性の先頭が同じ位置に来るようにしています。

さかなにtitle属性を追加すると以下のようになります。

<ul>
  <li class="beast"
      id="cat">ねこ</li>
  <li class="beast"
      id="fish"
      title="ねこの友人">さかな</li>
</ul>

title属性を追加する前後の差分は以下です。

   <li class="beast"
       id="cat">ねこ</li>
   <li class="beast"
-      id="fish">さかな</li>
+      id="fish"
+      title="ねこの友人">さかな</li>
 </ul>

先ほどよりは差分が少なくなりましたが、まだ余分なところが含まれています。

差分がもっと少なくなるように改行した例は以下です。

<ul>
  <li
    class="beast"
    id="cat"
  >ねこ</li>
  <li
    class="beast"
    id="fish"
  >さかな</li>
</ul>

さかなにtitle属性を追加したコードは以下です。

<ul>
  <li
    class="beast"
    id="cat"
  >ねこ</li>
  <li
    class="beast"
    id="fish"
    title="ねこの友人"
  >さかな</li>
</ul>

差分は以下の通りです。

   <li
     class="beast"
     id="fish"
+    title="ねこの友人"
   >さかな</li>
 </ul>

差分が追加された箇所のみになりました。⁴

どこまでやるかは好みにもよるので、導入の前にプロジェクトメンバーで意見を出し合ってみるとよいかもしれません。

みんなが納得できるようなルールができたら、コーディングスタイル（規約）として共有（公開）してみてください。

一目でわかりづらい理由としては、要素同士、属性同士の距離が離れてしまっているということが挙げられます。 ↩
ただし、リストでない要素の間に改行を入れると、ブラウザ上での見た目に半角スペースが表示されてしまう場合があります。CSSを当てていれば問題にならないことも多いですが、見た目が変わってしまう場合があるので注意してください。見た目が変わってしまうのを防ぐ方法としては、デプロイ時に改行やスペースを取り除く仕組み（minify）を入れておくというのが一例です。 ↩
なぜかというと、変更されていない箇所まで差分になっている（色が付いている）からです。差分は行単位で表示されることが多く、一行が長いと変更されていない箇所まで差分になってしまいます。 ↩
差分はわかりやすくなりましたが、grep検索する際に表示される部分が減ってしまうので、場合によっては不便かもしれません。その場合、grepのオプションに「-A」や「-B」、「-C」を指定することで、マッチした行の前後のコードを表示させることができます。 ↩

ククログ