← 返回首页
if...else - JavaScript | MDN

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

if...else

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

if...else 文は、指定された条件が真値ならば文を実行します。条件が偽値なら、オプションの else 節にあるもう一方の文を実行します。

目次

試してみましょう

function testNum(a) { let result; if (a > 0) { result = "正の数"; } else { result = "正の数ではない"; } return result; } console.log(testNum(-5)); // 予想される結果: "正の数ではない"

構文

js
if (condition) statement1 // else 節付き if (condition) statement1 else statement2
condition

真値または偽値と認識される式です。

statement1

condition真値の場合に実行される文です。さらにネストされた if 文を含む、どんな文であってもかまいません。複数の文を実行するためには、それらの文をグループ化するためにブロック文 ({ /* ... */ }) を使用してください。実行する文がない場合は、空文を使用してください。

statement2

condition が偽値で、かつ else 節が存在するなら実行される文です。ブロック文およびさらにネストされた if 文を含む、どんな文であってもかまいません。

解説

複数の if...else 文をネストすることで、 else if 節を作成することができます。 JavaScript では(1 単語の)elseif キーワードがありませんので注意してください。

js
if (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 // … else statementN

これがどのように動作するか理解するために、ネストが適切にインデントされていたらどのように見えるかを示します。

js
if (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 // …

節の中で複数の文を実行するためには、それらの文をグループ化するためにブロック文 ({ ... }) を使ってください。

js
if (condition) { statements1 } else { statements2 }

ブロックを使用しないと、特にコードが手作業で整形されている場合、混乱した動作になることがあります。

js
function checkValue(a, b) { if (a === 1) if (b === 2) console.log("a is 1 and b is 2"); else console.log("a is not 1"); }

このコードは何の問題もないように見えますが、checkValue(1, 3) を実行すると "a is not 1" というログを出力します。これは、dangling else の場合、else 節は最も近い if 節に接続されるからです。したがって、上記のコードを適切なインデントで記述すると、次のようになります。

js
function checkValue(a, b) { if (a === 1) if (b === 2) console.log("a is 1 and b is 2"); else console.log("a is not 1"); }

一般的な良い実践としては、常にブロック文を使用し、特に入れ子の if 文を含むコードでは、ブロック文を使用することをお勧めします。

js
function checkValue(a, b) { if (a === 1) { if (b === 2) { console.log("a is 1 and b is 2"); } } else { console.log("a is not 1"); } }

プリミティブの論理値である true および false を Boolean オブジェクトの真性や偽性と混同しないでください。 false, undefined, null, 0, -0, NaN, 空文字列 ("") のいずれでもない値、および任意のオブジェクトは(false の値を持つ Boolean オブジェクトを含め)、条件として使用されたときに真値と解釈されます。例えば以下のような場合です。

js
const b = new Boolean(false); if (b) { console.log("b is truthy"); // "b is truthy" }

if...else の使用

js
if (cipherChar === fromChar) { result += toChar; x++; } else { result += clearChar; }

else if の使用

JavaScript に elseif 構文はありませんので注意してください。 else と if の間に空白を置いて記述してください。

js
if (x > 50) { /* 何かを行う */ } else if (x > 5) { /* 何かを行う */ } else { /* 何かを行う */ }

条件式の中での代入

if...else の条件式として x = y のような代入式を持たせることは、ほぼ絶対に避けるべきです。

js
if ((x = y)) { // … }

while ループとは異なり、条件は 1 回だけしか評価されないので、代入は 1 回しか行われません。上記のコードは次のものと等価です。

js
x = y; if (x) { // … }

これははるかに明確です。しかし、稀にそのようなことをしたくなった場合、while のドキュメントの代入を条件として使用の節に、推奨事項が書かれています。

仕様書

仕様書
ECMAScript® 2027 Language Specification
# sec-if-statement

ブラウザーの互換性

ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。

関連情報