path: root/files/ja/web/javascript/reference/statements/if...else/index.html

---
title: if...else
slug: Web/JavaScript/Reference/Statements/if...else
tags:
  - JavaScript
  - Language feature
  - Reference
  - Statement
  - else
  - if
  - 文
  - 言語機能
translation_of: Web/JavaScript/Reference/Statements/if...else
---
<div>{{jsSidebar("Statements")}}</div>

<p><span class="seoSummary"><strong><code>if</code> 文</strong>は、指定された条件が {{Glossary("truthy")}} ならば文を実行します。条件が {{Glossary("falsy")}} なら、もう一方の文を実行することができます。</span></p>

<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox">if (<var>condition</var>)
   <var>statement1</var>
[else
   <var>statement2</var>]
</pre>

<dl>
 <dt><code><var>condition</var></code></dt>
 <dd>{{Glossary("truthy")}} または {{Glossary("falsy")}} と認識される<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">式</a>です。</dd>
</dl>

<dl>
 <dt><code><var>statement1</var></code></dt>
 <dd><var>condition</var> が {{Glossary("truthy")}} なら実行される文です。さらにネストされた <code>if</code> 文を含む、どんな文であってもかまいません。複数の文を実行するためには、それらの文をグループ化するために<a href="/ja/docs/Web/JavaScript/Reference/Statements/block">ブロック</a>文 (<code>{ ... }</code>) を使ってください。実行する文がない場合は、<a href="/ja/docs/Web/JavaScript/Reference/Statements/Empty">空文</a> を使用してください。</dd>
 <dt><code><var>statement2</var></code></dt>
 <dd><code><var>condition</var></code> が {{Glossary("falsy")}} で、かつ <code>else</code> 節が存在するなら実行される文です。ブロック文およびさらにネストされた <code>if</code> 文を含む、どんな文であってもかまいません。</dd>
</dl>

<h2 id="Description" name="Description">解説</h2>

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

<pre class="brush: js">if (<var>condition1</var>)
  <var>statement1</var>
else if (<var>condition2</var>)
  <var>statement2</var>
else if (<var>condition3</var>)
  <var>statement3</var>
...
else
  <var>statementN</var>
</pre>

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

<pre class="brush: js">if (<var>condition1</var>)
  <var>statement1</var>
else
  if (<var>condition2</var>)
    <var>statement2</var>
  else
    if (<var>condition3</var>)
...
</pre>

<p>節の中で複数の文を実行するためには、それらの文をグループ化するためにブロック文 (<code>{ ... }</code>) を使ってください。一般的に、ブロック文を常に使うのはよい習慣です。ネストされた <code>if</code> 文が絡むコードにおいて特にそうです:</p>

<pre class="brush: js">if (<var>condition</var>) {
  <var>statements1</var>
} else {
  <var>statements2</var>
}
</pre>

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

<pre class="brush: js">var b = new Boolean(false);
if (b) // この条件式は truthy です
</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Using_if...else" name="Using_if...else">if...else の使用</h3>

<pre class="brush: js">if (cipher_char === from_char) {
  result = result + to_char;
  x++;
} else {
  result = result + clear_char;
}
</pre>

<h3 id="Using_else_if" name="Using_else_if">else if の使用</h3>

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

<pre class="brush: js">if (x &gt; 50) {
  /* 何かを行う */
} else if (x &gt; 5) {
  /* 何かを行う */
} else {
  /* 何かを行う */
}</pre>

<h3 id="Assignment_within_the_conditional_expression" name="Assignment_within_the_conditional_expression">条件式の中での代入</h3>

<p>代入はコードを眺めたときに等式と混同される可能性があるので、条件式の中で単純な代入を使わないほうが望ましいです。たとえば、次のコードを使わないでください。</p>

<pre class="brush: js example-bad">if (x = y) {
  /* 何かを行う */
}
</pre>

<p>もし条件式の中で代入を使う必要があるのなら、次の例のように、代入の周りに追加の括弧を書くのが一般的な習慣です。</p>

<pre class="brush: js example-good">if ((x = y)) {
  /* 何かを行う */
}
</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("javascript.statements.if_else")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{jsxref("Statements/block", "block")}}</li>
 <li>{{jsxref("Statements/switch", "switch")}}</li>
 <li><a href="/ja/docs/JavaScript/Reference/Operators/Conditional_Operator">条件演算子</a></li>
</ul>