【JavaScript入門】インデント

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

インデント

　プログラムを読みやすく、バグを防ぎやすくするためには、ソースコードの見た目（フォーマット）が非常に重要です。その中でもインデントはとくに重要な役割を果たします。スコープが入れ子になるほど、どこまでが処理のまとまりなのかを視覚的に把握しやすくするのがインデントです。JavaScript ではインデント自体に文法的な意味はありませんが、可読性向上とミス防止に大きく寄与します。

１．インデントとは

　インデントとは、コードの行頭に空白（スペースやタブ）を入れて階層構造を表現することです。スコープ（{ }で囲まれた範囲）が新しく始まるたびに、ひとつレベルを下げた位置にコードを書き入れていきます。これにより、どこでスコープが始まり、どこで終わるのかがひと目でわかります。

1.1. インデントとブロック構造

　JavaScript では、if や for、function などで「{ }」を使いブロックや関数スコープを定義します。この「{ }」の中の行を、外の行よりも右にずらして書きます。次のように、入れ子が深くなるほど、インデントも深くなっていきます。

if (条件式) {
    // ここで1段階インデントする
    console.log('処理1');

    if (別の条件式) {
        // ここでさらにインデント
        console.log('処理2');
    }
    // スコープの始まりと終わりのインデント位置をそろえる
}

1.2. インデントにおける空白の扱い方

　インデントの幅は、スペースかタブか、何文字分にするのかがしばしば話題になります。Visual Studio Code（VSCode）や他のエディターのデフォルト設定では、4文字の半角スペースを利用することが多いです。こだわりがなければ、そのままの設定を使いましょう。

タブ文字：エディターの設定次第で幅が変わることがある。
半角スペース：通常は固定幅（4文字など）でインデント。

グループ開発では、プロジェクトやチームのコーディング規約にあわせることが重要です。

２．インデントを意識したサンプルコード

　次の例では、JavaScript の関数内で if を使い、階層が深くなるごとにインデントを行っています。ファイル名を「indentExample.html」とします。

【indentExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>indentExample.html</title>
</head>
<body>
  <h1>インデントのデモ</h1>
  <p>ブラウザのコンソールを開いて結果を確認してください。</p>

  <script>
    // 関数の定義
    function checkNumber(num) {
        // インデントを 4 スペースに設定
        if (num > 0) {
            console.log('正の数です:' + num);
        } else if (num < 0) {
            console.log('負の数です:' + num);
        } else {
            console.log('ゼロです。');
        }
    }

    // 関数の呼び出し例
    checkNumber(10);
    checkNumber(-5);
    checkNumber(0);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

正の数です:10
負の数です:-5
ゼロです。

「function checkNumber(num) {」から始まり、その後の行を4文字分の半角スペースでそろえています。
if 文の中で { } が深くなると、さらにインデントを重ねることができます。
ブロックの開始位置と終了位置のインデントがそろっているため、コードのまとまりがわかりやすくなっています。

３．インデントの注意点とメリット

項目	内容
可読性の向上	入れ子構造が明確になり、プログラムの流れをひと目で理解しやすくなる。
バグの防止	スコープの範囲を間違えるミスを減らせる。
チーム開発での統一	チーム内で設定をそろえると、コードレビューや保守が格段に楽になる。
VSCodeなどエディターの力	デフォルト設定を使えば自動整形も可能。修正や追記をしても整ったレイアウトに。

　大規模なコードになればなるほど、どこからどこまでが同じ塊（スコープ）なのかが重要になってきます。そのためにも、インデントを正しく活用し、可読性や保守性を高める習慣を身につけましょう。

まとめ

　JavaScript ではインデントに文法的な意味こそありませんが、開発者がプログラムを把握しやすくするうえで欠かせない重要なテクニックです。特に、スコープが複雑に入れ子になる場面が多いため、インデントを整えてコードを見やすくすることがポイントになります。チーム開発では使用する文字数やタブ/スペースなどのルールを統一し、自動整形機能を活用することで効率よく美しいコードを保つことができます。