JavaScriptの条件分岐(if文・else文)の基本と仕組みを解説!初心者でもわかる使い方
生徒
「先生、JavaScriptで条件によって処理を変えたいんですが、どうやって書けばいいですか?」
先生
「それなら、if文とelse文を使います。条件分岐という仕組みで、状況によって実行する処理を変えられますよ。」
生徒
「条件分岐って何ですか?難しそうです…」
先生
「簡単に言うと、『もし○○ならば、こうする』という判断をプログラムにさせることです。身近な例で言うと、『もし雨が降ったら傘をさす、そうでなければ傘をささない』みたいなものですね。」
生徒
「なるほど!具体的にどんな書き方をするんですか?」
先生
「それでは、基本的な書き方を見ていきましょう!」
1. if文とは?
if文は「もし〜ならば」という意味で、条件が正しい(true)ときだけ処理を実行します。条件はかっこ()の中に書きます。
たとえば、数字が10より大きいかどうかを判断するコードは次の通りです。
let num = 15;
if (num > 10) {
console.log("numは10より大きいです");
}
この場合、numが10より大きいので、メッセージが表示されます。もし10以下なら、何も起こりません。
2. else文とは?
else文は「それ以外の場合」という意味で、ifの条件がfalseのときに実行されます。
先ほどの例にelseを加えると、こうなります。
let num = 8;
if (num > 10) {
console.log("numは10より大きいです");
} else {
console.log("numは10以下です");
}
このように書くと、条件に合わない場合の処理も決められます。
3. else if文で複数の条件を判定する
さらに、いくつかの条件を順番に判定したいときは、else ifを使います。これは「もし最初の条件じゃなかったら、次の条件を調べる」という意味です。
例を見てみましょう。
let score = 75;
if (score >= 90) {
console.log("成績はAです");
} else if (score >= 70) {
console.log("成績はBです");
} else {
console.log("成績はC以下です");
}
この例では、点数によって成績を判定しています。scoreが90以上ならA、70以上ならB、それ以外はC以下と判断します。
4. 条件式の基本:trueとfalseとは?
条件式とは「判断するための式」のことです。結果はtrue(真)かfalse(偽)になります。
例えば、num > 10という式は、numが10より大きければtrue、そうでなければfalseです。
プログラミングでtrueは「正しい」、falseは「間違い」の意味で使います。
5. よく使う比較演算子
条件式で使う記号(比較演算子)を覚えましょう。主なものは次の通りです。
==または===:「等しい」ことをチェック!=または!==:「等しくない」ことをチェック>:より大きい<:より小さい>=:以上(大きいか等しい)<=:以下(小さいか等しい)
===と==の違いは少し専門的ですが、簡単に言うと===は値と型の両方をチェックし、==は値だけをチェックします。初心者は===を使うのが安全です。
6. 論理演算子で条件を組み合わせる
複数の条件を組み合わせて、より複雑な判断もできます。代表的な論理演算子は以下です。
&&:両方の条件がtrueならtrue(AND条件)||:どちらか一方の条件がtrueならtrue(OR条件)!:条件の結果を反転する(NOT条件)
例えば、「数値が10以上かつ20以下」という条件はこう書きます。
let num = 15;
if (num >= 10 && num <= 20) {
console.log("numは10以上20以下です");
}
7. if文の中にif文を書く(ネスト)
条件の中でさらに条件をチェックしたいときは、if文の中にif文を入れられます。これを「ネスト」と言います。
let age = 20;
let hasTicket = true;
if (age >= 18) {
if (hasTicket) {
console.log("入場できます");
} else {
console.log("チケットが必要です");
}
} else {
console.log("18歳未満は入場できません");
}
この例では、「18歳以上かどうか」をまず判定し、その中で「チケットを持っているかどうか」をさらに判定しています。
8. 実際に使ってみよう!簡単な判定プログラム
最後に、ユーザーから入力された数値を判定する簡単な例を紹介します。実際に動かしてみて動きを理解しましょう。
const input = prompt("好きな数字を入力してください");
const num = Number(input);
if (num > 0) {
console.log("入力された数字は正の数です");
} else if (num === 0) {
console.log("入力された数字は0です");
} else if (num < 0) {
console.log("入力された数字は負の数です");
} else {
console.log("数字ではない入力です");
}
このプログラムは、数字が正か、0か、負か、数字以外かを判定して結果を表示します。
まとめ
今回はJavaScriptの条件分岐であるif文とelse文さらにelse if文の基本から応用までを丁寧に確認しました。条件分岐はプログラミングの中でも非常に重要な基礎であり初心者が最初にしっかり理解しておくべきポイントです。JavaScriptのif文は条件式がtrueのときに処理を実行しfalseのときには処理をスキップするという単純な仕組みですがこの考え方を理解することでさまざまなプログラムが書けるようになります。 またelse文を使うことで条件に当てはまらない場合の処理も明確に書くことができプログラムの流れがより分かりやすくなります。さらにelse if文を使えば複数の条件を順番に判定できるため実務でもよく使われる重要な書き方となります。例えば点数による評価判定やユーザーの入力内容による分岐処理など現実的な場面でも頻繁に利用されます。 条件式ではtrueとfalseという概念が非常に重要です。比較演算子を使って値を比較しその結果が真か偽かで処理を切り替えます。特にJavaScriptでは厳密比較である三重イコールを使うことで型も含めて正確に比較できるため初心者のうちは三重イコールを使う習慣を身につけることが大切です。 さらに論理演算子を使うことで複数の条件を組み合わせることができます。アンド条件やオア条件を理解することでより柔軟で実用的な条件分岐が書けるようになります。例えば年齢とチケットの有無を同時に確認するような処理は実際のアプリケーションでもよく登場します。 if文のネストも重要な考え方です。条件の中にさらに条件を入れることでより細かい判断ができるようになります。ただしネストが深くなりすぎるとコードが読みにくくなるため適度に整理することも大切です。 最後に紹介したサンプルプログラムのようにユーザー入力を判定する処理はJavaScriptの学習において非常に良い練習になります。自分で条件を変えて試してみることで理解が一気に深まります。条件分岐は繰り返しや関数と組み合わせることでさらに強力なプログラムを作ることができるためここでしっかり基礎を固めておきましょう。 JavaScriptのif文やelse文は初心者でも理解しやすい一方で奥が深く実務でも頻繁に使われる重要な技術です。今回学んだ内容を繰り返し実践しながら自分の中で確実に理解していくことがスキルアップへの近道です。
サンプルプログラムで復習
let score = 85;
if (score >= 90) {
console.log("評価はとても良いです");
} else if (score >= 70) {
console.log("評価は良いです");
} else if (score >= 50) {
console.log("評価は普通です");
} else {
console.log("評価はもう少し頑張りましょう");
}
実行結果
評価は良いです
生徒
if文って最初は難しそうに見えたんですけど実はすごくシンプルな仕組みなんですね
先生
そうですねもし条件が成り立つなら処理を実行するという基本を理解すれば大丈夫です
生徒
elseを使うと条件に当てはまらない場合の処理も書けるので便利だと思いました
先生
その通りですさらにelse ifを使えば複数の条件を順番に判定できるので実用的なプログラムが書けます
生徒
比較演算子や論理演算子も組み合わせるとかなり複雑な条件も作れるんですね
先生
はい条件分岐はプログラムの判断力そのものですしっかり練習して使いこなせるようにしましょう
生徒
これからは自分でもいろいろ条件を変えて試してみます
先生
それが一番の近道です実際に手を動かして理解を深めていきましょう