if文を使った条件分岐を理解するコツを分かりやすく解説【JavaScript基礎講座】

2020年2月3日2022年12月8日プログラム基礎JavaScript

プログラミングの勉強を始めると出会う基礎知識のif文について解説します。

if文の基礎知識

プログラミングのif文について

• 演算子ってなんだか難しそう
• 条件分岐がよくわからない
• else ifとかelseやandやorとか混乱する
• if分の！(ビックリマーク)ってどういう意味？

と悩むと思います。

if文の条件分岐っていまいち理解できない

プログラミングをはじめたばかりだとif文の条件分岐が難しいです。

if文は理解しやすいコツは「文章や図で解釈する」とシンプルに考えることができます！

では、プログラミングの基礎知識であるif文について簡単に解説します。

if文とは

if文とは、プログラムで条件分岐を行うための演算子です。

演算子とかなんだか難しそう。。。

もっと簡単に表現します。

if文とはプログラミングで「『もし～ならば』と処理を分岐する」ことが出来る演算子です。

if文は「もし～ならば」と条件分岐するときに使う。とだけ覚えておけば大丈夫です。

if文を理解するコツ

if文を理解するコツについて紹介します。

文章に置き換えてみる

if文は「もし～ならば」とシンプルに考えましょう。

プログラミングをはじめたばかりだとプログラミングに不慣れでイメージしにくいと思います。

自分もプログラミングをはじめたころはプログラムを難しく考えていました。

でもプログラミングだから難しく考えずに、if文を「文章に置き換えて解釈する」と理解しやすくなります。

なので、if文は「もし～ならば」とシンプルに考えましょう。

図で解釈してみる【フローチャート】

もう1つif文を理解するコツとして「図で解釈する」方法があります。

自分もプログラムを理解する際は一度「図にして理解」しています。

図にすることでプログラミングを整理することが出来ます。

なので、if文は「図で解釈する」と整理され理解しやすくなります。

if文を使ったプログラミング例

では、実際にif文を使った簡単なJavaScriptのサンプルで解説してみます。

プログラミングは「習うより慣れろ」が重要で、実際にプログラミングすることが近道だったりします。

サンプル：もし～ならば

if文で「もし～ならば」という条件でif文を使った基本サンプルです。「もし国が日本ならば」という条件式です。

var country = 'japan';
var language = '';
if (country == 'japan') {
    language = 'japanese';
}

サンプルの解説

• 1行目
  • countryという変数にjapanを代入
• 2行目
  • languageという変数を宣言して初期値の空文字を代入
• 3行目
  • if文で「もしcountryがjapanならば」という条件式を定義
• 4行目
  • ３行目で定義したif文の条件に該当する時だけlanguageへjapaneseを代入する

サンプルで理解しておくポイント

• ifの条件式は、「(」と「)」で囲む
• ifの条件に該当する場合は、「{」と「}」で囲まれたプログラムが実行される

サンプル：もし～でなければ

サンプルその1を少し変更して「もし～でなければ」という条件のif文の基本サンプルです。「もし国が日本でなければ」という条件式です。

var country = 'japan';
var language = '';
if (country != 'japan') {
    language = 'english';
}

サンプルの解説

• 1行目
  • countryという変数にjapanを代入
• 2行目
  • languageという変数を宣言して初期値の空文字を代入
• 3行目
  • if文で「もしcountryがjapanでなければ」という条件式を定義
• 4行目
  • ３行目で定義したif文の条件に該当する時だけlanguageへenglishを代入する

サンプルで理解しておくポイント

• ifの条件式で「!=」とすると、「もし～でなければ」という条件になる

if文のelseやelse if

if文にはelseやelse ifでさらに条件分岐することができます。

さらに条件分岐。。。頭が混乱してくる💦

わかります💦

自分も複雑なプログラムで条件分岐が多いと混乱します💦

if文で混乱した時は「文章で解釈したり図で解釈する」と理解しやすくなります。

if文の実行順序について

if文は基本的に上から順に「if (～) → else if (～) → else」と実行されます。

elseは「もし～ではない」の時に使う

if文のelseで「もし～ではない」という条件の基本サンプルです。「もし国が日本ではない」という条件式です。

var country = 'america';
var language = '';
if (country == 'japan') {
    language = 'japanese';
} else {
    language = 'english';
}

サンプルの解説

• 1行目
  • countryという変数にamericaを代入
• 2行目
  • languageという変数を宣言して初期値の空文字を代入
• 3行目
  • if文で「もしcountryがjapanでならば」という条件式を定義
• 4行目
  • ３行目で定義したif文の条件に該当する時だけlanguageへjapaneseを代入する
• 5行目
  • elseを定義
• 6行目
  • 3行目のif文の条件に該当しない「もしcountryがjapanではない」時だけlanguageへenglishを代入する

サンプルで理解しておくポイント

• elseは、ifで定義した条件に該当しない時となる
• elseは、ifで定義した条件に該当しなかった時に実行したい処理が必要な時に使用する

else ifは「もし～ではなく～ならば」の時に使う

if文のelse ifで「もし～ではなく～ならば」という条件の基本サンプルです。「もし国が日本ではなくアメリカならば」という条件式です。

var country = 'america';
var language = '';
if (country == 'japan') {
    language = 'japanese';
} else if (country == 'america') {
    language = 'english';
}

サンプルの解説

• 1行目
  • countryという変数にamericaを代入
• 2行目
  • languageという変数を宣言して初期値の空文字を代入
• 3行目
  • if文で「もしcountryがjapanでならば」という条件式を定義
• 4行目
  • ３行目で定義したif文の条件に該当する時だけlanguageへjapaneseを代入する
• 5行目
  • else if文で「もしcountryがamaricaならば」という条件式を定義
• 6行目
  • 3行目のif文の条件に該当しない「もしcountryがjapanではなくamericaならば」の時だけlanguageへenglishを代入する

サンプルで理解しておくポイント

• else ifは、ifで定義した条件に以外の条件を定義できる
• else ifは、ifで定義した条件以外に条件がある場合に使用する

まとめ：if文を使った条件分岐を理解するコツを分かりやすく解説

if文はプログラミングにおいて基礎知識ですが、めちゃめちゃ重要です。

ただこの時点でif文がいまいち理解できていなくても「if文はもし～ならば～」と知っていれば問題ありません。

またif文の条件分岐が多くなると混乱してしまいます。

そういったときは「文章や図で解釈する」と理解しやすくなります。

ifの例

関係演算子の例

論理演算子の例

プログラミング学習について

プログラミングは奥が深くすべてを理解することが難しいです💦

なので、プログラミングの基礎を一通り学習してから理解できていなかった内容を深堀して学習すればいいんです。

プログラミングは「習うより慣れろ」が重要で、実際にプログラミングすることが近道だったりします。

ここまで読んでもらいありがとうございます！

ユート

Webプログラマ兼ブロガー | プログラミング基礎知識を発信｜Webプログラマ歴は10年以上｜JavaScript,PHP.HTML | 「人生の時間は有限。悪いことをしている時間はない」
→プロフィール