前書き
プログラミングでは、ユーザーの入力やその他の要因に応じて、さまざまなコードブロックを実行したい場合が多くあります。
例として、各フィールドが適切に入力された場合にフォームを送信したい場合がありますが、一部の必須フィールドが欠落している場合はそのフォームが送信されないようにしたい場合があります。 このようなタスクを達成するために、すべてのプログラミング言語の不可欠な部分である*条件付きステートメント*があります。
条件ステートメントは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」キーワードの使用方法について学び、ステートメントのネストと三項演算子の使用について説明しました。