blog

フロントエンド学習のためのJavaScript - フロー制御分岐

プログラムの実行中、さまざまなコードの実行順序は、プログラムの結果に直接影響します。多くの場合、コードの実行順序を制御することで、達成すべき機能を実現します。 フロー制御には、シーケンシャル構造、分岐...

Sep 10, 2020 · 5 min. read
シェア

フロー制御

プログラムの実行中、さまざまなコードの断片が実行される順序は、プログラムの結果に直接影響します。多くの場合、コードの実行順序を制御することで、達成すべき機能が実現されます。

理解するのは簡単です:プロセス制御は、コードをどのような順序で実行するかという構造に従って制御することです。

フロー制御には、シーケンシャルブランチループという3つの主な構造があり、これらはコードの実行順序を3つ表しています。

逐次フロー制御

シーケンシャル構造は、プログラムの中で最も単純で基本的なフロー制御で、特定の構文構造を持たず、プログラムはコードの順序に従って順番に実行します。

、分岐フロー制御if文

分岐の構造

コードを上から下に実行するプロセスでは、異なる条件に従って異なるパスコードが実行されるため、異なる結果が得られます。

JS言語には、 if文とswitch文の2種類の分岐文があります。

if

  • 構文の構造
// 条件が真ならコードを実行し、そうでなければ何もしない。
if (条件式){
 // 条件が真のときに実行されるコード文
}

ステートメントは振る舞いとして理解することができ、ループ文や分岐文は典型的なステートメントです。プログラムは多くのステートメントから構成されますが、通常は1つのステートメントに分割されます。

  • 実行の流れ
  • インターネットカフェのケース
// プロンプト入力ボックスがポップアップし、ユーザーが年齢を入力すると、プログラムはその値を受け取り、変数に保存する。
// if文を使って年齢を判定する。 年齢が18歳より大きければ、if括弧内の出力文を実行する。
var age = prompt('年齢を入力する:');
if (age >= 18) {
	 alert('インターネット・カフェへのアクセスを許可する');
}

if else

  • 構文の構造
// 条件が真ならifの中のコードを実行し、そうでなければelseの中のコードを実行する。
if (条件式){
 // [ ] 条件が真のときに実行されるコード
} else {
 // [ ] 実行されるコード
}
  • 実行の流れ
  • うるう年の判定
		//アルゴリズム:うるう年は、4で割り切れるが100で割り切れない場合、または400で割り切れる場合にうるう年となる。
 // プロンプト入力ボックスをポップアップさせ、ユーザーに年を入力させ、その値を変数に保存する。
 // 閏年かどうかの判定にはif文を使い、閏年であればif括弧内の出力文を実行し、そうでなければelse文内の出力文を実行する。
 //  && また|| この書き方では、除算の判定方法が余りを0とすることに注意すること
 var year = prompt('西暦を記入する:');
 if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
 alert('入力した年はうるう年である。');
 } else {
 alert('入力した年は平年である');
 }

if else if

  • 構文の構造
// 複数の条件をチェックするのに適している。
if (条件式1){
 ステートメント1;
} else if (条件式2){
 ステートメント2;
} else if (条件式3){
 ステートメント3;
 ....
} else {
 // 上記の条件のどれにも当てはまらない場合は、次のコードを実行する。
}
  • 実行の流れ
  • 達成度判定の例
		// 擬似コード:大きいものから小さいものへ判定する。
 // プロンプト入力ボックスをポップアップさせ、ユーザーに得点を入力させ、その値を変数に保存する。
 // 複数の分岐を持つif else if文を使い、別々の判定で異なる値を出力する。
 var score = prompt('スコアを入力する:');
 if (score >= 90) {
 alert(' ');
 } else if (score >= 80) {
 alert(' ');
 } else if (score >= 70) {
 alert(' ');
 } else if (score >= 60) {
 alert(' ');
 } else {
 alert(' ');
 }

3項式

三項式は簡単な条件選択もできます。 三項演算子を持つ式を三項式と呼びます。

  • 構文の構造
式1? 式2: 式3;
  • 実施のためのアイデア
    • 式1が真の場合は式2の値を、式1が偽の場合は式3の値を返します。
    • 簡単に言うと、if elseの略語のようなものです。
  • ゼロ補数の場合
 		// ユーザー入力 0~59の間の数
 // 数値が10未満の場合は、数値の前に0を加え、そうでない場合は何もしない。
 // この返り値を受け取るために変数を使用すると、出力は次のようになる。
 var time = prompt('0を入力する~ 59 の間の数');
 // 三項式 式 ? 式1:式2
 var result = time < 10 ? '0' + time : time; // 変数に戻り値を代入する
 alert(result);

、分岐フロー制御スイッチステートメント

構文の構造

switch文は、異なる条件に基づいて異なるコードを実行するために使用されるマルチブランチ文でもあります。switchは、特定の値を持つ変数に対して一連のオプションを設定したい場合に使用します。

switch( 式 ){ 
 case value1:
 // 式が値1に等しいときに実行されるコード
 break;
 case value2:
 // 式が値2に等しいときに実行するコード
 break;
 default:
 // 式がどの値とも等しくない場合に実行するコード
}
  • switch:スイッチ変換、case:小さな例オプション
  • キーワードswitchの後には、式または括弧内の(通常は変数)を続けることができます。
  • キーワード** case** の後に式またはオプションの値を続け、その後にコロンを続けます。
  • switch式の値は、構造体のcaseの値と比較されます。
  • 一致した場合、caseに関連するコード・ブロックが 実行され、ブレークに遭遇した時点で停止し、switch文コード全体の実行が終了します。
  • すべてのケースの値が式の値と一致しない場合、デフォルトのコードが実行されます。

注意: caseの中でステートメントを実行する際にbreakがない場合、実行はcaseの中の次のステートメントで続行されます。

判例

		// プロンプト入力ボックスがポップアップし、ユーザーが果物の名前を入力し、その値を取って変数に保存する。
 // この変数をswitch括弧内の式として使用する。
 // case 後者の値に対するいくつかの異なる果実の名前を書き、それがすべて等しい一致でなければならないので、引用符で囲まなければならないことに注意すること。
 // 異なる価格をポップアップ表示するだけだ。また、それぞれのcaseの後には、switch文を終了するためのbreakが続くことにも注意しよう。
 // デフォルトは、このような実がないように設定する。
 var fruit = prompt('クエリの実を入力する:');
 switch (fruit) {
 case ' ':
 alert('リンゴの値段は3.5/ ');
 break;
 case ' ':
 alert('ドリアンの値段は35円である。');
 break;
 default:
 alert('この果実がなければ');
 }

switch文とif else if文の違い

  1. 一般的に、この2つの文は互いに置き換えることができます。
  2. switch.....case文は通常、明確な値を比較するケースを扱いますが、if...else...文はより柔軟で、範囲判定によく使われます。
  3. switch文は条件判定を行い、そのままプログラムの条件文まで実行するので効率的です。if...else文にはいくつかの条件があり、何回判定を行う必要があります。
  4. 分岐が少ない場合は、switch文よりもif...else文の方が効率よく実行できます。
  5. 分岐が多いほど、switch文は効率的に実行され、構造化されます。
Read next

プロトカルバッファの簡単なガイド

以下の表から、一般的なシリアライゼーションプロトコル/フォーマットの違いを簡単に見ることができます。 ProtoBufには、インタフェース記述言語とそれに付随するコードジェネレータのセットが含まれています。 以下はProtobufの例で、どちらも後で詳しく説明します...

Sep 10, 2020 · 14 min read