条件分岐: if, '?'

時として、異なる条件に基づいて異なるアクションを実行する必要がある場合があります。

それを実現するために、if文と条件演算子?(「疑問符」演算子とも呼ばれます) を使用できます。

“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文を使用するたびに、コードブロックを中括弧{}で囲むことをお勧めします。そうすることで可読性が向上します。

ブール型への変換

if (…)文は、括弧内の式を評価し、結果をブール値に変換します。

章型変換の変換ルールを思い出してみましょう

• 数値0、空の文字列""、null、undefined、およびNaNはすべてfalseになります。そのため、これらは「falsy」な値と呼ばれます。
• 他の値はtrueになるため、「truthy」と呼ばれます。

そのため、この条件下のコードは決して実行されません

if (0) { // 0 is falsy
  ...
}

...そして、この条件の中では常に実行されます

if (1) { // 1 is truthy
  ...
}

このように、事前に評価されたブール値をifに渡すこともできます

let cond = (year == 2015); // equality evaluates to true or false

if (cond) {
  ...
}

“else”節

if文は、オプションのelseブロックを含む場合があります。これは条件がfalsyの場合に実行されます。

例えば

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

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // any value except 2015
}

複数の条件: “else if”

時々、条件の複数のバリアントをテストしたい場合があります。else if節を使用すると、それが可能になります。

例えば

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

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

上記のコードでは、JavaScriptは最初にyear < 2015をチェックします。それがfalsyの場合、次の条件year > 2015に進みます。それもfalsyの場合、最後のalertが表示されます。

else ifブロックはさらに増やすことができます。最後のelseはオプションです。

条件演算子 ‘?’

時々、条件によって変数を割り当てる必要があります。

たとえば

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

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

alert(accessAllowed);

いわゆる「条件」または「疑問符」演算子を使用すると、より短く簡単にそれを行うことができます。

この演算子は、疑問符 ? で表されます。演算子が 3 つのオペランドを持つため、「三項演算子」と呼ばれることもあります。実際、これは JavaScript で唯一そのような数のオペランドを持つ演算子です。

構文は次のとおりです

let result = condition ? value1 : value2;

condition が評価されます。truthy の場合は value1 が返され、それ以外の場合は value2 が返されます。

例えば

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

技術的には、age > 18 の周りの括弧を省略できます。疑問符演算子の優先順位は低いため、比較演算子 > の後に実行されます。

この例では、前の例と同じことを行います

// the comparison operator "age > 18" executes first anyway
// (no need to wrap it into parentheses)
let accessAllowed = age > 18 ? true : false;

ただし、括弧を使用するとコードがより読みやすくなるため、使用することをお勧めします。

// the same
let accessAllowed = age > 18;

複数の ‘?’

疑問符演算子?のシーケンスは、複数の条件に依存する値を返すことができます。

たとえば

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. trueの場合、'Hi, baby!'を返します。それ以外の場合、コロン “:” の後の式に進み、age < 18をチェックします。
3. それがtrueの場合、'Hello!'を返します。それ以外の場合、次のコロン “:” の後の式に進み、age < 100をチェックします。
4. それがtrueの場合、'Greetings!'を返します。それ以外の場合、最後のコロン “:” の後の式に進み、'What an unusual age!'を返します。

これがif..elseを使用したときの見た目です

if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 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'に応じて、?の後の最初の式または2番目の式のいずれかが実行され、アラートが表示されます。

ここでは、結果を変数に割り当てません。代わりに、条件に応じて異なるコードを実行します。

このように疑問符演算子を使用することは推奨されません。

この記法は、一部のプログラマにとって魅力的な、同等のif文よりも短いです。ただし、可読性が低くなります。

比較のためにifを使用した同じコードを次に示します

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

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

私たちの目はコードを垂直方向にスキャンします。複数行にわたるコードブロックは、長い水平方向の命令セットよりも理解しやすいです。

疑問符演算子?の目的は、条件に応じて一方の値または他方の値を返すことです。それを正確にそのために使用してください。異なるコードブランチを実行する必要がある場合は、ifを使用してください。