JavaScriptのif文を基本から詳しく解説！【アプリも作れます】

「プログラミングを学習したばかりでif文をしっかり学びたい」

「様々なif文の書き方を学びたい」

上記の方にオススメの記事です。

この記事ではJavaScriptのif文の基本から省略記法をしっかり学べます。

さらに簡単なアプリを作りながら学べるので、if文の知識が定着しやすいです。

読み終わると、if文の理解が深まり学習や業務・趣味に活かせるようになるでしょう。

【基本編】JavaScriptのif文の書き方3つ

if文は様々な書き方があり、どんな時にその書き方をするのか理解する必要があります。

まずは以下のif文の基本を抑えて、どのような時に利用できるのか理解しましょう。

if文の基本的な書き方

if文の基本的な書き方は以下です。

const a = 6;
const b = 5;

if(a > b) {
console.log('aはbより大きい');
}

 

1行目に書かれた条件式を満たしたときにカッコ内の処理が行われます。

逆に満たさない場合は処理がされずにif文の次に書かれたコードの処理に移ります。

elseを使った書き方

elseを使ったif文の書き方は以下です。

const a = 5;
const b = 6;

if(a > b) {
console.log('aはbより大きい');
} else {
console.log('aはbより小さい');
}

 

1行目に書かれた条件を満たしたときに直下のカッコ内の処理が行われ、満たさなかった場合はelseの直下に書かれたカッコ内の処理が行われます。

else ifを使った書き方

else ifを使ったif文の書き方は以下の通りです。

const a = 2;
const b = 2;

if(a > b) {
console.log('aはbより大きい');
} else if( a === b) {
console.log('aはbと等しい');
}

 

1行目に書かれた条件を満たした場合は直下にあるカッコ内の処理が行われます。

満たさない場合はelse ifの条件式を満たすかどうかを判断して、満たす場合は直下にあるカッコ内の処理が行われます。

どちらの条件式も満たさない場合は、処理が行われずに次のコードに移ります。

もし、以下のようにe​​lse文があればカッコ内の処理を行います。

const a = 2;
const b = 5;

if(a > b) {
console.log('aはbより大きい');
} else if( a === b) {
console.log('aはbと等しい');
} else {
console.log('aはbより小さい');
}

補足：if文を使うときの注意点

if文を使うときに注意して欲しい事は、実行順序です。

例えば、以下のコードを見てみましょう。

このコードで、太郎くんはどのグループに分けられるでしょうか。

//身長別のグループを作りたい

const taro = 172;

const A = 180;
const B = 160;
const C = 170;

if(taro >= A) {
console.log('太郎くんはAグループで、180cm以上です');
} else if(taro >= B) {
console.log('太郎くんはBグループで、160cm以上170cm未満です');
} else if(taro >= C){
console.log('太郎くんはCグループで、170cm以上180cm未満です');
}

 

おそらく、プログラミングを学んだばかりの方の中には引っかかる方がいるのではないでしょうか。

正解はBグループです。

なぜならif文は上から順番に処理が行われ、条件を満たしたものが見つかり処理された時点でif文を抜けるからです。

この場合は、2つ目の条件式taro >= Bを満たしたのでその直下に書かれたコードが処理されました。

では、これを回避するにはどうすれば良いのでしょうか。

以下の2つの方法があります。

まずは、条件式の順番を以下のように変更してみましょう。

if(taro >= A) {
console.log('太郎くんはAグループで、180cm以上です');
} else if(taro >= C) {
console.log('太郎くんはCグループで、170cm以上180cm未満です');
} else if(taro >= B){
console.log('太郎くんはBグループで、160cm以上170cm未満です');
}

 

比較する順番を変えただけで思い通りのグループ分けができました。

次に、条件式を工夫してみましょう。

if(taro >= A) {
console.log('太郎くんはAグループで、180cm以上です');
} else if(taro >= B && C >taro) {
console.log('太郎くんはBグループで、160cm以上170cm未満です');
} else if(taro >= C && A > taro){
console.log('太郎くんはCグループで、170cm以上180cm未満です');
}

 

この後解説しますが、&&は論理演算子ANDという意味です。

2つ以上の条件式を満たしたときに処理させたい場面でよく使います。

このようにすると、順序を変えなくても正常にグループ分けができます。

【応用編】JavaScriptのif文の書き方2つ

基本編だけでもアプリやサイトを作ることも可能ですが、すっきりした書き方にするとコードをチェックする時に修正しやすいです。

特に業務で利用する予定の方は、コードの可読性は生産性に直結するのでしっかり学習しましょう。

以下の2つは抑えてください。

論理演算子を使った書き方

if文を使ってると、2つ以上の条件式を使いたいときがあるのではないでしょうか。

ANDやORを使えば、それが可能です。

実際のコードを見てみましょう。

//ANDを使ったif文
const a = 21;

if(a % 3 === 0 && a % 7 === 0) {
console.log('aは3の倍数かつ7の倍数である');
}

//ORを使ったif文
const b = 45;

if(b % 2 === 0 || b % 3 === 0) {
console.log('bは2の倍数もしくは3の倍数のいずれかを満たす');
}

 

実際のコードではANDは「&&」、ORは「||」を使って表現します。

AND条件は2つの条件を満たしたときに処理が実行されますが、OR条件はどちらか1つの条件を満たせば処理が実行されます。

他にもif文は条件を満たさない場合に実行する書き方も可能です。

実際のコードを見てみましょう。

const a = 11;

if(a % 2 !== 0) {
console.log('aは2の倍数でない');
}

 

NOTを利用するときは「!」を使って表現します。

省略した書き方

コードを省略して書くと、可読性が上がるので実務では使われる場面が多いです。

しかし、何でも省略するというわけではなくかえって分かりづらくなることもあります。

職場のルールや他人が読むと分かりやすいかどうかを考えて使うようにしましょう。

実行したい処理が1つだけの場合は以下のように書けます。

const a = 2;

if(a > 1) console.log('aは1より大きい');

 

また、三項演算子を用いて書くこともできます。

const a = 12;

(a % 3 === 0) ? console.log('aは3の倍数である'):console.log('aは3の倍数でない');

このように書くと、すっきりしたコードになるのでとても読みやすくなりました。

ちなみにif文を用いると以下のように書き直せます。

if(a % 3 === 0) {
console.log('aは3の倍数である');
} else {
console.log('aは3の倍数でない');
}

【実践】JavaScriptのif文を使ってアプリを作ろう

ここまでif文についてしっかり学習できた方はアプリ制作を通して学ぶのが効率的です。

もちろん、本を読んで学習するのも良いでしょう。

しかし、理解するだけで満足しやすいので学んだ知識を実際に使うのが大切です。

アプリを作るために以下の段階を踏んで制作していきます。

制作するアプリの内容

今回制作するアプリは「おみくじアプリ」です。

来年の運勢を占うアプリで、4つの運勢のうちランダムで結果が表示されるようになっています。

ここからは実際にアプリを作っていきますが、同じでなくても構いませんので画像は各自で用意してください。

アプリに必要なファイルは以下のボタンからダウンロードできます。

サイトに表示する西暦を取得する

こちらの画面で表示されている西暦はHTMLに直書きしていません。

JavaScriptコードが実行されて、その結果が表示されています。

西暦を取得するために以下のように書いてください。

const $year = document.querySelectorAll('.year');

const year = new Date();

このコードは時間を取得するために必要なコードですので、忘れないようにしましょう。

次に以下のようにnextYearに西暦を代入してください。

const $year = document.querySelectorAll('.year');

const year = new Date();

const nextYear = year.getFullYear() + 1; //ここを追加

1を足していますが、これは来年の西暦の値にするためです。

次にnextyearの真下に以下のコードを書いてください。

const $year = document.querySelectorAll('.year');

const year = new Date();

const nextYear = year.getFullYear() + 1; 
for(let i = 0; i < $year.length; i++) { //ここから追加
$year[i].textContent = nextYear;
}

クラス名yearのdiv要素が2つあります。

その両方に西暦を表示させたいのでこのようにfor文を使いました。

西暦が表示されていた方は完了です。

運勢の基準を設定

今回のおみくじで設定する運勢と基準は以下の4つです。

取得した乱数によって運勢が決まる仕組みにしており、ここでは先に運勢を決める仕組みを作ります。

以下のようにコードを書きましょう。

const $year = document.queryselectorAll('.year');
const $result = document.getElementById('result'); //このコードを追加

divで定義したIDにresultがあるので、そこに運勢を表示するために$resultを定義しました。

次に、運勢を決める関数と基準をここで作成します。

//西暦に関するコードの後に書く

function fortuneDetermination() {
    const daikichi = 80;
    const chukichi = 40;
    const suekichi = 20;
}

 

ここからif文を使って運勢を決定します。

function fortuneDetermination(ranNum) {
    const daikichi = 80;
    const chukichi = 40;
    const suekichi = 20;

    if(ranNum >= daikichi) {
        $result.textContent = "大吉";
    } else if(ranNum >= chukichi && ranNum < daikichi) {
        $result.textContent = "中吉";
    } else if(ranNum >= suekichi && ranNum < chukichi) {
        $result.textContent = "末吉";
    } else {
        $result.textContent = "凶";
    }
}

 

ranNumは後で書くrandomGenerate関数で生成した乱数が代入される部分です。

ここで書いたif文の意味を解説します。

最初のranNum >= daikichiは生成された乱数がdaikichiの値以上を表す条件式です。

条件を満たしたとき、$reslutのテキストに大吉を代入するという処理が行われます。

次に、ranNum >= chukichi && ranNum < daikichiは生成された乱数がchukich以上かつdaikichi未満の条件式を表しています。

条件を満たすと、$resultのテキストに中吉を代入するという処理が行われます。

ここから先の文は、これまで解説したことが理解できていれば読めるでしょう。

乱数を生成

ここからは運勢を占うために必要な乱数の生成方法を解説します。

乱数を生成するコードは以下です。

//運勢の基準の後にこのコードを書く

function randomGenerate() {
    const ranMax = 100;
    let ranNum = Math.floor(Math.random() * ranMax + 1);
    fortuneDetermination(ranNum);
}

 

乱数を生成したらranNumに代入され、fortuneDetermination関数に入ります。

トリガーを実装

最後に、トリガーを実装します。

このままではアプリが動かないので、ボタンに機能を動かすよう命令しなければなりません。

ですので、ボタンに命令できるように以下のコードを$resultの下に書き足してください。

const $omikuji_btn = document.getElementById('omikujibtn'); 
const $omikuji_result = document.getElementById('omikujiresult');
const $close = document.getElementById('close');

 

次に、具体的な命令を実装する必要があります。

$omikuji_btn.addEventListener('click', () => {
    randomGenerate();
    $omikuji_result.classList.add('active');
});

$close.addEventListener('click', () => {
    $omikuji_result.classList.remove('active');
});

 

このコードはボタンをクリックしたときに処理されます。

例えば、1つ目の$omikuji_btnの方を見ていきましょう。

ボタンをクリックすると、randomGenerateの発動と$omikuji_resultのクラスに「active」が追加されます。

randomGenerateは乱数の生成で、$omikuji_resultは結果画面です。

コードを書くのはここまでなので、実際に動作するか確かめてみてください。

動かない場合は、コードが間違っていたり書き漏れがある可能性がありますので確認してみましょう。

完成したコードを貼っておきますので、動かない方は参考にしてください。

const $year = document.querySelectorAll('.year');
const $result = document.getElementById('result');
const $omikuji_btn = document.getElementById('omikujibtn');
const $omikuji_result = document.getElementById('omikujiresult');
const $close = document.getElementById('close');

const year = new Date();

const nextYear = year.getFullYear() + 1;
for(let i = 0; i < $year.length; i++) {
    $year[i].textContent = nextYear;
}

function fortuneDetermination(ranNum) {
    const daikichi = 80;
    const chukichi = 40;
    const suekichi = 20;

    if(ranNum >= daikichi) {
        $result.textContent = "大吉";
    } else if(ranNum >= chukichi && ranNum < daikichi) {
        $result.textContent = "中吉";
    } else if(ranNum >= suekichi && ranNum < chukichi) {
        $result.textContent = "末吉";
    } else {
        $result.textContent = "凶";
    }
}

function randomGenerate() {
    const ranMax = 100;
    let ranNum = Math.floor(Math.random() * ranMax + 1);
    fortuneDetermination(ranNum);
}

$omikuji_btn.addEventListener('click', () => {
    randomGenerate();
    $omikuji_result.classList.add('active');
});

$close.addEventListener('click', () => {
    $omikuji_result.classList.remove('active');
});

【まとめ】JavaScriptのif文を必ずマスターしよう

ここまでif文の基本の解説やその知識を使ったアプリの制作をしました。

おさらいとして解説してきたことをここにまとめます。

if文はJavaScriptの中でも基本に当たる部分なので、これから学習する方はしっかり使いこなせるようになりましょう。

逆にif文を使いこなせると、この記事で作ったような簡単なアプリを作れます。

このアプリのコードを見ずに作れるようになると、if文に対する理解は十分です。

何度もチャレンジして、if文を使いこなせるようにしてください。