開発者ドキュメント

JavaScriptで条件文を書く方法

getdocs

序章

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

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

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

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

条件付きステートメントは、コンピュータープログラムのロジック、意思決定、またはフロー制御の一部です。 条件文を「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 ステートメントはインデントされ、実行するコードのブロックを含む中括弧は、関数ブロックのようにセミコロンで終了しません。

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

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!");
}

Output
You 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 ステートメント。元の条件が成功しなかった場合に実行されるコードです。

The 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.");
}

Output
You 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点満点のスコアに基づいて文字の成績を出力する評価アプリを作成できます。

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

以下に、簡単なセットを作成します 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");
}

Output
B

この例では、最初に最高スコアをチェックします。これは、以上になります。 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." コンソールに。

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、失敗メッセージがコンソールに出力されました。 The if...else これに相当するのは "You may enter." の中に if ステートメント、および "You may not enter." の中に else 声明。

結論

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

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

モバイルバージョンを終了