俺の2024年Advent Calendar 2024

【入門者向け】条件分岐を図解で学ぼう

Last updated at 2024-12-17Posted at 2024-12-17

私が教材として作る際は、以下内容は必ず網羅してますよ、という話です。要するに宣伝ですが、役に立つ話なので公開します。

一気に見ると大変なので、学習状況によって一つずつ見てくださいね。
一気見すると一瞬ですが、きちんと学習しようとすると、半日＋半日以上かかるつもりで読み進めてください。

目次¹

まずは分からないなりにコードを見てみます。
ここでは、アルゴリズム学習でよく採用するJavaScriptを例にしましたが、言語知識は不問です。

let i = 1
if(i <= 10){
  console.log('OK');
  console.log('次の処理はここにかく');
}
console.log('その後の処理');

これを、フローチャートにします。

説明のコツは「if文とif-else文は似ている別の処理」と指導する事です。
そうしておくと、if-elseif文のバイアスが消せます。
なお、先にif-elseifを教えてから、if-elseを教える方法も有効ですが、教材によってはそうなっていないかも。

個人的には「if」と「else-if」が仲間で、これらに当たらない条件全てをelseと考えてもらう方が教えやすいと思っていますが、賛否あります。

let i = 1
if(i <= 10){
  console.log('OK');
} else if(i <= 5)
  console.log('NG-OK');
}
console.log('その後の処理');

このように処理が実行されます。
この時、変数iにどのような数値を入れればNG-OKになるでしょうか？

答え

答えは「ない」です。
ぱっと見、i <= 5が見えるので、5以下を入れたくなりますが、先にi <= 10の条件に当たってしまいます。
そして、i <= 10の条件に当たらないケースは、iが10より大きいため、絶対にi <= 5の条件はFalseになります。

このように、フローチャートを使えばこのようなミスも図を見ながら流れを追いやすくなりますので、プログラミングに慣れないうちはフローチャートを書く・読む癖をつけると良いでしょう。

なお、else-ifは省略できます。先ほどのコードでもエラーにならずに動いていましたね？

let i = 1
if(i <= 10){
  console.log('OK');
}

// else if文からelseを外してみる
if(i <= 5)
  console.log('NG-OK');
}
console.log('その後の処理');

NG-OKの意味が変わってしまいましたね。
このように書き直すと、i = 1の場合はOKとNG-OKが出力されます。
i = 7であれば、OKのみが出力されます。

「if-elseif文」のelseif文からelseを取ると、全く意味の違う図になります。

let i = 1;
if(i <= 10) {
  console.log('OK');
} else {
  console.log('NG');
}

console.log('Yes/Noそれぞれの続きの処理');

最初のif文と見比べてみると良いでしょう。