JavaScriptで条件文を書く方法

序章

プログラミングでは、ユーザー入力やその他の要因に応じて、さまざまなコードブロックを実行する必要がある場合が多くあります。

例として、各フィールドが適切に入力されている場合はフォームを送信したいが、いくつかの必須フィールドが欠落している場合はそのフォームが送信されないようにしたい場合があります。このようなタスクを実行するために、すべてのプログラミング言語の不可欠な部分である条件付きステートメントがあります。

条件文は、trueまたはfalseの結果に基づいて特定のアクションを実行します。

表示される可能性のあるJavaScript条件ステートメントの例は次のとおりです。

ユーザーの場所を確認し、国に基づいて正しい言語を表示します
送信時にフォームを送信するか、不足している必須フィールドの横に警告を表示します
クリックイベントでドロップダウンを開くか、すでに開いている場合はドロップダウンを閉じます
ユーザーが法定飲酒年齢を超えている場合は、アルコール供給業者のWebサイトを表示します
ホテルの予約フォームを表示しますが、ホテルが予約されている場合は表示しません

条件付きステートメントは、コンピュータープログラムのロジック、意思決定、またはフロー制御の一部です。条件文を「ChooseYourOwnAdventure」の本またはフローチャートと比較できます。

このチュートリアルでは、if、else、およびelse ifキーワードを含む条件ステートメントについて説明します。三項演算子についても説明します。

Ifステートメント

条件ステートメントの最も基本的なものは、ifステートメントです。 ifステートメントは、ステートメントがtrueかfalseかを評価し、ステートメントがtrueを返した場合にのみ実行されます。 falseの結果の場合、コードブロックは無視され、プログラムは次のセクションにスキップします。

ifステートメントは、ifキーワードで記述され、その後に括弧で囲まれた条件が続き、中括弧で囲まれたコードが実行されます。つまり、if () {}と書くことができます。

これは、基本的なifステートメントのより長い検討です。

if (condition) {
    // code that will execute if condition is true
}

ifステートメントの内容はインデントされており、実行するコードのブロックを含む中括弧は、関数ブロックのようにセミコロンで終了しません。

例として、ショッピングアプリを考えてみましょう。たとえば、このアプリの機能のために、アカウントに一定額の資金を入金したユーザーが、ストアからアイテムを購入したいとします。

shop.js

// Set balance and price of item
const balance = 500;
const jeans = 40;

// Check if there are enough funds to purchase item
if (jeans <= balance) {
  console.log("You have enough money to purchase the item!");
}

OutputYou have enough money to purchase the item!

アカウントの残高が500で、40のジーンズを購入したいと考えています。以下の演算子を使用して、ジーンズの価格が私たちの持っている資金の額以下であるかどうかを確認できます。 jeans <= balanceはtrueと評価されるため、条件が通過し、コードのブロックが実行されます。

新しい例では、利用可能な残高よりも高いコストの新しいショップアイテムを作成します。

shop.js

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
    console.log("You have enough money to purchase the item!");
}

phone <= balanceはfalseと評価されるため、この例には出力がありません。コードブロックは単に無視され、プログラムは次の行に進みます。

その他の声明

ifステートメントでは、ステートメントがtrueと評価された場合にのみコードを実行しますが、条件が失敗した場合に何か別のことが発生することがよくあります。

たとえば、フォームが正しく送信されなかった場合に、どのフィールドが正しく入力されたかをユーザーに通知するメッセージを表示したい場合があります。この場合、elseステートメントを使用します。これは、元の条件が成功しなかった場合に実行されるコードです。

elseステートメントは、ifステートメントの後に記述され、括弧内に条件はありません。基本的なif...elseステートメントの構文は次のとおりです。

if (condition) {
    // code that will execute if condition is true
} else {
    // code that will execute if condition is false
}

上記と同じ例を使用して、アカウントの資金が少なすぎる場合に表示するメッセージを追加できます。

shop.js

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
    console.log("You have enough money to purchase the item!");
} else {
    console.log("You do not have enough money in your account to purchase this item.");
}

OutputYou do not have enough money in your account to purchase this item.

if条件が成功しなかったため、コードはelseステートメントの内容に移ります。

これは、警告を表示したり、先に進むために実行するアクションをユーザーに知らせたりする場合に非常に役立ちます。通常、成功と失敗の両方でアクションが必要になるため、if...elseは単独のifステートメントよりも一般的です。

それ以外の場合のステートメント

ifおよびelseを使用すると、条件がtrueまたはfalseのどちらであるかに応じて、コードのブロックを実行できます。ただし、場合によっては、複数の可能な条件と出力があり、2つ以上のオプションが必要になることがあります。これを行う1つの方法は、else ifステートメントを使用することです。これにより、3つ以上の可能な結果を評価できます。

これは、ifステートメント、複数のelse ifステートメント、およびtrue。

if (condition a) {
    // code that will execute if condition a is true
} else if (condition b) {
    // code that will execute if condition b is true
} else if (condition c) {
    // code that will execute if condition c is true
} else {
    // code that will execute if all above conditions are false
}

JavaScriptはすべてのステートメントを順番に実行しようとしますが、いずれも成功しない場合は、デフォルトでelseブロックになります。

else ifステートメントは必要な数だけ持つことができます。多くのelse ifステートメントの場合、読みやすさのためにswitchステートメントが優先される場合があります。

複数のelse ifステートメントの例として、100点満点のスコアに基づいて文字の成績を出力する採点アプリを作成できます。

このアプリの要件は次のとおりです。

90以上のグレードはAです
80から89のグレードはBです
70から79のグレードはCです
60から69のグレードはDです
59以下のグレードはFです

以下では、if、else、およびelse ifステートメントの単純なセットを作成し、特定のグレードに対してテストします。

grades.js

// Set the current grade of the student
let grade = 87;

// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
  console.log("A");
} else if (grade >= 80) {
  console.log("B");
} else if (grade >= 70) {
  console.log("C");
} else if (grade >= 60) {
  console.log("D");
} else {
  console.log("F");
}

OutputB

この例では、最初に90以上の最高スコアをチェックします。その後、else ifステートメントは、デフォルトのelseに達するまで、80、70、および60より大きいかどうかをチェックします。不合格のグレード。

gradeの87の値は、技術的にはC、D、Fにも当てはまりますが、ステートメントは最初の値で停止します。それは成功です。したがって、最初の一致であるBの出力が得られます。

三項演算子

三項演算子は、条件演算子とも呼ばれ、if...elseステートメントの省略形として使用されます。

三項演算子は、以下に示すように、疑問符（?）の後にコロン（:）が続く構文で記述されます。

(condition) ? expression on true : expression on false

上記のステートメントでは、条件が最初に書き込まれ、次に?が書き込まれます。最初の式はtrueで実行され、2番目の式はfalseで実行されます。 if...elseステートメントと非常によく似ていますが、構文がよりコンパクトになっています。

この例では、ユーザーが21以上かどうかをチェックするプログラムを作成します。そうである場合は、"You may enter"がコンソールに出力されます。そうでない場合は、"You may not enter."がコンソールに出力されます。

age.js

// Set age of user
let age = 20;

// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";

// Print output
oldEnough;

Output'You may not enter.'

ユーザーのageが21未満であったため、失敗メッセージがコンソールに出力されました。これに相当するif...elseは、ifステートメントの"You may enter."、およびelseステートメントの"You may not enter."になります。

結論

条件付きステートメントは、プログラムの出力を決定するためのフロー制御を提供します。これらはプログラミングの基本的な構成要素の1つであり、事実上すべてのプログラミング言語で見つけることができます。

この記事では、if、else、およびelse ifキーワードの使用方法について学習し、ステートメントのネストと3項演算子の使用について説明しました。