JavaScript
PR

【JavaScript 2-1】ifの入口｜条件で動きを変える（初心者向け）

JS2-1.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は JavaScript 2-1「ifの入口」です。
ここでは「もし〇〇なら、こうする」という条件分岐
の考え方を見ていきます。
最初は細かい書き方を全部覚えるより、条件によって表示が変わる感覚をつかめれば大丈夫です。

前回は、ボタンを押したら文字や回数が変わる流れを見ました。

今回はその次として、
**条件によって動きを変える**
ところへ進みます。

たとえば、

– 回数が3回以上なら「よく続いています」と表示する
– 点数が70点以上なら「合格」と表示する
– 入力欄が空なら「入力してください」と表示する

このような、
**もし〇〇なら、こうする**
という考え方をJavaScriptで書く時に使うのが、
**if文**です。

Q
「ifは“もし〇〇なら”をコードで書くためのものです」

最初はこの理解で大丈夫です。

・if → もし〇〇なら
・else → そうでなければ
・条件 → 比べる部分

たとえば、

if (count >= 3) {
3回以上の時の処理
} else {
それ以外の時の処理
}

のように書くと、
count の数字によって動きを変えられます。

最初は、
「条件に合う時」と「条件に合わない時」で表示が変わる、
くらいに見れば十分です。

目次
  1. 今回のゴール
  2. ifとは？
  3. if と else の基本形
  4. まずは完成形を見る
  5. どこを見ればいい？
  6. 比較演算子をざっくり見る
  7. if の中に書いた処理だけが動きます
  8. else は“そうでなければ”です
  9. 条件を変えると、結果も変わります
  10. console.log で条件の確認もできます
  11. よくあるつまずき
  12. 今回のまとめ
  13. 今日のゴール確認
  14. JavaScript 2-2へ
  15. JavaScript 2-1
ここまでできればOK

今回のゴール

  • if は「もし〇〇なら」を書くものだと分かる
  • else は「そうでなければ」の処理だと分かる
  • 比較演算子の入口が分かる
  • ボタンを押した時に、条件によって表示を変えられる
  • 次の関数の入口へ進む準備ができる

ifとは？

if は、条件によって処理を変えたい時に使います。

かなりざっくり言うと、

**もし条件に合っていたら、この処理をする**

という書き方です。

if (count >= 3) {
  message.textContent = "3回以上クリックされました。";
}
JavaScript

この場合は、
count が 3 以上なら、
画面の文字を変えるという意味になります。

基本①

if と else の基本形

書き方 ざっくりした意味
ifもし条件に合っていたら
elseそうでなければ
条件判断するための部分

if と else は、セットで見ると分かりやすいです。

if (count >= 3) {
  message.textContent = "3回以上クリックされました。";
} else {
  message.textContent = "まだ3回未満です。";
}
JavaScript

これは、

– count が 3 以上なら「3回以上クリックされました。」
– そうでなければ「まだ3回未満です。」

と表示を分けています。

最初は if だけでも使えます。
ただ、else も一緒に見ると「条件に合う時 / 合わない時」の違いが分かりやすくなります。

コピペOK

まずは完成形を見る

今回は、ボタンを押すたびにクリック回数が増え、
3回以上になったら表示が変わるページを作ります。

フォルダ構成は、前回までと同じように考えると分かりやすいです。

javascript-02-01-example/

├─ index.html

├─ css/

│　└─ style.css

└─ js/

　　└─ script.js
TeX

まずは index.html をこの形で作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript 2-1</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main class="page">
    <section class="intro-card">
      <p class="label">JavaScript 2-1 の一例</p>
      <h1>ifの入口</h1>
      <p class="lead">ボタンを押した回数によって、表示するメッセージを変える練習です。</p>
      <p id="message" class="message">まだ条件は確認されていません。</p>
      <p id="countText" class="message">クリック回数：0回</p>
      <button id="checkButton" class="button" type="button">条件を確認する</button>
    </section>
  </main>
  <script src="js/script.js"></script>
</body>

</html>
HTML

次に、cssフォルダの中に style.css を作って、下のコードを書きます。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.page {
  max-width: 760px;
  margin: 24px auto 0;
}

.intro-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.label {
  color: #92400e;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}

h1 {
  color: #111827;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-top: 0;
  margin-bottom: 24px;
}

.message {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  padding: 16px;
  margin-bottom: 16px;
}

.button {
  background-color: #eab308;
  color: #111827;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #ca8a04;
}
CSS

最後に、jsフォルダの中に script.js を作って、下のコードを書きます。

const message = document.getElementById("message");
const countText = document.getElementById("countText");
const checkButton = document.getElementById("checkButton");

let count = 0;

checkButton.addEventListener("click", function() {
  count = count + 1;

  countText.textContent = "クリック回数：" + count + "回";

  if (count >= 3) {
    message.textContent = "3回以上クリックされました。よく続いています。";
  } else {
    message.textContent = "まだ3回未満です。あと少し押してみましょう。";
  }
});
JavaScript
toshi
toshi

今回は “クリック回数が3回以上かどうか”
で表示を分けています。ここが if の入口です。

変化のポイント

どこを見ればいい？

見る場所起きていること
let count = 0最初のクリック回数を0にしている
count = count + 1ボタンを押すたびに1つ増やしている
if (count >= 3) count が3以上か確認している
else3未満だった時の表示を用意している
textContent条件に応じて画面の文字を変えている

今回の流れは、
前回までの内容に if を足した形です。

HTMLの要素を見つける。
ボタンが押されたら count を増やす。
count が3以上か確認する。
条件に合わせて表示を変える。

この流れが見えると、
if の使いどころが分かりやすくなります。

演算子について

比較演算子をざっくり見る

書き方意味
count >= 3count が3以上
count > 3count が3より大きい
count <= 3count が3以下
count < 3count が3より小さい
count === 3count が3と同じ

今回使っているのは、

count >= 3
JavaScript

です。

これは、
count が 3 以上かどうかを見ています。

最初は全部覚えなくて大丈夫です。
まずは `>=` が「以上」だと分かればOKです。

基本②

if の中に書いた処理だけが動きます

if の条件に合った時は、
if の中に書いた処理が動きます。

if (count >= 3) {
  message.textContent = "3回以上クリックされました。よく続いています。";
}
JavaScript

この場合、
count が 3 以上になった時だけ、
このメッセージが表示されます。

{ } の中に書いたものが、
その条件に合った時に動く処理です。
最初は、if の { } の中をひとかたまりとして見ると分かりやすいです。

基本③

else は“そうでなければ”です

else は、if の条件に合わなかった時に動きます。

if (count >= 3) {
  message.textContent = "3回以上クリックされました。";
} else {
  message.textContent = "まだ3回未満です。";
}
JavaScript

この場合、

– 3回以上なら if 側
– 3回未満なら else 側

が動きます。

toshi
toshi

else は「それ以外の時」と見ると、
かなり読みやすくなります。

練習してみよう！

条件を変えると、結果も変わります

  • count >= 3 を count >= 5 に変えてみる
  • message.textContent の文章を変えてみる
  • count = count + 1 を count = count + 2 に変えてみる
  • else 側の文章も変えてみる
  • どのタイミングで表示が変わるか確認する

今回の練習では、
条件の数字を変えると、
表示が切り替わるタイミングも変わることを確認します。

「条件を変えると、動きも変わる」
この感覚が if の大事なところです。

基本④

console.log で条件の確認もできます

条件が合っているか分かりにくい時は、
console.log を入れると確認しやすいです。

console.log("現在のcount：" + count);（
コードここまで）

クリック処理の中に入れると、
ボタンを押すたびに現在の count を確認できます。

（ ここにコードブロック： JavaScript）
checkButton.addEventListener("click", function() {
  count = count + 1;

  console.log("現在のcount：" + count);

  if (count >= 3) {
    message.textContent = "3回以上クリックされました。";
  } else {
    message.textContent = "まだ3回未満です。";
  }
});
JavaScript

console.log は、ページ本文ではなく開発者ツールの
コンソールに表示されます。
動きが分かりにくい時の確認用として使うと便利です。

ここだけ確認

よくあるつまずき

Q
「つまずき①：if の条件がいつも同じ結果になる」

まずは count が増えているか確認します。

count = count + 1;
JavaScript

がクリック処理の中に入っているかを見てください。

count が増えていないと、
条件の結果も変わりません。

Q
「つまずき②：>= と > の違いが分からない」

最初はこの違いだけ見れば大丈夫です。

  • count >= 3 → 3を含む
  • count > 3 → 3を含まない

つまり、3回目で切り替えたいなら `>= 3` が分かりやすいです。

Q
「つまずき③：else をどこに書くか分からない」

else は、if のすぐ後に書きます。

if (count >= 3) {
  message.textContent = "3回以上です。";
} else {
  message.textContent = "まだ3回未満です。";
}
JavaScript

if の { } が終わったあとに、else を続けます。

Q
「つまずき④：画面の文字が変わらない」

HTML側が、

まずは id 名を確認します。

<p id="message" class="message">まだ条件は確認されていません。</p>
HTML

なら、JavaScript側も

const message = document.getElementById("message");
JavaScript

のように同じ名前にします。

message の文字がずれていると、対象を見つけられません。

ここだけ押さえればOK

今回のまとめ

  • if は「もし〇〇なら」を書くためのもの
  • else は「そうでなければ」の処理を書くためのもの
  • count >= 3 は「count が3以上」という意味
  • 条件に合うかどうかで、表示を変えられる
  • console.log を使うと、条件確認がしやすい
できた判定

今日のゴール確認

ここまでできたらOKです。

  • if の入口が分かった
  • 条件によって表示を変えられた
  • >= のような比較の入口が見えた
  • 次の JavaScript 2-2 に進む準備ができた
次に読む

JavaScript 2-2へ

今回は、if を使って条件によって動きを変える流れを見ました。

次は、
同じ処理をまとめて使いやすくするために、
関数の入口へ進みます。

関数が分かると、
JavaScriptのコードを少し整理しやすくなります。

次へ：JavaScript 2-2 関数の入口へ進む
一例zipについて

JavaScript 2-1

この記事の内容は、JavaScript 2-1 の一例として zip ファイルを用意しました。

最初はそのまま開いて動きを確認し、
そのあとで条件の数字や表示される文章を少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-02-01-example.zip
└─ javascript-02-01-example/
├─ index.html
├─ css/
│　└─ style.css
└─ js/
　　└─ script.js

javascript-02-01-exampleダウンロード
PR：最初の1冊（必要な方だけ）

PR：JavaScriptを進めるための参考（必要な方だけ）
JavaScriptは、条件分岐・関数・DOM操作あたりで少しつまずきやすいので、
必要な方だけ参考を置いておきます。
まずは記事内のコードだけでも十分進めます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました