【JavaScript入門】JavaScriptの条件分岐を学ぼう – if文 –

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、JavaScriptの条件分岐とif文について学びます。

JavaScriptだけでなくプログラミングにおいて、条件分岐は必ず使います。

本題に入る前に、条件分岐を理解するためにこちらを確認しておきましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「004 条件分岐」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

条件分岐ってなに

JavaScriptの条件式について学ぶ前に「条件分岐」について見ていきましょう。

プログラミングの世界で、「条件分岐」は必要不可欠です。

しかし、その「条件分岐」とは一体なんでしょうか。

一つずつ順番に見ていきましょう。

コンピュータに命令を送る

私たちは、プログラムを書いてコンピュータに命令を送ります。

その命令を受け取ったコンピュータは、それを解析して実行します。

例えば、次のコードはコンピュータに、「コンソールにおはようを出して」と命令しています。

console.log("おはよう")

条件をつけて命令をする

この「コンソールにおはようを出して」という命令に「条件」をつけたい場合があります。

例えば、「朝だったらコンソールにおはようを出して」と命令します。

この「朝だったら」が条件になります。

この条件を考慮すると、この命令は次の2つのケースが考えられます。

この 条件をつけて命令 することが　「条件分岐」と言います。

条件分岐は条件を満たすかどうかで処理を変える

「条件分岐」は、与えられた条件を満たすかどうかで処理を変えます。

この「条件」は、1つだけでなく複数の場合が考えられます。

次の例は、3つの条件を定義してそれを満たすかどうかで処理を変えます。

true（真)とfalse(偽)

条件分岐で 条件を満たした状態 を「true」と言います。

反対に 条件を満たさない状態 を「false」と言います。

そして、この「true」と「false」を「真偽値」と言います。

真偽値は次の条件式で使うので覚えておきましょう。

条件式ってなに

ここまで条件分岐について学びました。

この条件分岐をプログラムに書いてコンピュータに命令する必要があります。

この条件分岐の命令を「条件式」を使って行います。

JavaScriptの条件式は、「if文（イフ文）」を使います。

条件式の書き方

「if文」は次のフォーマットで書くことができます。

if (条件の式) {
  実行する処理をここに書く
}

「if」という宣言文をまず初めに定義します。

そのあとに、「(条件の式)」を書きます。

「{」は、ブロックの始まりと言います。「}」はブロックの終わりと言います。

そして、「{」「}」の間の処理が、条件が満たされたときに実行されます。

「条件が満たされたとき」というのは、真偽値の「true」を意味します。

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

次の例は、「time」という変数の値が「朝」だったらコンソールに「おはよう」を出力します。

const time = "朝"
if (time === "朝") {
  console.log("おはよう")
}

比較演算子

「time === “朝”」の「===」は一体何を意味しているのでしょうか。

これは、比較演算子 と言います。

比較演算子とは、二つの値を比較してそれが正しいなら「true」を返し、正しくないなら「false」を返す式になります。

「===」は、二つの値が等しいなら「true」を返して、等しくないなら「false」を返します。

例えば、次の式は「1」と「1」が等しいかを比較しています。

比較した結果として、「result」という変数に「true」が入ります。

const result = 1 === 1

console.log(result) // trueが出力される

これとは逆に「!==」というものがあります。

「!==」は、二つの値が等しくないなら「true」を返して、等しいないなら「false」を返します。

次の式は「1」と「1」が等しくないかを比較しています。

二つの値は等しいので、「result」という変数に「false」が入ります。

const result = 1 !== 1

console.log(result) // falseが出力される

比較演算子には他にも次のようなものがありますので覚えておきましょう。

条件式をまとめると

もう一度、先ほどの例を見てみましょう。

const time = "朝"

if (time === "朝") {
 console.log("おはよう")
}

これは、「time」という変数と 「朝」を比較しています。

「time」には、「朝」という値が入っているのでこの二つは等しいと言えます。

そして、「time === "朝"」という式は比較演算子を使用しているので、結果は「true」が返ってきますね。

「true」があるということは、if文は 条件を満たした と解釈して括弧の中の処理を実行します。

trueを直接書いたらどうなるの？

if文の条件の式に、直接「true」を書いたらどうなるんでしょうか。

if (true) {
 console.log("おはよう")
}

これも条件を満たしたとみなされて、処理が実行されます。

要するに、if文の条件の式に「true」という真偽値があれば処理が実行される ということです。

条件式を書いてみよう

では、実際に条件分岐を書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「if文を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// if文を書いてみよう

if (1 === 1) {
  console.log("正しいです！")
}

if (1 !== 2) {
  console.log("正しくありません！")
}

if ("太郎" === "太郎") {
  console.log("正しいです！")
}

if ("太郎" !== "次郎") {
  console.log("正しくありません！")
}

const number1 = 100
const number2 = 10
if (number1 > number2) {
  console.log("number1の方が大きいです！")
}

const name = "三郎"
if (name === "三郎") {
  console.log("三郎！")
}

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

ブロック

「{」は、ブロックの始まり、「}」はブロックの終わりと解説しました。

JavaScriptでは、この波括弧の中身の部分を「ブロック」と言います。

const time = "朝"

if (time === "朝") { // 始まり
  console.log("おはよう") // ブロック
} // 終わり

ブロックの終わりの後は、「ブロックの外」になります。

このブロック内の処理は、if文の条件式が満たされた場合のみ しか実行されません。

逆にいうと、ブロックの外はif文とは関係なく常に実行されます。

const time = "朝"
if (time === "朝") {
  console.log("おはよう") // ここは条件が満たされた時だけ実行される
}

// ここからはif文のブロックの外
console.log("こんにちは！") // ここは常に実行される。

インデント

ブロックを書く際に、インデントが下がっているのを気づいたかもしれません。

const time = "朝"

if (time === "朝") {
  console.log("おはよう") // インデントが下がっている
}

実はインデントを下げなくても、処理自体は実行されます。

const time = "朝"

if (time === "朝") {
console.log("おはよう")
}

しかし、インデントを下げないと可読性が落ちます。

なぜなら、どこからどこまでがブロックの中身なのか判断がつきづらいからです。

ですので、なるべくブロックの中はインデントを整えるようにしましょう。

ちなみに、「Visual Studio Code」では、「tab」キーを押すとインデントを下げることができます。

覚えておきましょう。

まとめ

本章では、JavaScriptの条件分岐とif文について学びました。

最後にもう一度、重要なことを確認しましょう。