【もう迷わない】JavaScriptのif文と条件式の使い方！else文や三項演算子も解説してるよ

本記事は、「条件分岐の文法や書き方についてイマイチ分からないと」と思いつつ

UIHACK 編集長

・特定の条件に応じて適切な処理を行いたいが、if文の書き方がわからない。
・複数の条件を組み合わせて処理したいが、どうすれば良いのか分からない。
・Webデザイナーの方で、人がいなくてコードを修正しなけばいけない人。

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、JavaScriptのif文は、特定の条件に応じて違う処理をするために必要です。初めての方でも分かりやすく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

さあ、if文の世界へ行ってらっしゃい！それでは、ご一読ください！

JavaScriptの条件式とは？if文を使った条件式の使い方

そもそも条件式とは？

条件式は、プログラムの中で特定の条件が成り立つかどうかを判断するための式です。条件式は、真（true）か偽（false）のどちらかを答えることができます。例えば、数値の比較や天気が晴れかどうかを判断するときに使います。

if文を使った条件式の使い方

if文は、条件式の結果によってプログラムの流れを変えるとっても便利な機能です。

if文を使うと、「もし～だったら、～をする」という処理を簡単に書くことができます。

UIHACK 編集長

例えば、お天気が晴れの日には外で遊びたいですよね？それをプログラムで表現するとこんな感じです。

let weather = "晴れ";

if (weather === "晴れ") {
  console.log("外で遊びたい！");
}

このプログラムでは、変数weatherに入っている値が「晴れ」の場合に、console.logで「外で遊びたい！」と表示されます。

変数について、もっと知りたいあなたに以下のページをおすすめします。

2022年8月17日 【Javascript】初心者向けに変数の意味と3つ(var・let・const)の宣言の使い分け方法を解説！

UIHACK 編集長

また、もっと複雑な条件も書くことができます。例えば、お天気が晴れかつ気温が30度以上の日には、プールに行きたくなりますよね？

let weather = "晴れ";
let temperature = 32;

if (weather === "晴れ" && temperature > 30) {
  console.log("プールに行きたい！");
}

このプログラムでは、変数weatherが「晴れ」で、temperature（気温）が30度より大きい場合に、「プールに行きたい！」と表示されます。

条件式を使って、プログラムの動きを上手に条件を付けてみましょう！もし天気が晴れなら遊びに出かけ、寒い日は温かくして過ごしましょうね！

JavaScriptのif文とelse文を理解しよう

JavaScriptのif文とelse文って何？

JavaScriptのif文は、特定の条件が成り立つかどうかを判定して、条件が真（true）の場合にだけ特別なことをするためのものです。例えば、「もし晴れたら、外で遊ぼう！」というような判断をプログラムで表現できます。

そして、else文はif文とセットで使います。if文の条件が偽（false）の場合に、else文の中の処理を実行することができます。

UIHACK 編集長

例えば、もし、天気が晴れだったら、外で遊ぶことができますよね？

let weather = "晴れ";

if (weather === "晴れ") {
  console.log("外で遊ぼう！");
} else {
  console.log("部屋で遊ぼう。");
}

このプログラムでは、weatherという変数に入っている天気が「晴れ」の場合は、「外で遊ぼう！」と表示されますが、「晴れ」以外（例えば雨だった場合）は「部屋で遊ぼう。」と表示されます。

else文について理解できましたか？

if文は、条件が成り立つかどうかを確認して、それに応じて特別なことをするためのもの。else文はif文の条件が偽（false）の場合に、別のことを実行するためのものです。この2つをうまく使えば、プログラムの動きを自分の好きなようにコントロールできるよ！外が晴れていたら遊びに出かけようね！雨の日は室内で楽しいことをしよう！楽しいプログラミングの世界に飛び込んでみてね！

JavaScriptの三項演算子で簡潔な条件分岐を書こう

JavaScriptの三項演算子は、条件分岐を簡単に行うための特別な方法です。if文を使わずに、1行で条件に応じた値を返すことができるんだよ！

三項演算子って何？

三項演算子は、簡単に言うと「もし～だったら～を、違ったら～をする方法」なんだ。条件を確認して、条件が真（true）の場合には真の場合の値を返し、条件が偽（false）の場合には偽の場合の値を返すんだよ。

UIHACK 編集長

使い方は簡単！三項演算子の使い方はこうだよ！

条件式 ? 真の場合の値 : 偽の場合の値;

UIHACK 編集長

例えば、もし夏休みだったら友達と遊びに行くけど、違ったら家でゲームをすると決めたい場合は、次のように書けるんだ。

let isSummerVacation = true;
let plan = isSummerVacation ? "友達と遊びに行く" : "家でゲームをする";
console.log(plan);

この例では、isSummerVacationがtrue（真＝夏休み）なら「友達と遊びに行く」と表示されるけど、false（偽＝夏休みじゃない）なら「家でゲームをする」と表示されるんだ。

三項演算子は、条件に応じた値を簡単に決めるのに役立つよ。でも、複雑な条件だったり、複数の処理をしたい場合は、普通のif文を使った方がいいこともあるんだ。

JavaScriptのif文と正規表現の組み合わせで特定の文字列を検出する裏技

JavaScriptのif文と正規表現を組み合わせることで、特定の文字列を検出する裏技を紹介します！

特定の文字列を検出する裏技

UIHACK 編集長

例えば、文章の中に「JavaScript」という言葉があるかを調べたい時に、次のような方法が使えるよ！

const sentence = "JavaScriptはとても楽しい言語です。JavaScriptを学ぶとプログラミングがもっと楽しくなります！";

// 正規表現で「JavaScript」を検出する
if (sentence.match(/JavaScript/)) {
  console.log("「JavaScript」が見つかりました！");
} else {
  console.log("「JavaScript」は見つかりませんでした。");
}

この例では、sentenceという変数に文章が入っています。match関数を使って、正規表現/JavaScript/を用いて「JavaScript」という文字列を検出しています。

この例では、変数sentenceに文章が入っています。「match」という特別な道具を使って、「JavaScript」という言葉が文章の中にあるかどうかを調べているんだよ！

もし「JavaScript」という言葉が見つかれば、「「JavaScript」が見つかりました！」と表示されるよ。見つからなければ、「「JavaScript」は見つかりませんでした。」と表示されるんだ。

【応用1】JavaScriptのif文を使った年齢判定ロジック

年齢判定ロジックは、年齢によって違う処理をするための特別なコードだよ。年齢をチェックして、条件に合ったメッセージを表示するんだ！

複数の条件をまとめよう

年齢による条件がたくさんある場合、else ifを使って条件をまとめるとシンプルになるよ。それによってコードがすっきりするんだ！

UIHACK 編集長

例えば、以下のコードでは、18歳未満、18歳以上で65歳未満、65歳以上の条件をまとめているよ。

let age = 25;

if (age < 18) {
  console.log("未成年です。");
} else if (age >= 18 && age < 65) {
  console.log("成人です。");
} else {
  console.log("高齢者です。");
}

条件を逆に考えよう

年齢の範囲を確認する際、条件を逆に考えるとコードがスッキリするよ。例えば、未成年の場合を逆に考えてみよう。

let age = 16;

if (age >= 18) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}

UIHACK 編集長

こうすると、成人の場合の処理を先に書けるから、コードが見やすくなるんだ。

三項演算子を使おう

シンプルな条件分岐の場合、三項演算子を使うとコードが短くなるんだ。

UIHACK 編集長

例えば、このように書けるよ。

let age = 20;
let message = age >= 18 ? "成人です。" : "未成年です。";
console.log(message);

最適化はコードをスマートにするための方法だよ。だけど、自分の作ったコードが楽しく読めることも大切だよ！

【応用2】JavaScriptで誕生日から年齢を計算する方法

最後は、自分の誕生日から年齢を計算しよう！

JavaScriptを使って、自分の誕生日から年齢を計算する方法があるんだよ！

まず、自分の誕生日を yyyy-mm-dd 形式で書いて、それをコンピューターに伝えるんだ。

次に、コンピューターはその誕生日を使って、現在の年齢を計算するんだ。

// 自分の誕生日を設定（yyyy-mm-dd形式）
const birthday = "2005-07-18";

// 誕生日のDateオブジェクトを作る
const birthDate = new Date(birthday);

// 今の日付のDateオブジェクトを作る
const currentDate = new Date();

// 年齢を計算する
const age = currentDate.getFullYear() - birthDate.getFullYear();

// ただし、まだ誕生日が来ていない場合は1歳引く
if (
  currentDate.getMonth() < birthDate.getMonth() ||
  (currentDate.getMonth() === birthDate.getMonth() &&
    currentDate.getDate() < birthDate.getDate())
) {
  age--;
}

// 計算した年齢を表示する
console.log("年齢：" + age + "歳");

UIHACK 編集長

これで、自分の誕生日を入れて実行すれば、年齢が表示されるよ！

誕生日から年齢を計算する方法の実行結果

年齢：18歳

UIHACK 編集長

これは、自分の年齢に応じた処理をするのに役立つよ。たとえば、ゲームやアプリを作るときに、年齢によって表示する内容を変えたり、年齢を確認する必要がある場合に使えるんだ。

JavaScriptのif文についてのよくある質問

Q：JavaScriptのif文でNaN（非数値）の扱い方について

if文でNaNを扱う方法

JavaScriptでは、NaNは特殊な値であり、他の数値とは異なる性質を持っています。例えば、NaNとの比較は常にfalseになります。

let result = NaN;

if (result === NaN) {
  console.log("このコードは実行されません。");
}

UIHACK 編集長

上記のコードでは、resultにNaNが代入されていますが、if文の条件式にresult === NaNを書いても、条件は満たされず、コードブロックの中の処理は実行されません。

なぜなら、NaNは他のNaNと等しいと判定されないためです。NaN同士の比較は常にfalseになるので、特別な方法を使ってNaNの判定をする必要があります。

A：結論は、isNaN()関数を使う事が一般的です。

let result = NaN;

if (isNaN(result)) {
  console.log("resultはNaNです。");
}

UIHACK 編集長

isNaN()関数は、引数がNaNかどうかを判定します。引数がNaNならばtrueを返し、それ以外の場合はfalseを返します。

このようにisNaN()関数を使うことで、NaNを適切に判定してif文の中で適切な処理を行うことができます。

let age = 25;
let isStudent = false;

if (age < 18) {
  console.log("未成年です。");
} else if (age >= 18 && age <= 25 && isStudent) {
  console.log("学生です。");
} else {
  console.log("成人で学生ではありません。");
}

let age = 25;
let isStudent = false;

if (age >= 18 && age <= 25 && isStudent) {
  console.log("学生です。");
} else if (age >= 18) {
  console.log("成人で学生ではありません。");
} else {
  console.log("未成年です。");
}

function isStudentAdult(age, isStudent) {
  return age >= 18 && age <= 25 && isStudent;
}

let age = 25;
let isStudent = false;

if (isStudentAdult(age, isStudent)) {
  console.log("学生です。");
} else if (age >= 18) {
  console.log("成人で学生ではありません。");
} else {
  console.log("未成年です。");
}

Q：JavaScriptのif文での文字列比較による予期しない結果への対処

JavaScriptのif文で文字列比較を行う際に、予期しない結果が出る場合があります。このような問題に対処するために、以下の対処法を考慮すると良いでしょう。

A1：大文字小文字の違いを無視する

みんなが書く「apple」と「APPLE」を比べると、大文字と小文字が違うから、同じではないと思っちゃうことがあるよね。でも、大文字小文字の違いを無視して比べる方法があるよ！

UIHACK 編集長

例えば、次のように書けば大文字小文字を無視して比べることができるんだよ。

let userInput = "apple";

if (userInput.toLowerCase() === "apple") {
  console.log("入力された文字列はappleです。");
}

A2：文字列の空白を取り除く

ユーザーが入力した文字列に「orange」と書いたのに、ちょっと前に空白を入れてしまって「 orange 」となっちゃったことがあるかもね。でも大丈夫！空白を取り除いて正しく比べる方法があるよ。

UIHACK 編集長

こんな風に書いてみよう。

let userInput = "  orange  ";

if (userInput.trim() === "orange") {
  console.log("入力された文字列はorangeです。");
}

A3：三項演算子の使い方

もし、「banana」と書いたのに、比べると「BANANA」としてしまったら、同じと判定されなくて困っちゃうかもね。でも三項演算子を使うと、もっと簡単に比べることができるよ！

UIHACK 編集長

こんな感じでやってみよう。

let userInput = "banana";
let message = userInput === "banana" ? "入力された文字列はbananaです。" : "入力された文字列はbananaではありません。";
console.log(message);

結論とまとめ

UIHACK 編集長

今回は、JavaScriptのif文についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から「【もう迷わない】JavaScriptのif文と条件式の使い方！」を読む↑

そもそも何故、プログラミングになぜ繰り返し処理があるのかピンと来てないあなたに！

2023年7月14日 【JavaScript】for文の繰り返し処理と無限ループの回避方法

JavaScriptのみで、アコーディオンメニューを実装したいあなたに！

2023年7月12日 【JavaScript】アコーディオンメニューを実装！クリックでスムーズな開閉効果を実現！【jQuery不要】