コーディングはレイアウトを意識してメンテナンス性を高める : ポータルサイトブログ

2020/11/05

ホームページ制作やプログラミングをしていると、よく「ソースコードは綺麗に」と言われます。

ですがコードを書いた結果、正しく想定通りに表示されて（動作して）いれば「正解」であり、間違っていないのだからそれで良いのではないでしょうか。

どうせソースコードを読むのはブラウザだったりコンパイラだったりコンピューターが処理するのだから、改行やインデントなどの見栄えなんか気にせず、書きたいように書くのが正解でしょう。

例えばこんなふうに、

<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul><table><tr><th>項目1</th><th>項目2</th><th>項目3</th></tr><tr><td>内容1</td><td>内容2</td><td>内容3</td></tr><tr><td>内容4</td><td>内容5</td><td>内容6</td></tr></table>

リスト1
リスト2
リスト3

項目1	項目2	項目3
内容1	内容2	内容3
内容4	内容5	内容6

表示もちゃんとされているので、何の問題もありません……

果たして本当にそうでしょうか。

問題点

上記のコードの書き方は極端な例ですが、決して間違っているわけではありません。むしろコンピューター的には余計な改行や空白がなくて良い面もあります。しかし、実際にこの書き方を続けていると後々高確率で問題が発生します。

例えば、「箇条書きのリストを1行追加したい」「表の項目2の列を削除したい」という場合に、

箇条書きや表の編集箇所を見つけづらい
開始タグと終了タグが分かりづらいので、記述ミスが起きやすい
変更部分をコピーやペーストする際に選択範囲や位置を見失いやすい

など、上記のかなり単純な例でさえコードが読みづらいので、所謂メンテナンス性が低くなることが問題となります。

ソースコードの改善

ソースコードのレイアウトを意識して改善していきます。

改行

まずは改行を入れてみます。

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<table>
<tr>
<th>項目1</th><th>項目2</th><th>項目3</th>
</tr>
<tr>
<td>内容1</td><td>内容2</td><td>内容3</td>
</tr>
<tr>
<td>内容4</td><td>内容5</td><td>内容6</td>
</tr>
</table>

これだけで、<li>は1行ごとに内容が表示されて、<table>も表の1行とソースコードが対応してぐっと読みやすくなります。

しかし、<table>に関しては、複数セルを一行に並べると、中身の記述量が増えた場合にやはりわかりづらくなってしまうので、多くの場合はセルごとにも改行しておくほうがメンテナンス性は高くなります。

インデント（字下げ）

また、<li>や<table>は開始タグと終了タグをセットで記述する必要がありますが、ネスト（入れ子）構造になった場合に混乱しやすくなるので、インデントを付けてよりわかりやすく調整します。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
<table>
  <tr>
    <th>項目1</th>
    <th>項目2</th>
    <th>項目3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table>

基本は開始タグと終了タグの位置を揃えることです。

200文字程度のコードなのにこんなに縦に広くなって、1画面に収まらないと見づらくなるという方もいるかも知れません。
ですが、実際のコーディング現場では、殆どの場合はもっと複雑なレイアウトや内容で、タグにidやclassを付けて1行がより長く、より複雑性が増すことになります。

1行の文字数に特に決まりはありませんが、できる限り80文字程度以内におさめてエディターの表示幅に収まる方が一般的に可読性は高くなります。縦よりも横の幅を意識したほうが良いでしょう。

ダメ押しで、さらに読みやすく調整してみましょう。

グループ化、コメント

<!-- ◯◯の箇条書き -->
<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul><!-- list -->

<!-- ◯◯のテーブル -->
<table id="table">
  <tr>
    <th>項目1</th>
    <th>項目2</th>
    <th>項目3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table><!-- table -->

今回の例では、<ul>と<table>が完全に別のグループに分かれているので、間に改行を入れて視覚的に別グループということをわかりやすくしています。

そして、グループの最初に<!– –>によるコメントを入れて、何の記述なのかを誰が見てもひと目で分かるように表記しました。

また、終了タグの部分にもコメントで開始タグのidと同じ文字を付けておくことで、どの開始タグとセットなのか分かるようにしています。

※コメントに関しては、入れると逆にソースコードが汚くなるという方もいると思います。ソースコードを見るコーダーの技量によっても必要なコメントの内容は変わると思うので必要に応じて付けるのが良いと思います。

改善後のソースコードを見ると、整列されていて気持ちがいいレイアウトになっていますね。

実際に編集してみると

前述の例を試してみましょう。

例えば、「箇条書きのリストを1行追加したい」「表の項目2の列を削除したい」という場合

<!-- ◯◯の箇条書き -->
<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>（←追加）
</ul><!-- list -->

<!-- ◯◯のテーブル -->
<table id="table">
  <tr>
    <th>項目1</th>
    <th>項目2</th>（←削除）
    <th>項目3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>（←削除）
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>（←削除）
    <td>内容6</td>
  </tr>
</table><!-- table -->

表の方は、HTMLを知らない場合はちょっと難しいかもしれませんが、<th>が3行並んでいる真ん中を削除しているので、<td>の方も同じように3行の真ん中を削除すると、1列消すことができます。

リスト1
リスト2
リスト3
リスト4

項目1	項目3
内容1	内容3
内容4	内容6

まとめ

タグの区切りで適度に改行を入れる
インデントを付けて開始タグと終了タグの位置を揃える
まとまりごとに適度に改行とコメントでグループ化する

よく言われることですが、コードを修正、編集するのは書いた本人ではないかもしれません。

1ヶ月後には担当者が変わることもあれば、書いた本人がすっかり忘れていることもあります。

その際に、メンテナンス性の低いソースコードになっていると、余計な手間やミスが発生してその分コストがかかることになります。

誰が見てもひと目で内容が分かるようなスッキリとした綺麗なソースコードにすることが、今後の自分を助けることになるでしょう。