HelloWorldを学習した後に、何を学ぶべきか迷っている方もいると思いますが、まずは基本的な制御構文を学習することをおすすめします。
制御構文とは、if文やfor文のことですが、プログラミングではどの言語においても、この2つの制御構文が超重要事項です。
この2つが存在しないと、プログラムとして成り立たないと言ってよいほどです。
そこで、本記事では、制御構文について簡単に解説し、JavaScriptにおける制御構文をまとめます。
書き方を忘れてしまった方の復習としても、お役に立てていただければと思います。
制御構文とは
プログラムは、基本的に上から下に向かって実行されていきます。
すべてのプログラムがそれだけで実現できれば問題ないのですが、条件によって処理を変えたい（分岐）、何度も処理をしたい（繰返し）というケースがあります。
分岐や繰返しなどにより、上から下に流れるプログラムの一部を飛ばして実行したり、下に行った後にもう一度上に戻って実行するような構文を制御構文と呼びます。
分岐と繰返しは、一般的によく使われる言語では、100%と言えるほど持っている機能です。
ですから、プログラミングを学び始めたら、真っ先に学習する内容の1つであると言えます。
JavaScriptの分岐
JavaScriptの分岐には、if文とswitch文があります。
if文
if文の基本的な構文は以下となります。
if ( 条件判定A ) {
条件Aが成立した場合の処理
} else if ( 条件判定B ) {
条件Bが成立した場合の処理
} else {
条件Aにも条件Bにも成立しない場合の処理
}
条件A→条件Bという順番で判定します。
条件Aにも条件Bにも当てはまる場合には、条件Aが成立した場合の処理が行われます。
その場合、条件Bの判定（else if文の実行）は行われません。
次に例文です。（変数aとbには数値が入っている前提です）
if ( a < b ) {
console.log("a より b の方が大きい");
} else if ( a > b ) {
console.log("b より a の方が大きい");
} else {
console.log("a と b は同一");
}
switch文
switch文は、if文をわかりやすい表現に変更する構文のようなものです。
基本的な構文は以下となります。
switch (式) {
case ラベルA:
式の評価結果がラベルAと一致する場合の処理
break;
case ラベルB:
式の評価結果がラベルBと一致する場合の処理
break;
default:
式の評価結果がラベルAともラベルBとも一致しない場合の処理
}
式には様々な書き方があるのですが、よく使われるのは、変数の値を評価する書き方です。
また、break は、そこに実行が到達したらswitch文を抜けることを意味します。
break がないと ラベルAの評価、ラベルBの評価、default をそれぞれ実行します。
あえてそのような処理をさせるテクニックもあるのですが、基本的には必ずbreakを入れると覚えておいたほうが良いです。
次に例文です。（変数aには文字列が入っている前提です）
switch (a) {
case "JavaScript":
console.log(a); // 標準出力に「JavaScript」と表示される
break;
case "Java":
console.log(a); // 標準出力に「Java」と表示される
break;
default:
console.log(a); // 標準出力に「JavaScript」「Java」でない変数aに入っている文字列が表示される
}
switch文は、if文を使っても同じことを実現できるので、まずif文を覚え、その後わかりやすいプログラムを書くテクニックの1つとしてswitch文を覚えると良いと思います。
JavaScriptの繰返し
JavaScriptの繰返しには、while文、do-while文、for文、for…in文、for…of文の5種類があります。
while文
while文は条件式の結果がtrueに評価されている間、while文の中の処理を繰返し実行します。
基本的な構文は以下のとおりです。
while (条件式) {
繰返し実行する処理
}
最初に条件式を評価するため、初期状態で条件式の結果がfalseとなる場合は、一度も繰返し処理が実行されません。
また、繰返し処理が最後まで到達すると、再度条件式を評価します。
条件式の結果がtrueの間、繰返し処理を実行するため、条件式がずっとtrueのまま無限ループとなってしまわないように注意が必要です。
次に例文です。
i = 0;
while (i < 10) {
console.log(i);
i++;
}
do-while文
while文は最初に条件式を評価するため、状況によっては1度も繰返し処理が実行されない場合がありますが、最低1回は繰返し処理を実行したい場合に用いるのがdo-while文です。
基本的な構文は以下のとおりです。
do {
繰返し実行する処理
} while (条件式);
この構文では条件式は繰返し処理が実行された最後に評価され、評価結果がtrueの場合は再度繰返し処理を実行し、falseの場合は繰返し処理を抜けます。
例文は以下のとおりです。
i = 0;
do {
console.log(i);
i++;
} while (i < 10);
for文
for文は初期化式、条件式、加算式を並べて書きます。
加算式を必ず書く必要があるので、無限ループになる可能性が低いこともあり、僕個人としてはwhile文よりもfor文を使う方をおすすめします。
基本的な構文は以下のとおりです。
for (初期化式; 条件式; 加算式) {
繰返し実行する処理
}
初期化式、条件式の評価、for文内の繰返し処理、加算式の順に処理が実行されていきます。
例文は以下のとおりです。
for (i = 0; i < 10; i++) {
console.log(i);
}
for…in文
for…in文は、オブジェクトのプロパティに対して、繰返し処理を行います。
基本的な構文は以下のとおりです。
for (プロパティ in オブジェクト) {
繰返し実行する処理
}
例文は以下のとおりです。
const obj = {
"a" : 1,
"b" : 2,
"c" : 3
};
for (value in obj) {
console.log(value); // 「a」、「b」、「c」が表示される
}
オブジェクトに配列を指定することも可能ですが、繰返し処理ではプロパティが取得され、配列の値は取得されません。
ですので、基本的には期待する結果とならないことが多いです。
配列の繰返しには、通常のfor文を使うか、配列自身が持つメソッド使うほうが良いです。
for…of文
for…of文は、Symbol.iteratorというメソッドを実装したオブジェクトのプロパティの値に対して、繰返し処理を行います。
配列やマップなどが該当します。
基本的な構文は以下のとおりです。
for (プロパティ of オブジェクト) {
繰返し実行する処理
}
例文は以下のとおりです。
const arr = [1, 2, 3];
for (value of arr) {
console.log(value); // 「1」、「2」、「3」が表示される
}
まずはif文とfor文を覚えよう
いくつかの分岐処理と繰返し処理を紹介しましたが、基本的にはif文、for文が使えれば、大抵の場合は問題ありません。
まずこの2つを覚えてもらえると良いと思います。
今回はJavaScriptの制御構文として分岐処理と繰返し処理をいくつか紹介しました。
お役に立てば幸いです。
参考文献
以下のサイトの情報を参考にさせていただきました。
- MDN web docs内の制御フローとエラー処理、ループと反復処理
- JavaScript Primer内の条件分岐、ループと反復処理
コメント