この授業のゴール
if 〜 else を使って、条件によって動きが変わるプログラムを書けるようになる。
この授業のためし方 (共通): コードは、VS Code で開いた HTMLファイルの
<script> と </script> のあいだ (= 「script の中」) に書きます。Ctrl + S で保存 → Go Live で表示 → 結果は F12 →「コンソール (Console)」タブ、がいつもの流れです。1. if ― もし〜なら
形はこれだけです。声に出して読むと覚えやすいです。「もし(if)、かっこの中が本当なら、波かっこの中をやる」。
let tensuu = 85;
if (tensuu >= 80) {
console.log("合格!");
}
( )の中が条件。「tensuu は 80 以上か?」- 条件が本当(true)のときだけ、
{ }の中が実行されます。 tensuuを 50 に変えて保存すると…何も出ません。条件がうそ(false)だからです。
2. 比較の記号たち
条件の中で使う「くらべる記号」は、この5つでほぼ足ります。
| 記号 | 意味 | 例 |
|---|---|---|
>= | 以上 | tensuu >= 80 |
<= | 以下 | nokori <= 0 |
> / < | より大きい / より小さい | kazu > 10 |
=== | 等しい | kotae === "ねこ" |
!== | 等しくない | kotae !== "" |
最重要の注意: 「等しい」は
= ではなく ===(3つ)です。= は授業2「変数」でやった「箱に入れる」の意味なので、条件に使うとバグになります。初心者が世界で一番踏むワナなので、先に知っておきましょう。3. else と else if ― ちがったら、こっち
「もし〜なら A、ちがったら B」は else で書きます。
let tensuu = 60;
if (tensuu >= 80) {
console.log("合格!");
} else {
console.log("惜しい! もう一回!");
}
3つ以上に分けたいときは else if をはさみます。上から順に調べて、最初に当てはまったところだけが実行されます。
if (tensuu >= 80) {
console.log("合格!");
} else if (tensuu >= 50) {
console.log("あと少し!");
} else {
console.log("一緒に復習しよう!");
}
4. やってみよう ― 合言葉チェッカー
やってみよう
授業1「JavaScriptの最初の一歩」の「ボタンで動かす」と組み合わせて、小さな番人プログラムを作ります。web-renshu フォルダに aikotoba.html を作り (ひな形 ! + Tab)、<body> の中にこう書きます。動かし方は、保存 → Go Live → 入力欄に合言葉を打って「チェック」ボタンをクリック、です。
<input type="text" id="kotoba" placeholder="あいことば">
<button id="check-btn">チェック</button>
<script>
var btn = document.getElementById("check-btn");
btn.addEventListener("click", function () {
var kotoba = document.getElementById("kotoba").value;
if (kotoba === "ひらけごま") {
alert("正解! ようこそ!");
} else {
alert("ちがいます…");
}
});
</script>
- まず写して動かす。
.valueは「入力欄の中身を取り出す」という意味です。 - 合言葉を自分の好きな言葉に変える。
else ifを1つ足して、「おしい言葉」(たとえば「ごま」)のときだけ特別な返事を出す。- 動いたらスタッフに見せて、合言葉当てゲームをしてもらう。
発展チャレンジ(慣れている方・A型の方向け)
発展チャレンジ
&&(かつ)と||(または)を調べて、「点数が50以上 かつ 80未満」のような条件を書いてみましょう。- 合言葉チェッカーに「3回間違えたらロックされる」機能を足してみましょう。間違えた回数を変数で数えるのがポイントです(授業2「変数」の
kaisuu = kaisuu + 1;の出番です)。 ===と==(2つ)の違いを調べてみましょう。なぜプロは === しか使わないのか、理由ごと理解できたら一人前です。