もじゃもじゃラボ/JavaScriptでプログラミングの基本的概念を学ぼう！/制御文
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

制御文

CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
このチャプターの目次

制御文

プログラムの処理の流れを制御する命令文のことを制御文と言います。制御文は以下の3つの種類に分けることができます。
  • 順次
      • 上から順番に流れていく処理のこと。
  • 分岐
      • ある条件を満たした場合と満たさない場合で異なる処理をすること。
  • 繰り返し
      • 同じ処理を繰り返し実行すること。
これら3種類の制御文を組み合わせてプログラムを記述していきます。

分岐処理

  • if文
      • 「もし〇〇だったら××という処理をする」という命令文です。
  • switch文
      • 「いくつかの処理の中から1つを選んで実行する」命令文です。

if文

例えば、ログインの処理です。ユーザIDとパスワードが一致している場合はログインを許可し、一致していない場合はエラーメッセージを表示します。
elseの部分は、条件式を満たさなかった場合に実行したい処理を記述します。条件式を満たさなかった場合に特に実行する処理がなければ、省略することも可能です。
条件式は、trueまたはfalseの真偽値型の値を返します。条件式を満たす場合にはtrue、満たさない場合にはfalseとなります。比較演算子、論理演算子と組み合わせて記述します。
上記の条件式は、「変数aが0より大きい場合に処理を行う」if文です。
上記の条件式は、「変数aが0より大きくかつ10より小さい場合に処理を行う」if文です。

ローカル変数について

からまでの間をブロックまたはスコープと言います。処理のまとまりをで括ります。if文の場合、条件を満たした時に実行する処理は、ここから➡︎ここまで⬅︎だよ、ということを示しています。
このスコープ内で変数を宣言する場合には注意点があります。
  • 同じ名前の変数名を繰り返し宣言することはできません。
      • 上記は、の間で変数strを宣言しているプログラムです。strという変数を繰り返し宣言することはできません。
  • 宣言したスコープの中でのみ有効です。
      • if文のスコープの中で宣言した変数numは、if文の外では使用できません。
このとの間で宣言した変数を、ローカル変数と呼びます。

サンプルコード1

テスト結果をチェックするようなサンプルです。早速実装していきましょう！

サンプルコード2

英語のテストと数学のテスト結果をチェックするようなプログラムです。条件式には論理演算子を使って複数の条件を組み合わせています。合格の条件が少し厳しくなりました。また、条件を満たさない時にも処理を実行するようなサンプルとなっています。

else-if文

if文は「もし〇〇だったら××という処理をする」という意味でした。else ifは、〇〇じゃなかった場合の条件を増やすことができます。
if文のブロックとelseのブロックの間に書きます。このような、より多くの分岐を行う処理を多分岐処理と言います。

サンプルコード

こちらのサンプルでは、補欠合格の条件を追加しています。

switch文

switch文では、if文の多分岐処理と同じように値に応じて処理を分岐させることが可能です。
switchの後ろのの値が、caseのところのに一致する場合にはを、に一致する場合にはを実行します。句に制御が移り、その下の命令文が実行されます。いずれにも一致しなかった場合には、の下の命令文が実行されます。if文でいうところのと同じような役割になります。式には通常、変数が指定されることが多いです。
caseの値1、値2、またはdefaultの後の記号は、セミコロンではなくて、コロンになりますので注意してください。
を実行するとswitch文が終了します。
具体例です。
変数numの値が2の時、処理1が実行されます。numが5の時、処理2が実行されます。それ以外の場合は、処理3が実行されます。

サンプルコード

おみくじプログラムです。

繰り返し処理

  • while文
      • 条件式が満たされている間中、同じ処理を繰り返すという命令文です。繰り返す回数がはっきりしないような場合に使います。
  • for文
      • 〇〇から××まで処理を繰り返すというような命令文になります。範囲が特定されるような場合に使います。特定の範囲の間、処理を繰り返します。

while文

条件式が満たされると処理を実行し、実行後にもう一度条件式を判定し、満たされた場合には処理を実行するということを繰り返します。条件式を満たしている間中、ブロックの中の命令文が実行されます。
条件式はif文と同じように比較演算子や論理演算子を使います。
具体例です。
まず、変数iを宣言して0で初期化しています。条件式は、iが5より小さい間、iの値を画面に出力する、という命令文です。ブロックが終了する前にiの値をインクリメントしてやりましょう。iの値が0から4までの5回、処理を繰り返す、という意味になります。 iはインクリメントしてあげないと無限ループしてしまうので注意しましょう。

サンプルコード

このサンプルでは、ブラウザの組み込み型関数であるwindow.confirm()を使用しています。
「繰り返しますか？」というメッセージを表示します。プログラムには、「OK」ボタンを押すとtrueが返ります。「キャンセル」ボタンを押すとfalseが返ります。
その結果を条件式で評価される変数に代入しているので、「キャンセル」ボタンを押すまでメッセージの表示を繰り返すということになります。変数は10行目で宣言しています。while分の条件式に指定しています。初回はメッセージを表示したいので、初期値をtrueにしています。
「キャンセル」ボタンが押されて、繰り返し処理を終了すると、
「繰り返し処理を終了しました」というメッセージが画面に表示されます。
条件式は、変数loopの値がtrueと一致しているかを評価しているのと同じ意味になります。
わかりにくい時はこのような表記にしていただいても構いません。

do〜while文

while文の補足です。while文に似た繰り返しの命令文でdo〜while文があります。
先頭にというキーワードがあり、条件式とは文末に来ています。条件式を満たしている間は処理を繰り返すという点は変わりませんが、先頭に条件式がないため、初回のループでは条件式が評価されません。そのため、条件式の結果に関係なく初回は必ず実行されます。これがwhile文との違いです。
具体例です。
変数iの初期値を5に設定しました。最初のループでは条件式は関係ありませんので、3行目のが実行され、画面に5が出力されます。4行目でiがインクリメントされ6になります。5行目で条件式が評価され、満たさないのでdo〜while文が終了します。
このように、do〜while文は少なくとも初回は必ず実行されるため、画面にメッセージを表示する「繰り返しますか？」のサンプルは、while文ではなくdo〜while文で実装するのが適切かもしれませんね。

for文

for文は特定の範囲の間処理を繰り返すという命令文です。
for文の後ろの括弧()の中が「;」（セミコロン）で区切られ3つの部分に分かれています。
  • 初期化処理
      • 主に変数の初期化などを行います。for文の初回に一度だけ実行される処理になります。
  • 条件式
      • 繰り返しを行う条件を記述します。
  • 後処理
      • 繰り返しの処理が実行された後に実行させたい処理を記述します。
具体例です。
初期化処理では変数iに0を代入しています。条件式ではiが5より小さい間、後処理では変数iをインクリメントしています。これはiの値が0から4までの5回、処理を繰り返すことを意味します。
while文の具体例と同じ結果になります。
for文では、初期化処理と条件式、後処理を1行にまとめて書けるため、非常に簡潔に記述することができます。

サンプルコード