【JavaScript】if文について徹底解説！！if文とswitch文の使い方を学ぼう！！

2024年2月29日

【完全ガイド】Javaスクリプトのif文をマスターしよう！

はじめに

「if」と一言で言っても、プログラミングにおける"もしも"は非常に強力です。

JavaScriptのif文について学ぶことで、プログラムに条件分岐をもたらし、多様な動きを実現できます。

サルモリ

「ifって、もしもって意味だよね？プログラムでもそうなの？」

はい、その通りですサルモリさん！

プログラムにおける「if」も、その通り「もしも」の条件を作り、その条件が真（true）である時に特定のコードが実行されます。

基本的なif文の構文

JavaScriptのif文は、次の基本的な構文を持っています。

まずは基本構文に触れ、理解を深めていきましょう。

サルモリ

「基本をしっかり押さえて、強固な土台を作るんだね！」

ソースコード例

if (条件) {
    // 条件がtrueのときに実行されるコード
}

if (条件) {

// 条件がtrueのときに実行されるコード

}

この「条件」の部分がtrueである時、波括弧（{}）内のコードが実行されます。

逆に、条件がfalseである時は、波括弧内のコードはスキップされます。

サルモリ

「条件がtrueの時だけ動くのかー。シンプルでいいね！」

if文の実用例

さて、ここで具体的なコード例を見て、if文をもう少し探ってみましょう。

ここでは、変数「score」の値が80以上の時に、「合格です！」とコンソールに表示するシンプルな例を見ていきます。

ソースコード例

let score = 85;

if (score >= 80) {
    console.log('合格です！');
}

let score = 85;

if (score >= 80) {

console.log('合格です！');

}

 出力結果
合格です！

サルモリ

「こうやって条件に合った時だけ、何かを実行するんだね。」

そうですね、サルモリさん。

この一連のフローをマスターすることで、プログラムは多様な表現が可能になり、より複雑な動きを実現できます。

複数の条件を持つif文

「もしも」の条件が一つではなく、複数ある場合にどうすればよいでしょうか。

その場合、else ifを使って、追加の条件を指定することができます。

サルモリ

「else ifって、他の条件をチェックするの？」

その通りです！

基本的な形は以下のようになります。

ソースコード例

if (条件1) {
    // 条件1がtrueの時に実行
} else if (条件2) {
    // 条件1がfalseで条件2がtrueの時に実行
} else {
    // 条件1も条件2もfalseの時に実行
}

if (条件1) {

// 条件1がtrueの時に実行

} else if (条件2) {

// 条件1がfalseで条件2がtrueの時に実行

} else {

// 条件1も条件2もfalseの時に実行

}

それでは、具体的な例を通して見てみましょう。

次の例では、成績に応じて異なるメッセージをコンソールに出力します。

ソースコード例

let score = 75;

if (score >= 90) {
    console.log('素晴らしい！');
} else if (score >= 80) {
    console.log('良い成績です！');
} else if (score >= 70) {
    console.log('もう少し頑張りましょう！');
} else {
    console.log('不合格です...');
}

let score = 75;

if (score >= 90) {

console.log('素晴らしい！');

} else if (score >= 80) {

console.log('良い成績です！');

} else if (score >= 70) {

console.log('もう少し頑張りましょう！');

} else {

console.log('不合格です...');

}

 出力結果
もう少し頑張りましょう！

サルモリ

「うーん、これでいろんな条件に対してメッセージを変えられるんだね！」

ネスティングしたif文

if文は、その中にさらにif文を持つことができます。これをネスティングと言います。

ここではネスティングされたif文について学びましょう。

サルモリ

「if文の中にif文！？頭がこんがらがりそう…」

複雑に感じるかもしれませんが、一つ一つのロジックを落ち着いて考えれば、しっかり理解することができますよ！

それでは、ネスティングされたif文の一例を見てみましょう。

ソースコード例

let age = 20;
let hasLicense = true;

if (age >= 18) {
    if (hasLicense) {
        console.log('運転しても良いです！');
    } else {
        console.log('運転免許を取得しましょう！');
    }
} else {
    console.log('運転は18歳からです！');
}

let age = 20;

let hasLicense = true;

if (age >= 18) {

if (hasLicense) {

console.log('運転しても良いです！');

} else {

console.log('運転免許を取得しましょう！');

}

} else {

console.log('運転は18歳からです！');

}

 出力結果
運転しても良いです！

サルモリ

「あ、なるほど。年齢が18歳以上で、さらに運転免許があるかどうかもチェックするわけだ！」

switch文

switch文は、多くの条件の中から一つを選んで実行する場合に便利です。
switch文は以下のような構文を持っています。

ソースコード例

switch (式) {
    case 値1:
        // 式が値1と等しい場合に実行されるコード
        break;
    case 値2:
        // 式が値2と等しい場合に実行されるコード
        break;
    default:
        // 式がどの値とも一致しない場合に実行されるコード
}

switch (式) {

case 値1:

// 式が値1と等しい場合に実行されるコード

break;

case 値2:

// 式が値2と等しい場合に実行されるコード

break;

default:

// 式がどの値とも一致しない場合に実行されるコード

}

それでは具体的な例を見てみましょう。
次の例では、dayが何であるかに応じて、異なるメッセージをコンソールに出力します。

ソースコード例

let day = 'Monday';

switch (day) {
    case 'Monday':
        console.log('月曜日は忙しいな...');
        break;
    case 'Wednesday':
        console.log('水曜日はちょっと一息。');
        break;
    case 'Friday':
        console.log('金曜日は楽しい！');
        break;
    default:
        console.log('週末はリフレッシュ！');
}

let day = 'Monday';

switch (day) {

case 'Monday':

console.log('月曜日は忙しいな...');

break;

case 'Wednesday':

console.log('水曜日はちょっと一息。');

break;

case 'Friday':

console.log('金曜日は楽しい！');

break;

default:

console.log('週末はリフレッシュ！');

}

[/st-midasibox]

 出力結果
月曜日は忙しいな...

三項演算子

三項演算子は、「条件 ? 式1 : 式2」の形で書かれ、条件がtrueの場合は式1が、falseの場合は式2が実行されます。
次の例では、scoreが60以上なら'Passed'、それ以下なら'Failed'という文字列をmessageに代入します。

ソースコード例

let score = 65;
let message = score >= 60 ? 'Passed' : 'Failed';
console.log(message); // Passed

let score = 65;

let message = score >= 60 ? 'Passed' : 'Failed';

console.log(message); // Passed

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

演算子の実例とその使い方

JavaやJavaScriptでコーディングを進める際、しばしば遭遇する「演算子」。それぞれの言語には多くの演算子が用意されており、状況に応じて選択して使うことで、プログラムのコードは格段に効率的かつシンプルになります。

それでは、一般的な演算子とその使用例について確認していきましょう。

サルモリ

演算子って、初めてプログラムを学ぶときは難しく感じるかもしれないけど、慣れるとすごく便利だよね！

基本的な演算子

ここでは、比較演算子や論理演算子について詳しく見ていきましょう。これらは条件分岐において特に頻出し、その適用例は非常に多いです。

以下に、基本的な演算子とそのシンボルを表形式でまとめました。

演算子	シンボル	説明
等しい	==	左右のオペランドが等しい場合にtrueを返します。
異なる	!=	左右のオペランドが異なる場合にtrueを返します。
小さい	<	左のオペランドが右のオペランドより小さい場合にtrueを返します。
小さいか等しい	<=	左のオペランドが右のオペランドより小さい、または等しい場合にtrueを返します。
大きい	>	左のオペランドが右のオペランドより大きい場合にtrueを返します。
大きいか等しい	>=	左のオペランドが右のオペランドより大きい、または等しい場合にtrueを返します。
かつ	&&	左右のオペランドが両方ともtrueの場合にtrueを返します。
または	\|\|	左右のオペランドのどちらか一方、または両方がtrueの場合にtrueを返します。
否定	!	オペランドがfalseの場合にtrueを返します。

サルモリ

ちなみに、これらの演算子は「if」文や「while」文など、様々なところで使うことができるんだよ！

例：比較演算子の利用

それでは実際のコードを見てみましょう。以下は比較演算子を使用した基本的なJavaのコード例です。

ここでは、変数aとbを比較し、等しいかどうかを検証しています。

ソースコード例

class Program {
    public static void main(String[] args) {
        int a = 5;
        int b = 5;
        if (a == b) {
            System.out.println("a and b are equal");
        } else {
            System.out.println("a and b are not equal");
        }
    }
}

class Program {

public static void main(String[] args) {

int a = 5;

int b = 5;

if (a == b) {

System.out.println("a and b are equal");

} else {

System.out.println("a and b are not equal");

}

 出力結果 a and b are equal

最後のまとめ

この記事を通じて、JavaとJavaScriptにおける基本的な条件分岐「if文」の使い方とその他の演算子について学んでいただきました。

コーディングの世界は広大で、日々新しい情報が更新されています。基本を固め、日々の学習を積み重ねることで、さまざまな課題に対しても柔軟に対応できるスキルを身につけていくことができるでしょう。

サルモリ

本当にコーディングは奥が深いよね！でも基本をしっかりと理解することで、その先の学びもスムーズになるんだ！

-JavaScript

JavaScript言語の本を書いています！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

: 【javascript】連想配列の問題６選問題を解いて、連想配列について理解しよう！

JavaScriptの連想配列の使い方の演習問題6問！！ JavaScriptの連想配列（オブジェクト）について理解を深めるための演習問題をご用意しました！実際にコードを書いて、動作を確認しながら学 ...

: 【JavaScript】ajaxを使用したjavascriptからphpに変数の受け渡し方法を徹底解説

はじめにこの記事では「JavaScriptからPHPへの変数受け渡し方法」に焦点を当て、Ajaxを用いた実践的な解説を行います。 Web開発では、フロントエンドとバックエンド間でデータをやり取りする ...

: 【Java、JavaScript】javaスクリプト java 違いについて徹底解説！！どちらを学ぶべきかなどについても解説します！

JavaとJavaScriptの根本的な違いについて「Java」と「JavaScript」。この2つのプログラミング言語は名前が似ているため、初学者の方々が混同しやすいことが一般的です。サルモリ ...

: 【java script】文字列を比較、長さの取得、改行の挿入方法

JavaScriptでの文字列操作：長さの取得と改行の挿入方法はじめに JavaScriptで文字列を扱う際、よく使う操作として文字列の「長さの取得」や「改行の挿入」があります。今回はこれらのテク ...

: 【JavaScript】sleepを徹底解説！スリープ処理を使いこなして徹底解説！

JavaScriptで実現するスリープ処理：初心者から上級者まで役立つ完全ガイド JavaScriptにおける「スリープ」処理は、特定の時間だけプログラムの実行を一時停止する方法です。この記事では、J ...

: 【JavaScript】javascript for抜ける方法　break文を使用して、抜ける方法とcontinue文使って特定のループをスキップする方法をマスターしよう！

JavaScriptでforループを抜ける方法 - 初心者でも理解できる10ステップガイドはじめに JavaScriptを使ってプログラミングをする際に、ループ処理は非常に重要な役割を果たします。特 ...

: 【JavaScript】javascriptで1秒待つ、1秒後に実行、1秒ごとに実行する方法を解説します。

JavaScriptで待機時間を操作する！1秒待つ、1秒後に実行、1秒ごとに実行の方法を完全解説はじめに JavaScriptはウェブページを動的に操作するためのプログラミング言語です。今回は、J ...

: 【Vue.js】JSONを読み込み、その内容を出力する方法

はじめに Vue.jsを使用すると、簡単にJSONデータの読み込みや出力ができます。この記事では、「Vue.jsでJSONをどのように読み込み、console.logで出力するのか」について、実際の ...

: 【JavaScript】JavaScriptのHTML操作の使い方を学ぼう！！　HTML要素の取得、追加、修正、削除、ループ処理による複数取得、イベントリスナーの追加方法を解説します！

JavaScriptでHTML要素を操作する JavaScriptを使用してHTMLの要素を取得、追加、修正、削除する方法について説明します。これらの技術は、ウェブページを動的に制御するために頻繁に ...

: 【JavaScript】制御構文if文、forループ、break,continueを徹底解説！

JavaScriptの制御構文について理解しよう！ JavaScriptには、プログラムの流れを制御するための構文がいくつかあります。これらは非常に重要な概念で、コードを書く上で欠かすことはできません ...

【Java、JavaScript】javaスクリプト java 違いについて徹底解説！！どちらを学ぶべきかなどについても解説します！

【Java】javaメソッド定義と呼び出し方法、ジェネリクス、再帰について徹底解説！！javaメソッドについてわかりやすく解説！

【JavaScript】if文について徹底解説！！if文とswitch文の使い方を学ぼう！！

【完全ガイド】Javaスクリプトのif文をマスターしよう！

はじめに

基本的なif文の構文

if文の実用例

複数の条件を持つif文

ネスティングしたif文

switch文

三項演算子

演算子の実例とその使い方

基本的な演算子

例：比較演算子の利用

最後のまとめ

Ads Blocker Detected!!!