前書き

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

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

条件ステートメントはhttps://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#booleans [+ true +`または `+ false +]の結果の結果に基づいて特定のアクションを実行します。

表示される可能性のあるJavaScript条件ステートメントのいくつかの例を次に示します。

  • ユーザーの場所を確認し、国に基づいて正しい言語を表示します

  • 送信時にフォームを送信するか、不足している必須フィールドの横に警告を表示します

  • クリックイベントでドロップダウンを開くか、既に開いている場合はドロップダウンを閉じます

  • ユーザーが法定飲酒年齢を超えている場合は、アルコールの提供者のウェブサイトを表示します

  • ホテルの予約フォームを表示しますが、ホテルが予約されている場合は表示しません

条件付きステートメントは、コンピュータープログラムのロジック、意思決定、またはフロー制御の一部です。 条件文を「https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure[Choose Your Own Adventure]」の本またはフローチャートと比較できます。

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

Ifステートメント

条件ステートメントの最も基本的なものは、 `+ if `ステートメントです。 ` if `ステートメントは、ステートメントが真か偽かを評価し、ステートメントが ` 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 `ステートメントよりも ` if …​ else +`の方が一般的です。

Else ifステートメント

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

以下に、「+ if 」ステートメント、複数の「 else if 」ステートメント、および条件が「 true 」に評価されない場合の「 else +」ステートメントを含むコードブロックの基本例を示します。

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 +`ステートメントの場合、読みやすさのためにhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch [+ 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 +`よりも大きいかどうかをチェックします。

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

三項演算子

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

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

(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 not enter .. + `です。ステートメント。

結論

条件ステートメントは、プログラムの出力を決定するフロー制御を提供します。 それらはプログラミングの基本的な構成要素の1つであり、ほぼすべてのプログラミング言語で使用できます。

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