目次
プログラミングにおけるソースコードは基本的に上から下へと実行されますが、特定の条件下でのみ処理を行いたい場合や、同じ操作を繰り返す必要がある場合もあります。これを効果的に管理するためには、変数の状態をチェックし、適切に処理を制御する必要があります。この章では、JavaScriptにおける主要な制御構文に焦点を当てて解説します。
if文
概要:if文は特定の条件でのみ処理を実行したいときに使用されます。条件式の結果が「真」の場合、直後のステートメントが実行され、真偽値は「true」とみなされます。更に以下の表のように、「偽」と見なされる値以外は全て「真」となります。(ステートメントとは、プログラミング言語における基本的な構成要素の一つで、コンピュータへの命令を表す文です。)
| 真偽値の種類 | 値 |
|---|---|
| 真(true) | 以下(偽)以外のすべて値 |
| 偽(false) | false,0,-0,0n,””(空文字),null,undefined,NaN |
if文の基本的な書き方はifキーワードの後ろに「()(括弧)」を付け、()の中に条件式を記述します。
以下はif文の記述例と表示結果となります。
■記述例(JavaScript)
if (true) console.log("これは真です");
上記の例では、条件式が「真(true)」の場合、console.log()が実行され、「これは真です」と表示されます。ちなみに、上記の記述例は構文的に問題ないため処理が実行されますが、本来、if文は基本的に「変数」の真偽を判断するために使用するため、真偽を判定することが可能な内容が記述されます。
今回は、「true」という値を指定していますが、「true」=「真」となるため、結果は「真」として処理されます。仮に「false」を指定すると、真偽値の種類は「偽(false)」となるため、結果としては何も表示されません。
以下は、変数my_numberを使用した記述例と表示結果です。
■記述例(JavaScript)
let my_number = 3;
if (my_number) console.log(my_number + "は真です");
この例では、「true」の代わりに変数my_numberが条件式に指定されていますが、先程の例と同様で、条件式の中には値(変数)のみが指定されており、真偽を判断する為に何かと比較するような記述はありません。その為、条件式に指定されている値、今回の例では変数my_numberに代入されている3という数値で真偽が評価されます。
したがって、変数my_numberに代入されている値は、真偽値の種類では「偽(false)」の値に該当しない為、結果は「真」と評価されて「3は真です」と表示されます。
この例で紹介したように、条件式には変数を指定することもでき、よく使われる方法としては変数を別の値と比較して、条件に一致するか判定するために使用します。
以下は、変数my_numberの値が「3」と等しいかどうかを条件とした記述例と表示結果です。
■記述例(JavaScript)
let my_number = 3;
if (my_number == 3) console.log("3と等しいです");
上記例の「==」は両端のオペランドの値が一致しているかどうかを判定する「比較演算子」です。両端が一致している場合は「真」、一致していない場合は「偽」と評価されます。この場合、変数my_numberには「3」が格納されているため、両端のオペランドは一致し、条件式は「真」と評価されます。
比較演算子
概要:比較演算子とは、オペランド同士の値を比較し、真偽値を返す演算子です。JavaScriptで利用可能な比較演算子は、以下のようになります。
■比較演算子の種類
| 記号 | 種類 | 意味 |
|---|---|---|
| == | 一致 | 左右のオペランドが等しい場合 真(true) |
| != | 不一致 | 左右のオペランドが等しくない場合 真(true) |
| > | より大きい | 左のオペランドが右のオペランドよりも大きい場合 真(true) |
| >= | 以上 | 左のオペランドが右のオペランド以上の場合 真(true) |
| < | より小さい | 左のオペランドが右のオペランドより小さい場合 真(true) |
| <= | 以下 | 左のオペランドが右のオペランド以下の場合 真(true) |
| === | 厳密一致 | 左右のオペランドが等しく、かつデータの型も同じ場合 真(true) |
| !== | 厳密不一致 | 左右のオペランドが等しくない、またはデータの型が異なる場合 真(true) |
比較演算子は試験の出題の有無に限らず、プログラミングをする上で重要な内容となるため、必ず覚えるようにしましょう!
if-else文
if文では、条件式が「真」の場合、直後のステートメントが実行されるのに対し、elseキーワードを記述することで、条件式が「偽」だった場合のステートメントを実行することができます。
以下は、変数my_number に格納された値が条件式と一致しなかった場合の記述例と表示結果です。
■記述例(JavaScript)
let my_number = 4;
if(my_number == 3) console.log("3と等しいです");
else console.log("3と等しくありません");
上記例の条件式「my_number == 3」では、両端のオペランドが一致しないため「偽」と評価され、elseキーワードの直後のステートメントが実行されます。
もし、複数行のステートメントを実行したい場合は、条件式やキーワードの後ろにブロック「{}(中括弧)」を付け、その中にステートメントを記述します。ステートメントが一行のみの場合はブロックを記述することは必須ではありませんが、コードの書き方の統一や可読性の面から、ブロックを常用することが推奨されています。
以下は、if-else文を使って複数行のステートメントを実行する記述例と実行結果です。
■記述例(JavaScript)
let my_number = 4;
if (my_number == 3) {
console.log("3と等しいです");
console.log("真(true)と判定しました");
}
else {
console.log("3と等しくありません");
console.log("偽(false)と判定しました");
}
上記例の条件式「my_number == 3」は左右のオペランドが不一致のため、elseキーワードの後ろの2つのステートメントが実行され、「3と等しくありません」と「偽(false)と判定しました」が表示されます。
更にブロック内で制御文をネスト(入れ子)することで、より複雑な条件を設定することができます。
以下は、変数my_numberに格納された値を用いて、if-else文で数値を評価する記述例と表示結果です。
■記述例(JavaScript)
let my_number = 4;
if (my_number > 0) {
console.log(my_number + "は0より大きい数字です");
//ネストされたif文
if (my_number % 2 == 0) {
console.log(my_number + "は偶数です");
} else {
console.log(my_number + "は奇数です");
}
} else {
console.log(my_number + "は0以下の数字です");
}
上記例では、初めに条件式「my_number > 0」を評価します。変数my_numberは0より大きいため、この条件は真となり、if文直後のステートメントが実行されます。
次に、ブロック内の条件式「my_number % 2 == 0 」を評価し、この条件式では「my_number % 2」の計算が先に行われ、その結果が「==」で比較されます。詳しく説明すると、先ず変数my_numberに代入された値4を2で割った剰余が計算され、その値は「0」となります。
更に「==」で左右のオペランドを比較し、左右のオペランドは0であることから、条件が一致し、ネストしたifキーワードのステートメントが実行されます。
また、条件が複数ある場合には条件式と「論理演算子」を組み合わせて評価することもできます。
以下は、変数my_numberの値が「0より大きいかつ偶数」であるかを評価する記述例と表示結果です。
■記述例(JavaScript)
let my_number = 4;
if (my_number > 0 && my_number % 2 == 0) {
console.log(my_number + "は0より大きくかつ偶数です");
} else {
console.log(my_number + "は0以下または奇数です");
}
上記例の条件式「my_number > 0 && my_number % 2 == 0」の中に「&&」演算子が使用されています。「&&」演算子は、論理積(and条件)と呼ばれ、左右の条件式がどちらも真である場合にのみ、真と評価されます。変数my_numberは2つの条件を満たすため、ifキーワードの直後のステートメントが実行されます。
また、論理積とは別に論理和(or条件)と呼ばれるものもあり、こちらは条件式を「||」で繋ぎます。論理和は条件式のいずれかが真となる場合に真と評価します。
最後に、条件式の結果を反転したい場合は「!」演算子(論理否定)を使用します。
以下は、論理否定を使用した条件式の記述例と表示結果です。
■記述例(JavaScript)
let number = 3;
if (!(number == 4)) {
console.log("変数numberの値「" + number + "」は4ではありません");
} else {
console.log("変数numberの値「" + number + "」は3です");
}
「number == 4」の結果は偽ですが、条件式の行頭に指定されている論理否定演算子「!」は条件式を否定する意味になるため、結果は真となります。そのため、if文の後ろのステートメントが実行されます。
else if文
より多くの条件分岐を設定したい場合は「else if」文を使います。else if文の基本的な書き方はelse ifキーワードの後ろに「()(括弧)」を付け、()の中に条件式を記述します。またelse ifキーワードは条件を設定したい数だけ記述することができます。もし全ての条件式が偽だった場合、elseキーワードの直後のステートメントが実行されます。(elseキーワードは必要が無ければ記述しなくても構いません。)
以下は変数numberの値を「else if」文を使って判定する記述例と表示結果です。
■記述例(JavaScript)
let number = 2;
if (number == 1) {
console.log("変数numberの値は1です");
} else if (number == 2) {
console.log("変数numberの値は2です");
} else if (number == 3) {
console.log("変数numberの値は3です");
} else {
console.log("変数numberの値は1でも3でもありません");
}
上記例のifキーワードの条件式「number == 1」は偽のため、1つ目のelse ifキーワードの条件式「number == 2」を判定し、結果は真なのでステートメントが実行されます。
switch文
概要:switch文とは、プログラミングにおいて指定された値を評価し、その結果に応じて、分岐処理を行う制御構造です。この構文は複数の条件分岐をより簡潔で読みやすい形に整えることができるため、多くの条件分岐が必要な場合に使われることが一般的です。
if文と同様に、switch文はキーワードの後に「()(括弧)」を付け、ブロック内に条件分岐の処理を記述します。if文との主な違いとして、switch文には「case」節があり、条件式と比較する値を記述します。case節の後には「ラベル」を記述し、ラベルが比較対象の値と一致した場合、case節の後ろのステートメントが実行されます。各ブロック内の処理の終わりには「break」文を記述し、switch文から抜け出すために使用します。(もしbreak文の記述が無い場合は、その後の処理が続いてしまうため注意が必要です。)
もし一致するラベルがない場合、「default」節の後ろのステートメントが実行されます。default節は記述場所に特に決まりはありませんが、ブロック内の一番下に記述することが一般的です。

以下は、switch文を使って、変数langに格納された値とラベルが一致するか判定する記述例と表示結果です。
■記述例(JavaScript)
let lang="ja";
switch(lang) {
case "en"://変数langが"en"と一致する場合
console.log("言語を英語に設定します");
break;
case "ja"://変数langが"ja"と一致する場合
console.log("言語を日本語に設定します");
break;
default://それ以外の場合
console.log("設定可能な言語が見つかりませんでした");
}
上記では、switchキーワードの後ろの括弧内の値(変数langの値「ja」)とラベル「ja」が一致するため、break文によってswitch文から抜け出します。また、連続してcase節を使用することで、複数のラベルに対して同じステートメントを使用することができます。
以下は、case節を連続して使用したswitch文の記述例です。
■記述例(JavaScript)
let lang = "Japanese";
switch(lang) {
//変数langが"Japanese"もしくは"ja"と一致する場合
case "Japanese":
case "ja":
console.log("言語を日本語に設定します");
break;
default: //それ以外の場合
console.log("設定可能な言語が見つかりませんでした");
}条件分岐について、本試験では穴埋め問題か、実行文の出力結果が問われることになるかなと思います。制御構文のキーワードとその意味をしっかりと理解し、コードの読み書きが行えるようになるまで、知識を定着させましょう!
ループ
特定の条件下でタスクを繰り返し実行したい場合はループ処理を使用します。ループ処理にはいくつか種類がありますが、本章では「while」文と「for」文について詳しく説明を行います。
while文
概要:while文は、条件式が真と評価される間、指定されたステートメントを繰り返し実行するループ処理です。while文の形式はwhileキーワードの後ろに「()(括弧)」を付け、括弧内に条件式や値を記述し、その後ろにブロック「{}(中括弧)」を付け、ブロック内に実行文を記述します。

以下は変数numberに格納された値が3以下の場合、処理が繰り返し行われる記述例と表示結果です。
■記述例(JavaScript)
let number = 1;
// numberが3以下の場合にループを繰り返す
while (number <= 3) {
console.log(number);
number++;
}
console.log("ループ終了");
上記では、変数numberの値が1から始まり、3以下の間はブロック内のconsole.log()で変数numberの値が表示され、ブロックの最後で変数numberはインクリメントされます。変数numberの値が4になると条件式の結果は偽となり、ループは終了します。
ループ処理はプログラムにおいて非常に有用ですが、制御を適切に行わないとプログラムが同じ処理を繰り返し、終了できない状態(無限ループ)になることがあります。こうした状況を回避または制御するためには、「break」と 「continue」 という二つの重要な文が利用されます。
break文
概要:break文は、現在のループやswitch文から抜け出すために使用され、break文が実行された時点で、それ以降のループ処理を停止することができます。
continue文
概要:continue文は、現在のループ処理をスキップして次のループに進むために使用されます。以下は、while文のブロック内でbreak文とcontinue文を使用した記述例と表示結果です。
■記述例(JavaScript)
let number = 1;
while (true) {
if (number == 2) {
number++; // 変数numberの値をインクリメントする
continue; // 以降の処理をスキップして、次のループに進む
}
console.log(number); // 変数numberの値を表示する
if (number == 3) {
break; // 変数numberが3になったらループから抜け出す
}
number++; // 変数numberをインクリメントする
}
console.log("ループ終了");
上記では、while (true) を用いて無限ループを作成しています。この条件式は常に真と評価されるため、明示的にループから抜け出すステートメントを与えない限り、無限に処理を続けます。
変数numberは「1」から始まるので、最初のループでは全てのifキーワードの条件を満たさず「1」が表示され、処理が最後まで進むと変数numberはインクリメントされ、変数numberの値は「2」となり次のループへ進みます。
2回目のループ時では1つ目のif(number == 2)の条件は真と評価されるため、変数numberをインクリメントして値は「3」となり、continue文によって次のループに移ります。
3回目のループでは、console.log()で値が出力された後、2つ目のif (number == 3)が評価され、break文によりループから抜け出します。
for文
概要:for文は決められた回数だけループ処理を繰り返します。for文はキーワードの後に「()(括弧)」をつけ、括弧の中に「;(セミコロン)」で区切った 3 つの式(「初期化式」「条件式」「変化式」)を記述します。括弧の後ろにはブロック「{}(中括弧)」を付け、ブロック内に実行文を記述します。

初期化式
概要:ループ開始前に一度だけ実行され、一般的にループの条件に使う変数の初期化などに使用し、変数を定義することも可能です。
条件式
概要:ループを実行する際にこの条件式が評価され、真の場合はループ内の処理が実行されます。逆に偽になるとその時点でループを終了します。
変化式
概要:ループ内の処理が実行された後に、変化式が実行されます。通常はインクリメントかデクリメントを記述します。以下は、for文を使用したループ処理の記述例と表示結果です。
■記述例(JavaScript)
for (let number = 1; number <= 3; number++) {
console.log(number);
}
console.log("ループ終了");
上記では、初期化式で「let number = 1」が定義され、条件式「number <= 3」が真の間、ループ処理が繰り返されます。ループ処理中はブロック内のconsole.log()によって、変数numberの値が表示されます。
ブロック内の処理が最後まで実行すると、変化式によってnumberがインクリメントされ、処理が継続されます。numberが4になるまで加算されると、条件式が偽になるため、for文から抜け出し、ブロック外のステートメントが実行されます。
また、JavaScriptには配列のようなオブジェクトを処理することができる特殊なfor文があります。例えば、「for-of」文を使用すると、配列内の要素をひとつずつ取り出して、ループ処理を行うことができます。for-of文の形式は以下のように指定します。

この文では、オブジェクトの全要素に対して順にループ処理を実行し、実行する要素がなくなるとループが自動的に終了します。ループの反復では、実行されている現在の要素が「変数」に代入され、その変数をブロック内で使用することができます。
以下は、配列arrayの各要素をfor-of文を使用してひとつずつ取り出す記述例と表示結果です。
■記述例(JavaScript)
let array = [1, 4, 9, 16, 25];
for(let factor of array){
console.log(factor);
}
for-of文はオブジェクトの要素の数だけループするのに対し、for文やwhile文は条件式の結果によってループの回数が決まります。条件分岐と同じくループ処理についても、穴埋め問題などの出題方式が取られると思います。構文のキーワードとその役割を十分に把握して、ループ文の読み書きが行えるように繰り返し学習することをおススメします!
本章では、いくつかの条件分岐とループ処理について学習しました。これらの制御構文には、それぞれ少しずつ異なる性質があるため、注意して使用する必要があります。記述例を参考に、さまざまな制御構文を使いこなせるように積極的に学習を進めましょう!
それでは、今回はここまで〜。








