2015.10.23

HTMLやJavascriptのインデントの必要性

Web制作

閲覧して頂きありがとうございます。
Maromaro佐々木です！

今回はHTMLやJavascriptのインデントの必要性について

気にしない人はインデントをおろそかにしてしまうかと思いますが、意外にとっても重要です。
そして非常に厄介でもあります。

何故インデントが必要か

私が今まで他者のソースコードを見ていて気づいたのが、インデントが付いていないソースコードはタグの閉じ忘れや誤ったコーディングが多いように思えます。

例えば・・・・

<div class="box01">
<div class="box01_01">
<p class="txt01">今日も良い天気だね
いや、悪い天気か？
<div>
</p>
<div>

上記のように終了タグの閉じ位置がおかしくなってしまっている・・・
何てことありますよね。

下記のようにインデントがついているとあたりが付きやすいと思います。

<div class="box01">
  <div class="box01_01">
    <p class="txt01">今日も良い天気だね
      いや、悪い天気か？
    <div>
  </p>
<div>

意外にこういう問題は奥が深くて、ただタグの位置を誤っただけで表示に問題が起こり。
検証のループに入ったりなんてことも。

入れ子が深くなっていくととても便利だと思います。
ソースコードのレビュー時にもインデントが無いと確認する人が大変ですね！

また、Javascript等の方がインデントがかなり重要かと思います。
例えば・・・

$(function(){
$('.img_wrap').each(function(){
$(this).find('img').animate({zoom:1.1},{complete:function(){
alert("wow!");
}});
});
$('.img_wrap2').each(function(){
$(this).find('img').animate({zoom:1.1},{complete:function(){
alert("wow!");
}});
});
});

中身はてきとうに書いていますが、このコードを見てください！と言われても、よくわからないですよね？
そもそもどこからどこまでがブロック内なのかも分からないですね。

これにインデントをつけると・・・

$(function() {
  $('.img_wrap').each(function() {
    $(this).find('img').animate({
      zoom: 1.1
    }, {
      complete: function() {
        alert("wow!");
      }
    });
  });
  $('.img_wrap2').each(function() {
    $(this).find('img').animate({
      zoom: 1.1
    }, {
      complete: function() {
        alert("wow!");
      }
    });
  });
});

一目瞭然ですね！
こういうコードであればレビューも簡単にできますね。
インデントの付け方は好みがあるかと思いますし、使っているツール等にもよってくるかと思いますが絶対的にインデントは付けましょう！

注意したいのが、案件によってインデントルールがタブだったりスペースだったり。
インデント無しなんてこともまれにありますが、正直WEBは更新するものだし手をいれていくものだと思っていますので、インデント自体は必須かなと思っています。
ものすごい表示件数に耐えるためにインデントを【削除】というのであればしょうがないのかなと思いますが。
臨機応変にですね(´･ω･｀)

インデントを付けるとか工数がかさんでしょうがないんだけど！

DreamWeaver等のソースフォーマットを使いましょう！

もしくはWEB上のサービスでソースコードを綺麗にしてくれるサービスなんかもあります。

Format HTML for Free

Free Online HTML Formatter – FreeFormatter.com

Dirty Markup · Tidy up your HTML, CSS, and JavaScript code

等色々ありますが、サービスによってインデントの付け方に癖がありますので注意です！
（あれ、こんな所で勝手に改行？みたいな事が）
状況によっては手作業でインデントをポチポチ付けていかないといけないと思います！
例えば既存ページの修正等で既にインデントがついている場合やインデントのルールが厳しい場合等。