インデントや改行を入れる理由「if文や変数についての書き方」

プログラムを見た時に、コードの先頭にスペースが入っていたり、途中で改行されていたり…「どうしてこのように書くの?」と疑問に思ったことはありませんか?理由は単純に「読みやすくするため」ですが、今回は改行やスペースについて書き方のルールを解説したいと思います。

改行とインデントの意味

まず以下のJavaScriptのサンプルコードを見てみましょう。"青""黄""赤"のうち、いずれかの文字がダイアログに表示されるプログラムです。

var rand = Math.random();
rand = rand * 3;
rand = Math.floor(rand);

if(rand == 0){
    alert("青");
    alert("進んでください");
}else if(rand == 1){
    alert("黄");
    alert("注意してください");
}else if(rand == 2){
    alert("赤");
    alert("注意してください");
}

【sample1.js】

この【sample1.js】のコードを、改行せずに記述したものが以下になります。

var rand = Math.random();rand = rand * 3;rand = Math.floor(rand);if(rand == 0){alert("青");alert("進んでください");}else if(rand == 1){alert("黄");alert("注意してください");}else if(rand == 2){alert("赤");alert("注意してください");}

【sample2.js】

真横に伸びて読みにくいですね。

この読みにくいコードでもプログラムは正常に実行されます。プログラムが実行されるということは、どんなに読みにくくても「正しいプログラムコード」と言えるでしょう。しかし、この書き方で人が「読みやすい」と思えるでしょうか。「読みやすさ」を確保するためには、改行やスペースが必須です。

それでは早速【sample2.js】のコードに改行を入れていきましょう。

改行

「;」(セミコロン)が命令文の終わりを示す記号なので「;」以降に改行を入れていきます。

var rand = Math.random();
rand = rand * 3;
rand = Math.floor(rand);

if(rand == 0){alert("青");
alert("進んでください");}
else if(rand == 1){alert("黄");
alert("注意してください");
}else if(rand == 1){alert("赤");
alert("注意してください");
}

【sample3.js】

少し読みやすくなりましたね。次にif文などの{}(中カッコ)の大なり(最初のカッコ)の後に改行を入れ、処理コードの先頭にTabキーで空白を入れます。処理が複数ある場合も同じように先頭に空白を入れていきます。

var rand = Math.random();
rand = rand * 3;
rand = Math.floor(rand);

if(rand == 0){
    alert("青");
    alert("進んでください");
}else if(rand == 1){
    alert("黄");
    alert("注意してください");
}else if(rand == 1){
    alert("赤");
    alert("注意してください");
}

【sample4.js】

言葉で説明すると分かりにくいのですが、目で見ると分かりやすいかと思います。ひとつのif文に対し、処理コードの先頭が縦方向の一直線上に並んでいますね。この構造を「入れ子になっている」とか、「ネストされている」と呼びます。よく使う言葉なので覚えておくと良いでしょう。またネストされているひとかたまりを指して「ブロック」と呼ぶこともあります。

つまり、以下の2行のコードは、条件式「rand == 0」が成立する時の「ブロック」となります。

alert("青");
alert("進んでください");

インデント

インデントとは行の先頭に空白を入れることで、字下げする行為を指します。インデントには半角スペースまたはTab(タブ)と呼ばれる記号を挿入するのが一般的です。Tabの挿入はTabキーを1回押すことで、半角スペース4つ分を一度に挿入することが可能です。

コード内に挿入される半角スペースやタブはプログラム実行時には無視されるので、プログラムへの影響はありません。いくつ入れてもプログラムの実行に支障をきたすことはありません。例えば、以下のようなコードを書いてもプログラムは正常に動きます。

var rand = Math.random();
  rand = rand * 3;
rand =     Math.floor(rand);
            if(rand == 0)    {
alert("青");
            alert("進んでください")     ;
}else      if(rand == 1){
     alert("黄");
alert("注意してください");
}else if(rand        == 1){
alert       ("赤");
alert      ("注意してください");
}

【sample5.js】

プログラムは正常に動きますが、やはり読みにくいですね。この【sample5.js】は極端な例ですが、コードは適切なインデントを用いて記述しましょう。

ここでは書きませんが、if文の中にif文を書いてネストを深くしていくことがあります。その場合、正しくインデントを入れておかないと、読みにくいどころか修正が困難なプログラムになってしまいます。上記のような書き方では、ブロックの切れ目が分からないので、何をしたい処理なのか意味が取れないのです。

演算子と値の間にスペースを入れる

【sample1.js】を見てみましょう。演算子の間に半角スペースを入れていることに気づきましたか?例えば以下のように

var rand=Math.random();

と詰めて記述しても誤りではありませんが、値と演算子を区別するためにスペースを入れて

var rand = Math.random();

このように記述したほうが見やすいと言えます。

関数に渡す引数はカンマ区切りで記述しますが、この時もカンマと値の間にスペースを入れることで見た目の区別がつきやすくなります。「必ずスペースを入れなければならない」という決まりはありませんが、やはり「読みやすさ」への配慮は必要です。

処理を分かりやすくするための改行

あとは【sample1.js】で特筆すると、4行目に空白の一行を入れています。これはプログラミングした私が意識的に入れたものです。「random関数の変数randを求める演算」と「演算で求めたrandを使用しif文で制御する処理」のふたつは別物なので、別物だと分かるように空白行を挿入したのです。

こうのように、処理と処理の区別のために、明確な改行ルールを課す人やチームもあります。私はそこまで厳密にやらなくても良いのでは?と個人的に思いますが、プログラミングは「慣例やマイルール、暗黙の了解などに合わせて記述している」ということは知っておきましょう。

余談ですが、他人が書いたプログラムを読んでいると、書いている人の気持が分かる時があります。この人は時間が無い中でイライラしながら書いている…とか、苦肉の策でこんなコードを書いている…とか、丁寧で好感が持てる人だな…とか。プログラムのコードは機械が解釈する無味乾燥なものではなく、人の心が宿るものです。場当たり的に書いていると悪い癖がつくので、整頓して読みやすい記述を心がけましょう。

複数のコードを1つにまとめるリファクタリングと保守について

サンプルコードにrand関数を求めるコードがありましたね。

var rand = Math.random();
rand = rand * 3;
rand = Math.floor(rand);

コードの内容ですが、Math.random関数の戻り値に3を掛け、Math.floor関数で四捨五入しています。この3つのコードは以下のように1つにまとめて書くことができます。

var rand = Math.floor(Math.random() * 3);

処理はカッコの内側から外側に向かって順番に実行されるので、この書き方で正常に処理されます。初めのうちは短い名前をつけた変数へ代入してから演算処理をした方が混乱を避けられますが、プログラミングに慣れてきたら1つにまとめても良いでしょう。

このように、より読みやすいコードに書き換えたり、処理速度を向上させるために短く書き換えるなど、動作するプログラムのコードを最適なコードへ書き換えていく技術を「リファクタリング」と呼びます。

プログラムの挙動を変えずに書き換えなくてはならないのでリファクタリングは上級者向けの技術ですが、ソフトウェアを改良するにあたって重要な取り組みです。

またソフトウェアを改良したり改変したりする一連の取り組みを「保守」と呼びます。プログラムの保守とは、他人のプログラムを読み、その意図を正しく理解して書き換える作業です。

プログラミングしたコードは仕事である場合は基本的に他人に読まれるものなので、常に保守しやすく可読性を意識した記述が大切です。しかし初めから最適なプログラムコードを書くなど初心者には困難です。まずは「長くてもいいのでインデントを入れた読みやすいプログラムの記述」を心掛けましょう。プログラミングに慣れてきたら「読みやすく短いソースコード」の練習をしていけばよいのです。

インデントや改行を入れる理由まとめ

プログラムの記述は「読みやすい」ことが重要です。改行やインデントを適宜入れて読みやすいコードを意識して記述しましょう。「自分だけが読むプログラムコードだから適当に書いてもよい」と思っていると、後で読み返した時にコードが汚くて書いた本人も読めない…なんてことになりますので気をつけましょう。

にほんブログ村 IT技術ブログへ
にほんブログ村