時には、条件に基づき異なるアクションを実行する必要があります。

そのための if 文と、簡単にするための “疑問符” 演算子 "?" と呼ばれる条件付き評価のための条件付き(3項)演算子があります。

“if” 文

“if” 文は与えられた条件を評価します。結果が true であればコードを実行します。

例:

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) alert( 'You are right!' );

上の例では、条件はシンプルな等価チェックです: year == 2015。より複雑にすることもできます。

実行する文が複数ある場合、コードブロックを波括弧で囲む必要があります。:

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

たとえ1つの文しかない場合でも if を使用するときは波括弧でコードブロックを囲むことを推奨します。これは可読性を向上させます。

Boolean 変換

if (…) 文は括弧の中の式を評価し、Boolean型に変換します。

チャプター 型変換 の変換ルールを思い出してみましょう:

  • 数値 0, 空文字 "", null, undefined そして NaNfalse になります。そのため、これらは “偽とみなされる” 値とよばれています。
  • 他の値は true になるため、“真とみなされる” 値と呼ばれます。

さて、下のコードですがこの条件は決して実行されません:

if (0) { // 0 は偽
  ...
}

…また、この条件は – 常に処理されます:

if (1) { // 1 は真
  ...
}

次のように事前評価されたBool値を if に通すこともできます:

let cond = (year == 2015); // == は true または false を評価する

if (cond) {
  ...
}

“else” 句

if 文は任意の “else” ブロックを持つ場合があります。それは条件が間違っている場合に実行されます。

例:

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // 2015 以外のケース
}

いくつかの条件: “else if”

いくつかの条件のパターンをテストしたい時があります。そのために else if 句があります。

例:

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

上のコードで、JavaScriptは最初に year < 2015 をチェックします。それが偽の場合、次の条件 year > 2015 に行きます。それでもない場合は、最後の alert を表示します。

複数の else if ブロックを持つことができます。最後の else は任意です。

3項演算子 ‘?’

条件に依存して変数へ代入を行う必要がある場合があります。

例:

let accessAllowed;
let age = prompt('How old are you?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

いわゆる、“3項” もしくは “疑問符” 演算子は、より短く簡単に行うことができます。

演算子は疑問符 "?" で表されます。公式な用語 “3項” は演算子は3つのオペランドを持つことを意味します。

構文は次の通りです:

let result = condition ? value1 : value2

condition は評価され、もしも真であれば、value1 が返却され、そうでなければ – value2 になります。

例:

let accessAllowed = (age > 18) ? true : false;

技術的には、age > 18 の周りの括弧を省くことができます。疑問符演算子は低い優先順位を持っているので、比較 > の後に実行されます。そのため同じように動作します:

// 比較演算子 "age > 18" が最初に実行されます
// (丸括弧で囲む必要はありません)
let accessAllowed = age > 18 ? true : false;

…しかし、括弧はコードの可読性をより良くします。そのため、括弧を使うことが推奨されます。

注意:

上の例では、比較自体が true/false を返すため、疑問符演算子を回避することが可能です。

// the same
let accessAllowed = age > 18;

複数の ‘?’

連続する疑問符 "?" 演算子は1つ以上の条件に依存した値を返すことができます。

例:

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

最初、それが何をしているのか掴むのが難しいかもしれません。しかしよく見るとそれがただの通常の一連のテストであることがわかります。

  1. 最初の疑問符は age < 3 かどうかチェックします。
  2. 真の場合 – 'Hi, baby!' を返します。そうでなければ – コロン ":" の後に行き、age < 18 をチェックします。
  3. それが真であれば – 'Hello!' を返します。そうでなければ – コロン ":" の後に行き、age < 100 をチェックします。
  4. それが真であれば – 'Greetings!' を返します。そうでなければ – コロン ":" の後に行き、What an unusual age を返します。

if..else を使った同じロジックです:

if (age < 3) {
  message = 'Hi, baby!';
} else if (a < 18) {
  message = 'Hello!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'What an unusual age!';
}

非伝統的な ‘?’ の使用

時々、疑問符 '?'if の置換として使われます:

let company = prompt('Which company created JavaScript?', '');

(company == 'Netscape') ?
   alert('Right!') : alert('Wrong.');

条件 company == 'Netscape' に応じて、"?" の後の1つ目もしくは2つ目の部分が実行されアラートが表示されます。

ここでは変数に結果を代入していません。このアイデアは条件に応じて異なるコードを実行させるものです。

このような方法で疑問符演算子を使うことは推奨されていません。

表記は if よりも短いように見え、一部のプログラマには魅力的です。しかしそれは読みにくいです。

比較として if を使った同じコードです:

let company = prompt('Which company created JavaScript?', '');

if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}

私たちの目はコードを縦に見ていきます。複数行にまたがる構造は、長い水平な命令セットよりも理解しやすいです。

疑問符 '?' の考え方は、条件によって別の値を返すことです。まさにそのために使ってください。 異なるコードの枝葉を実行するために if があります。

タスク

重要性: 5

alert は表示されるでしょうか?

if ("0") {
  alert( 'Hello' );
}

はい、表示されます。

空文字を除く文字列("0" は空ではありません)は論理コンテキストでは true になります。

実行して確認することができます:

if ("0") {
  alert( 'Hello' );
}
重要性: 2

if..else 構造を使って、次の内容を尋ねるコードを書いてください: ‘JavaScriptの “公式な” 名前は何ですか?’

もし、訪問者が “ECMAScript” と入力したら、 “Right!” を出力し、それ以外は – “Didn’t know? ECMAScript!” と出力します。

新しいウィンドウでデモ

<!DOCTYPE html>
<html>

<body>
  <script>
    'use strict';

    let value = prompt('What is the "official" name of JavaScript?', '');

    if (value == 'ECMAScript') {
      alert('Right!');
    } else {
      alert("You don't know? ECMAScript!");
    }
  </script>


</body>

</html>
重要性: 2

if..else を使って、prompt 経由で数値を取得し、alert で表示するコードを書いてください。:

  • 1, 値がゼロよりも大きい場合,
  • -1, ゼロよりも小さい場合
  • 0, ゼロと等しい場合

このタスクでは、入力は常に数値であると仮定します。

新しいウィンドウでデモ

let value = prompt('Type a number', 0);

if (value > 0) {
  alert( 1 );
} else if (value < 0) {
  alert( -1 );
} else {
  alert( 0 );
}
重要性: 3

prompt でログインを要求するコードを書いてください。

もし訪問者が "Admin" と入力したら、パスワードのための prompt を出します。もし入力が空行または Esc の場合 – “Canceled” と表示します。別の文字列の場合は – “I don’t know you” と表示します。

パスワードは次に沿ってチェックされます:

  • ”TheMaster" と等しい場合には “Welcome!” と表示します。
  • 別の文字列の場合 – “Wrong password” を表示します。
  • 空文字または入力がキャンセルされた場合には “Canceled.” と表示します。

図:

入れ子の if ブロックを使ってください。コードの全体的な読みやすさに気をつけてください。

デモを実行

let userName = prompt("Who's there?", '');

if (userName == 'Admin') {

  let pass = prompt('Password?', '');

  if (pass == 'TheMaster') {
    alert( 'Welcome!' );
  } else if (pass == null) {
    alert( 'Canceled.' );
  } else {
    alert( 'Wrong password' );
  }

} else if (userName == null) {
  alert( 'Canceled' );
} else {
  alert( "I don't know you" );
}

if ブロック内の縦のインデントに注意してください。技術的には必須ではありませんが、コードの可読性をより良くします。

重要性: 5

三項演算子 '?' を使って、この if を書き直してください。:

if (a + b < 4) {
  result = 'Below';
} else {
  result = 'Over';
}
result = (a + b < 4) ? 'Below' : 'Over';
重要性: 5

複数の三項演算子 '?' を使って if..else を書き直してください。

可読性のために、コードを複数行に分割することをオススメします。

let message;

if (login == 'Employee') {
  message = 'Hello';
} else if (login == 'Director') {
  message = 'Greetings';
} else if (login == '') {
  message = 'No login';
} else {
  message = '';
}
let message = (login == 'Employee') ? 'Hello' :
  (login == 'Director') ? 'Greetings' :
  (login == '') ? 'No login' :
  '';
チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。