JavaScriptで条件文を書く方法
序章
プログラミングでは、ユーザー入力やその他の要因に応じて、さまざまなコードブロックを実行する必要がある場合が多くあります。
例として、各フィールドが適切に入力されている場合はフォームを送信したいが、いくつかの必須フィールドが欠落している場合はそのフォームが送信されないようにしたい場合があります。 このようなタスクを実行するために、すべてのプログラミング言語の不可欠な部分である条件付きステートメントがあります。
条件文は、trueまたはfalseの結果に基づいて特定のアクションを実行します。
表示される可能性のあるJavaScript条件ステートメントの例は次のとおりです。
- ユーザーの場所を確認し、国に基づいて正しい言語を表示します
- 送信時にフォームを送信するか、不足している必須フィールドの横に警告を表示します
- クリックイベントでドロップダウンを開くか、すでに開いている場合はドロップダウンを閉じます
- ユーザーが法定飲酒年齢を超えている場合は、アルコール供給業者のWebサイトを表示します
- ホテルの予約フォームを表示しますが、ホテルが予約されている場合は表示しません
条件付きステートメントは、コンピュータープログラムのロジック、意思決定、またはフロー制御の一部です。 条件文を「ChooseYourOwnAdventure」の本またはフローチャートと比較できます。
このチュートリアルでは、以下を含む条件文について説明します。 if
, else
、 と else if
キーワード。 三項演算子についても説明します。
Ifステートメント
条件文の最も基本的なものは if
声明。 アン if
ステートメントは、ステートメントが真であるか偽であるかを評価し、ステートメントが返される場合にのみ実行されます true
. コードブロックは、 false
結果が得られ、プログラムは次のセクションにスキップします。
アン if
ステートメントはで書かれています if
キーワードの後に括弧で囲まれた条件が続き、中括弧の間にコードが実行されます。 要するに、それは次のように書くことができます if () {}
.
これが基本のより長い検討です if
声明。
if (condition) {
// code that will execute if condition is true
}
の内容 if
ステートメントはインデントされ、実行するコードのブロックを含む中括弧は、関数ブロックのようにセミコロンで終了しません。
例として、ショッピングアプリを考えてみましょう。 たとえば、このアプリの機能のために、アカウントに一定額の資金を入金したユーザーが、ストアからアイテムを購入したいとします。
// 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
、条件が通過し、コードのブロックが実行されます。
新しい例では、利用可能な残高よりも高いコストの新しいショップアイテムを作成します。
// 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
ステートメント。元の条件が成功しなかった場合に実行されるコードです。
The else
ステートメントは後に書かれます if
ステートメントであり、括弧内に条件はありません。 これが基本的な構文です if...else
声明。
if (condition) {
// code that will execute if condition is true
} else {
// code that will execute if condition is false
}
上記と同じ例を使用して、アカウントの資金が少なすぎる場合に表示するメッセージを追加できます。
// 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
ステートメント。2つ以上の可能な結果を評価できます。
これは、を含むコードのブロックの基本的な例です。 if
ステートメント、複数 else if
ステートメント、および else
評価された条件のいずれもがない場合のステートメント 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
ステートメント、および特定のグレードに対してそれらをテストします。
// 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
ステートメントはより大きいかどうかをチェックします 80
, 70
、 と 60
デフォルトに達するまで else
不合格の成績。
私たちの 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."
コンソールに。
// 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
、失敗メッセージがコンソールに出力されました。 The if...else
これに相当するのは "You may enter."
の中に if
ステートメント、および "You may not enter."
の中に else
声明。
結論
条件付きステートメントは、プログラムの出力を決定するためのフロー制御を提供します。 これらはプログラミングの基本的な構成要素の1つであり、事実上すべてのプログラミング言語で見つけることができます。
この記事では、の使用方法について学びました if
, else
、 と else if
キーワード、ステートメントのネスト、および三項演算子の使用について説明しました。