- 投稿日：2026/02/17
- 更新日：2026/02/21
今回のゴール
if文を使って、条件によって異なる結果を画面に表示できるようになる。
前回（第4回）では、ボタンをクリックしたときに処理を動かす「イベント」を学びました。今回はいよいよ、プログラミングの核心ともいえる 「条件分岐」 に挑戦します。
「もし○○だったら、こうする。そうでなければ、ああする。」
たったこれだけの仕組みですが、これがあるだけでプログラムは一気に「賢く」なります。今回の内容をマスターすれば、最終ゴールの「おみくじアプリ」にもかなり近づきますよ。
1. 条件分岐って何だろう？
プログラミングの話に入る前に、まずは日常生活で考えてみましょう。
私たちは毎日、無意識にたくさんの「条件分岐」をしています。
・朝、外を見て…… → 雨が降っていたら傘を持つ。晴れていたら持たない。
・冷蔵庫を開けて…… → 卵があったら目玉焼きを作る。なかったらパンだけ焼く。
・時計を見て…… → まだ8時前なら余裕がある。8時を過ぎていたら急ぐ。
どれも「もし○○なら、こうする」という判断ですよね。
プログラミングにおける「条件分岐」も、まったく同じ考え方です。コンピュータに「この条件に当てはまるなら、この処理をしてね」と指示を出す。これが if文（イフぶん） です。
if は英語で「もし」という意味。そのまんまですね。
2. if文の基本の書き方
さっそくコードを見てみましょう。まずは一番シンプルな形からです。
let tenki = "雨"; if (tenki === "雨") { alert("傘を持っていきましょう！"); }
このコードは、変数 tenki の中身が "雨" だったら、アラートで「傘を持っていきましょう！」と表示します。
書き方のルールを整理すると、こうなります。
if (条件) { 条件に当てはまるときの処理; }
ポイントは3つです。
１．条件は丸カッコ ( ) の中に書く
２．処理は波カッコ { } の中に書く
３．条件に当てはまったときだけ、波カッコの中が実行される
条件に当てはまらなかった場合は？ 波カッコの中はスキップされて、何も起きません。
3. 比較演算子を覚えよう
if文の条件の部分では、「AとBを比べる」ことがよくあります。この「比べる記号」を 比較演算子（ひかくえんざんし） と呼びます。
今回覚えるのは、この3つだけです。
”===”左と右が等しい
例：name === "太郎" 「nameが太郎と等しいなら」
”>”左が右より大きい
例：score > 80 「scoreが80より大きいなら」
”<”左が右より小さい
例：score < 30 「scoreが30より小さいなら」
=== はイコール記号が3つ並んでいます。ちょっと独特ですよね。
JavaScriptには ==（イコール2つ）という書き方もあるのですが、=== のほうが厳密に比較してくれるので安全です。「JavaScriptでは === を使う」とだけ覚えておけばOKです。
4. if / else で「どちらか一方」を実行する
「条件に当てはまるときはAをする、当てはまらないときはBをする」と書きたいことは、とても多いです。そんなときに使うのが else（エルス） です。
let tenki = "晴れ"; if (tenki === "雨") { alert("傘を持っていきましょう！"); } else { alert("今日はいい天気ですね！"); }
tenki が "雨" なら最初のブロックが、それ以外（"晴れ" や "曇り" など何でも）なら else のブロックが実行されます。
日常の言葉に置き換えると、こうですね。
もし（天気が雨なら）{ 傘を持つ} そうでなければ { 傘はいらない}
このように、if と else はセットで使うことがとても多いです。
5. 実際にHTMLで作ってみよう
ここからは、前回までに学んだHTML・CSS・JavaScriptの知識を組み合わせて、画面で動くものを作っていきます。
お題はこちらです。
これは立派な「条件分岐」ですよね。名前が入力されているかどうかで、表示するメッセージを変えています。
それでは、コードの全体を見てみましょう。いつもと同じように、テキストエディタに入力して greeting.html という名前で保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>あいさつアプリ</title> <style> body { font-family: sans-serif; padding: 30px; background-color: #f5f5f5; } h1 { color: #333; } input { font-size: 16px; padding: 8px; border: 2px solid #ccc; border-radius: 4px; } button { font-size: 16px; padding: 8px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } #result { margin-top: 20px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <h1>あいさつアプリ</h1> <p>名前を入力して、ボタンを押してみましょう。</p> <input type="text" id="nameInput" placeholder="ここに名前を入力"> <button id="greetButton">あいさつする</button> <p id="result"></p> <script> let button = document.getElementById("greetButton"); button.addEventListener("click", function() { let name = document.getElementById("nameInput").value; if (name === "") { document.getElementById("result").textContent = "名前を入れてください！"; } else { document.getElementById("result").textContent = name + "さん、こんにちは！"; } }); </script> </body> </html>
こんな画面が読み込めましたか？
保存したら、ブラウザでファイルを開いてみてください。
コードの解説
HTML部分：
<input type="text" id="nameInput"> は、テキストを入力できる欄です。placeholder は入力欄に薄く表示されるヒントの文字で、何か入力すると消えます。
<p id="result"></p> は、結果を表示するための空の段落です。JavaScriptからここに文字を入れます。
JavaScript部分：
let name = document.getElementById("nameInput").value;
この行で、入力欄に入っている文字を取得しています。.value は入力欄の「今入っている値」を取り出すための書き方です。前回学んだ .textContent が「表示されている文字を取得する」ものだったのに対して、.value は「入力欄の中身を取得する」ためのものです。
if (name === "") { document.getElementById("result").textContent = "名前を入れてください！"; } else { document.getElementById("result").textContent = name + "さん、こんにちは！"; }
ここがif文の本体です。name === "" は「nameが空文字（何も入力されていない状態）と等しいかどうか」をチェックしています。空文字はダブルクォーテーションを2つ並べた "" で表します。
空欄なら「名前を入れてください！」を、何か入力されていれば「○○さん、こんにちは！」を表示する。ちゃんと条件分岐が動いていますね。
↑こんな感じに表示されるはずです！
💡 Tips
if文は、プログラムの心臓部ともいえる存在です。実際の開発現場でコードを開くと、驚くほどたくさんのif文が出てきます。「ユーザーがログインしているかどうか」「在庫があるかどうか」「入力にエラーがないかどうか」……。今書いているような「入力が空かどうかをチェックする」処理も、実務ではバリデーション（入力チェック）と呼ばれていて、ほぼすべてのWebアプリに入っています。ここで学んでいることは、そのまま現場で使える知識ですよ。
6. else if で3パターン以上に分岐する
ここまでの if / else は「2択」でした。でも、現実には3つ以上に分岐したいことも多いですよね。
テストの点数が80点以上なら「すばらしい！」60点以上なら「合格です！」それ以外なら「もう少しがんばろう！」
こんなときに使うのが else if（エルス・イフ） です。
let score = 75; if (score > 80) { alert("すばらしい！"); } else if (score > 60) { alert("合格です！"); } else { alert("もう少しがんばろう！"); }
このコードは上から順番にチェックしていきます。
まず score > 80 をチェック → 75は80より大きくないので、スキップ次に score > 60 をチェック → 75は60より大きいので、「合格です！」が実行されるelse にはたどり着かない
上から順番にチェックして、最初に当てはまった1つだけが実行される。 これが大事なポイントです。
else if は何個でも増やせます。
if (条件A) { Aの処理 } else if (条件B) { Bの処理 } else if (条件C) { Cの処理 } else { どれにも当てはまらないときの処理 }
最後の else は「どの条件にも当てはまらなかったとき」の受け皿です。書かなくても動きますが、書いておくと安心です。
7. else if を使ったアプリを作ろう
では、else if を使った実践的な例を作ってみましょう。
今度は「時間帯によってあいさつが変わるアプリ」です。数字（時間）を入力すると、朝・昼・夜に合わせたあいさつが表示されます。
新しいファイルを作って、time-greeting.html という名前で保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>時間帯あいさつ</title> <style> body { font-family: sans-serif; padding: 30px; background-color: #fff8e1; } h1 { color: #e65100; } input { font-size: 16px; padding: 8px; width: 80px; border: 2px solid #ffcc80; border-radius: 4px; } button { font-size: 16px; padding: 8px 20px; background-color: #ff9800; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #f57c00; } #result { margin-top: 20px; font-size: 22px; font-weight: bold; } </style> </head> <body> <h1>時間帯あいさつアプリ</h1> <p>今の時間（0〜23の数字）を入れて、ボタンを押してみましょう。</p> <input type="number" id="hourInput" min="0" max="23" placeholder="時"> <button id="greetButton">あいさつを表示</button> <p id="result"></p> <script> let button = document.getElementById("greetButton"); button.addEventListener("click", function() { let hour = Number(document.getElementById("hourInput").value); if (hour < 6) { document.getElementById("result").textContent = "🌙 まだ夜中ですね……おやすみなさい"; } else if (hour < 12) { document.getElementById("result").textContent = "🌅 おはようございます！"; } else if (hour < 18) { document.getElementById("result").textContent = "☀️ こんにちは！"; } else { document.getElementById("result").textContent = "🌃 こんばんは！"; } }); </script> </body> </html>
こんな画面が開けましたか？
ブラウザで開いて、いろいろな数字を入れて試してみてください。
コードの解説
<input type="number" id="hourInput" min="0" max="23" placeholder="時">
type="number" にすると、数字専用の入力欄になります。min と max で入力できる数字の範囲を指定しています。
let hour = Number(document.getElementById("hourInput").value);
ここで Number() という新しい書き方が出てきました。入力欄から取得した値は、たとえ数字を入力しても「文字」として扱われます。Number() で囲むことで、それを「数値」に変換しています。数値にしないと、> や < での比較が正しく動かないことがあるためです。
if (hour < 6) { // 夜中 } else if (hour < 12) { // 朝 } else if (hour < 18) { // 昼 } else { // 夜 }
4つの分岐を else if でつないでいます。上から順にチェックされるので、たとえば hour が 10 のとき、最初の hour < 6 には当てはまらず、次の hour < 12 に当てはまるので「おはようございます！」が表示されます。
🔧 ここを変えてみよう！（ミニチャレンジ①）
time-greeting.html のコードをベースにして、以下のアレンジを試してみてください。
お題： 分岐の区切りを自分好みに変えてみましょう。
たとえば、「5時からおはよう」「10時からこんにちは」「17時からこんばんは」にするなど、数字を変えるだけでOKです。余裕がある人は、メッセージの文面や絵文字も変えてみてください。
コードのどこを変えればいいか、もうわかりますよね？ if の条件の数字を書き換えるだけです。気軽に試してみてください。
条件の数字を変えて挑戦してみよう！
8. ミニチャレンジ②：数あてゲームを作ろう
ここまでの知識を総動員して、ちょっと楽しいミニゲームを作ってみましょう。
ルール：
「当たりの数字」をプログラム側であらかじめ決めておく（今回は7）ユーザーが数字を入力して「判定」ボタンを押す入力した数字が当たりより大きければ「もっと小さい数字です！」入力した数字が当たりより小さければ「もっと大きい数字です！」ぴったりなら「正解！！」
新しいファイルを作って、number-game.html という名前で保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>数あてゲーム</title> <style> body { font-family: sans-serif; padding: 30px; background-color: #e8f5e9; } h1 { color: #2e7d32; } input { font-size: 18px; padding: 8px; width: 80px; border: 2px solid #81c784; border-radius: 4px; } button { font-size: 16px; padding: 8px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #388e3c; } #result { margin-top: 20px; font-size: 22px; font-weight: bold; } </style> </head> <body> <h1>数あてゲーム</h1> <p>1〜10の数字を当ててみよう！</p> <input type="number" id="guessInput" min="1" max="10" placeholder="?"> <button id="judgeButton">判定する</button> <p id="result"></p> <script> let answer = 7; let button = document.getElementById("judgeButton"); button.addEventListener("click", function() { let guess = Number(document.getElementById("guessInput").value); if (guess === answer) { document.getElementById("result").textContent = "🎉 正解！！ すごい！"; } else if (guess > answer) { document.getElementById("result").textContent = "⬇️ もっと小さい数字です！"; } else { document.getElementById("result").textContent = "⬆️ もっと大きい数字です！"; } }); </script> </body> </html>
ブラウザで開いて、実際に遊んでみてください。何回かで正解にたどり着けるはずです。
コードの解説
let answer = 7;
最初に「正解の数字」を変数に入れておきます。こうしておけば、この数字を変えるだけで問題を変更できます。
if (guess === answer) { // 正解 } else if (guess > answer) { // 大きすぎる } else { // 小さすぎる }
3パターンの分岐ですね。「等しい」「大きい」「それ以外（＝小さい）」の3つです。ここまでに学んだ "===" と ">" を両方使っています。
💡 Tips
今回の数あてゲームでは let answer = 7 と直接数字を書きましたが、実際のゲーム開発ではランダム（ランダムな数を生成する仕組み）を使って、毎回答えが変わるようにします。「毎回同じ答えじゃゲームにならないよね？」と思った方、その感覚は正しいです。ランダムの使い方は、おみくじアプリを作るときに登場しますので、お楽しみに！
🔧 ここを変えてみよう！（ミニチャレンジ③）
数あてゲームのコードを、自分でカスタマイズしてみましょう。
お題： let answer = 7; の数字を別の数字に変えてみましょう。さらに、min と max の範囲も広げて「1〜100の数あてゲーム」にしてみてください。
変更する箇所は3つだけです。
１．let answer = 7; → 好きな数字に変える
２．<input> の max="10" → max="100" に変える
３．説明文の「1〜10」を「1〜100」に変える
こうした「少しだけ変えて動かしてみる」体験が、プログラミングの理解をグッと深めてくれます。
今回のまとめ
今回は 条件分岐（if文） について学びました。振り返ってみましょう。
条件分岐 は「もし○○なら、こうする」という処理の仕組みif文 で条件をチェックし、当てはまるときだけ処理を実行できるelse を使うと「当てはまらないとき」の処理も書けるelse if を使うと、3パターン以上の分岐ができる比較演算子 として ===（等しい）、>（より大きい）、<（より小さい）を覚えた入力欄の値は .value で取得し、数字として使うときは Number() で変換する
if文が書けるようになったということは、「プログラムに判断させる」力を手に入れたということです。ここまでできれば、大きな一歩ですよ。
次回の予告
第6回：繰り返し処理 — 同じ作業はコンピュータにおまかせ
次回は for文（フォーぶん） を学びます。「同じような処理を何回も繰り返す」のは、プログラミングが最も得意とすることの一つです。今回の条件分岐と組み合わせると、できることが一気に広がります。
たとえば「1から100まで順番に調べて、条件に合うものだけ表示する」なんてことも、for文があれば簡単にできます。次回もぜひ一緒に進めていきましょう。
