インデント ~ プログラムが魔法でないとわかればプログラマになれる 17

文字だけでわかりやすくする工夫

if (level >= 60) {
    alert("上級者");
}

このプログラムを動かすと level が 60 以上であれば「上級者」と表示されます。さて、見ているだけだと案外気がつかないかもしれませんが、このプログラムを書き写そうとするとあることに気がつきます。alertの前ににある半角スペースの存在です。説明のために半角スペースを□に置き換えてみましょう。

□□□□alert("上級者");

このように半角スペースが4つ入力されています。なぜこのように半角スペースが入力されているのでしょうか。

例えばノートに何かを書き留めていて、文字だけだとわかりにくいと感じたらどうするでしょうか。下線を引いたり、蛍光ペンで塗ったり、図を入れたり、絵を描いたり、シールを貼ったりもできます。ですがプログラムは下線も太字も使えません。純粋な文字しか使えません。

if の命令の意味は ( ) の中の条件が成立するなら { } の中の命令を動かすというものでした。

if (level >= 60) {
alert("上級者");
}

alertの前に半角スペースがないだけで全く同じ動きをするプログラムです。ですが、条件が成立したときに動く命令、 { } の中がどれなのかわかりにくく感じないでしょうか。 { } の中には複数の命令が入ることもあります。

if (level >= 60) {
alert("おめでとう");
alert("上級者になりました");
alert("これからも頑張ってください");
}

これと次のプログラムを見比べてみてください。

if (level >= 60) {
    alert("おめでとう");
    alert("上級者になりました");
    alert("これからも頑張ってください");
}

行頭に半角スペースを入れることで if の条件が成立するときに動く命令が2行目から4行目であることが一目瞭然になります。このように行頭に半角スペースを入れることでプログラムを読みやすく書くことができます。コンピューターは半角スペースを意味のない文字として無視しますから、あくまでも人間が読むときにわかりやすくなるという意味しかありません。このように行頭に空白を入れて体裁を整えることを インデント と言います。

本書でJavaScriptを使う場合は半角スペース4つをインデントに使いますが、半角スペースではなくタブが使われることもあります。タブはキーボードのTabキーで入力できる文字です。また半角スペースの数が2つや3つの場合もあります。最初はあまりこだわらず見様見真似で十分ですが、誰かと共同でプログラムを書くときにはインデントのルールを決めて同じやり方で統一することがほとんどです。

今回は if を例にしましたが、インデントは if 専用のものではありません。様々な場所でインデントを使います。行頭に半角スペースが入っているときは、その部分をグループにしてわかりやすくしているのだと理解してください。

インデントがなくてもプログラムとしては問題なく動きますが、プロが書くプログラムでインデントがないものはまずありません。インデントがあるかどうかでプログラムの読みやすさは大きく異なりますので行頭に半角スペースを入れる作業といえど侮れません。

>>続きを読む
>>全記事を見る

＜最新話にご興味があればフォローお願いします＞