こちらの続きです

さて、今回は制御構文について学んでいきたいと思います。

制御構文

制御構文とは

いよいよ、「chatGPTと学ぶJavaScript　第1週」最後の項目は「制御構文」です。
まずはchatGPT先生に聞いてみますね。

JavaScriptにおける制御構文について詳しく説明してください

chatGPTの答え
JavaScriptにおける制御構文は、プログラムの流れを制御するために使用されます。
以下に代表的な制御構文を説明します。

条件分岐文
条件分岐文は、ある条件が成立した場合に、特定の処理を実行するために使用されます。
以下に代表的な条件分岐文を示します。

if文
if文は、指定された条件がtrueの場合に、特定の処理を実行するために使用されます。

JavaScript

if(条件式){
    // 条件がtrueの場合に実行される処理
}

if-else文
if-else文は、指定された条件がtrueの場合には特定の処理を実行し、falseの場合は別の処理を実行するために使用されます。

JavaScript

if(条件式){
    // 条件がtrueの場合に実行される処理
} else {
    // 条件がfalseの場合に実行される処理
}

else-if文
else-if文は、指定された条件がtrueの場合には特定の処理を実行し、falseの場合は別の条件式を評価し、trueであればその条件に対応する処理を実行するために使用されます。

JavaScript

if(条件式1){
    // 条件式1がtrueの場合に実行される処理
} else if(条件式2) {
    // 条件式1がfalseで、条件式2がtrueの場合に実行される処理
} else {
    // 条件式1も条件式2もfalseの場合に実行される処理
}

switch文
switch文は、指定された式の値によって分岐する場合に使用されます。

JavaScript

switch(式){
    case 値1:
        //　式が値1に一致する場合の処理
        break;
    case 値2:
        //　式が値2に一致する場合の処理
        break;
    default:
        // 式がどの値にも一致しない場合の処理
}

式の評価結果が、各case文で指定された値と一致する場合に、
そのcase文の処理が実行されます。
break文は処理が終了したことを示すために使用されます。
default文は、どのcase文にも一致しない場合に実行される処理を指定します。

なお、switch文では、式のデータ型が異なる場合には、暗黙的に型変換が行われます。
そのため、予期せぬ挙動が発生することがあるため、注意が必要です。

繰り返し文
繰り返し文は、ある処理を繰り返し実行するために使用されます。
以下に代表的な繰り返し文を示します。

for文
for文は、指定された回数だけ繰り返すループで、一般的にカウンタ変数を使用してループを制御します。

JavaScript

for(初期化式; 条件式; 更新式){
    //　繰り返し実行する処理
}

for-in文
for-in文は、オブジェクトのプロパティを反復処理するために使用されます。

JavaScript

for(プロパティ in オブジェクト){
    //　繰り返し実行する処理
}

for-of文
for-of文は、配列などの反復可能オブジェクトに対して使用されます。
配列の各要素を反復処理します。

JavaScript

for(変数 of 配列){
    //　繰り返し実行する処理
}

while文
while文は、指定された条件がtrueの場合に繰り返し処理を実行するために使用されます。

JavaScript

while(条件式){
    //　条件がtrueの間繰り返し実行される処理
}

do-while文
do-while文は、while文と似ていますが、条件式のチェックがループ本体の実行後に行われます。
つまり、do-while文は少なくとも１回はループの本体を実行します。

JavaScript

do {
    //　最初に一度だけ実行される処理
} while(条件式);

break文
break文は、ループを中断するために使用されます。
ループが実行されているときにbreak文が実行されると、ループは即座に終了します。

continue文
continue文は、ループの次の反復にジャンプするために使用されます。
ループが実行されているときにcontinue分が実行されると、ループ本体の残りの部分がスキップされ、次の反復が開始されます。

ラベル付き文
ラベル付き文は、特定の文を識別するための識別子（ラベル）をつけ、その部分を別の場所から参照できるようにすることができます。
ラベル付き文は、通常の文の前にラベル名をつけ、コロン（:）で区切ります。
例えば以下のようなコードです。

JavaScript

outer: for(let i = 0; i < 10; i++){
    inner: for(let j = 0; j < 10; j++){
        if(i === 5 && j === 5){
            break outer;
        }
    }
}

この例ではouterというラベル名がついたfor文の中に、
innerというラベル名がついたもう一つのfor文があります。
内側のfor文で、iが5、jが5の場合、break outerが実行され
外側のfor文が終了します。

ラベル付き文は、通常の文と同じように、制御構文（if文、for文、while文、switch文など）の中で使われることが多いです。
ラベル付き文は、ネストされたループの中で、ある特定のループを抜けたい場合に便利です。

...
お腹いっぱいですね...
しかし、いよいよ「プログラミング！」という感じがしてとても良きです！

制御構文も実際書いて、動きを確認しながら学習した方がわかりやすいのですが...
一旦基礎知識として頭に置いておこうと思いマス。

制御構文の種類

条件分岐文
・if文
・switch文
繰り返し文（ループ処理）
・for文
・while文

基本の形としては、条件分岐はif文とswitch文、繰り返し文はfor文とwhile文です。
各制御構文の複雑さや扱うデータ型に応じて、if-else文などの派生形を使用するという認識で良いかと思います。

break文やcontinue文、ラベル付き文は制御構文の中で、必要な時に使います。

if文とswitch文の使い分け

さて、条件分岐文のif文とswitch文ですが、どちらも「〇〇の時に〜〜の処理を行う」
という処理を行います。
じゃあ、実際処理を書こう！と思ったときにどちらを使っても良いのでしょうか？
教えて！先生！

JavaScriptの条件分岐文であるif文とswitch文はどのように使い分ければ良いですか？

chatGPTの答え
if文とswitch文は、どちらも条件分岐のための制御構文ですが、それぞれの使い分けによって適切な場面が異なります。

if文は、単純な条件分岐を行う場合や、条件式が複雑な場合に使用します。
また、if文は条件式の評価結果が真偽値である必要があります。
条件式が複雑であっても、if文を使えば、複数の条件を組み合わせた条件分岐が可能です。

一方、switch文は、ある１つの式に対して、複数の値によって条件分岐を行う場合に使用します。
switch文では、比較対象の値が一致する場合に限り実行されるため、複数の条件を組み合わせることができません。

したがって、単純な値の比較や、複数の値を分岐する必要がない場合は、if文を使用し、
比較対象の値が複数ある場合や、複雑な条件分岐が必要な場合は、switch文を使用するのが適切です。

...
なるほど〜
確かに式を見比べたら、なんとなくchatGPTがいう意味がわかる気がします。
switch文では式は一つですが、if文はelse-if文を使うことで複数の条件式を指定することができますね。

for文とwhile文の使い分け

ではfor文とwhile文の使い分けはどうなっているのでしょう？

JavaScriptの繰り返し文であるfor文とwhile文はどのように使い分ければ良いですか？

chatGPTの答え
JavaScriptのfor文とwhile文は、同じ処理を繰り返すための繰り返し文ですが、使い分けによって適した方を選ぶことができます。

for文は、あらかじめ繰り返し回数がわかっている場合に適しています。
例えば、配列の要素を順番に処理する場合や、ある数の範囲内で処理を繰り返す場合などです。
以下は、1から10までの整数を順番に表示するfor文の例です。

JavaScript

for(let i = 1; i <= 10; i++){
    console.log(i);
}

一方、while文は、あらかじめ繰り返し回数がわからない場合に適しています。
例えば、ある条件が成立するまで何度も処理を繰り返す場合などです。
以下は、ランダムな数を生成し、その数が特定の値になるまで繰り返すwhile文の例です。

JavaScript

let number = 0;
while(number !== 5){
    number = Math.floor(Math.random() * 10);
    console.log(number);

どちらの繰り返し文でも同じ処理ができますが、使い分けによってコードの可読性を高めたり、
パフォーマンスを向上させたりすることができます。

...
なるほど。
ループ回数がわかっている ⇨ for文
条件によってループ回数が変わる ⇨ while文
ってことですね〜

break文を使うメリット

break文があると、そこで制御構文から抜け出し、その後の処理をスキップすることができます。

JavaScript

switch(式){
    case 値1:
        //　式が値1に一致する場合の処理
        break;
    case 値2:
        //　式が値2に一致する場合の処理
        break;
    default:
        // 式がどの値にも一致しない場合の処理
}

上の例だと、
式が値１に一致する場合、
case 値１:の下に書かれた処理を実行したら
break; があるので、そこでループから抜けます。
すると、その後の処理は実行されない...ということになります。

もしこのコードにbreak文がなければ、case 値２：やdefaultの処理も実行してしまいます。
条件に合った処理が行われた時点で処理を中断することで、余計な処理を行わなくて済みます。
プログラムの効率が上がりますし、コードの可読性を上げることができます。

※return文やthrow文を使う方法もあるようですが...ケースバイケースです。
return:何か、値を返したい時に使う
throw:処理を停止し、例外処理へ移行するために使う

また、break文を使うことで、複数のループから抜け出すことができます。
処理がネストされている場合、内側のループだけでなく、外側のループからも抜け出すことができます。

continue文の是非

continue文は、条件が合った場合に、その処理をスキップして、次のループに移ってほしい時に使います。
言葉だとよくわからないのでchatGPT先生に例を出してもらいました。

JavaScript

for(let i = 1; i <= 10; i++){
    if(i % 2 === 0){
        continue;
    }
    console.log(i);
}

上の例では、for文を使って、1から10までの整数をコンソールに出力するコードですが、
偶数の場合はcontinueで処理をスキップしています。

コードの意味を詳しく解説

JavaScript

// まずはコードを分解
let i = 1; // 初期化式です。まず、変数 i に 1 を代入しています。

i　<= 10; // 条件式です。変数 i が 10 以下まで処理を繰り返します。（つまり1〜10）

i++ // 更新式です。処理を実行した後、変数　i に 1 を足しています。

for(){
    console.log(i);
}
// 変数 i をコンソールに出力する処理を繰り返します。

i % 2 === 0 // 変数 i を 2 で割ったあまりが 0 と厳密に等しい（つまり偶数）

if(){
    continue;
}
// 先ほどの条件がtrueである時（偶数の時）、　console.log　の処理をせずに次のfor文を実行

// 上記のコードを組み立てると、
// for文で1から10までの整数をコンソールに出力
// ただし、if文で偶数の時の処理（コンソールに出力）はスキップ
// となる

出力結果は以下のようになります。

JavaScript

continue文を使うことで、より複雑な処理ができるようになります。

ただし、continue文は多用するとコードが複雑になります。
上記の例は簡単で短い処理なので迷うことはないですが
より複雑で長いコードになるとcontinue文が出てきた時に、次の動きを追うのが大変になります。
コードの可読性を上げるためには、使用は必要最低限にしたほうが良さそうです。

コードの可読性...?

何度か「コードの可読性」とか、「読みやすいコード」という話が出てきていますが

「そんなこと気にしなきゃいけないの？」
「読みやすさは二の次だよ。とりあえず動けば良くない？」

と思う方もいるかもしれません。

確かに、意図通りに動いてくれるというのは重要です。というか、必須です。
複雑で長いコードになろうと、動けば、まぁ...その時はなんとかなりますし。
まだ学習を始めた我々にとって、可読性にまで気を回す余裕はないですしね。

しかし、しばらくした後に、改修などでそのコードを見返したとき
果たして簡単に読み解くことができるでしょうか？

その改修が「なる早で！」などと急かされている場合、
冗長で読みにくいコードが目の前に現れたら...。
おそらくそのコードを書いた人に対して殺意が湧くでしょう。
（たとえそれが、過去の自分であろうと...）

「読みやすコード」というのは

保守性が高い
拡張性が高い
バグが発生しずらく、修正しやすい

と言われますが、つまりは
「他の人が読みやすいコード」です。

コードを読み解くのに、時間や労力がかからない

簡単に読めるので、保守や拡張がしやすいし、
バグがあってもすぐに気が付きやすいのです。

これって、学習を始めた私たちにとっても優しいコード、ということになります。

JavaScriptの基礎知識を頭に入れるだけでパンクしそう！
ではあるのですが、それはコードを書いていくうちに慣れるので大丈夫だと思います。

ただ、「読みやすいコードを書く」と意識することは、訓練が必要だと思います。
（実際かけるかは置いといて、意識しながら書く習慣をつける、という意味です）

まずは、「読みやすいコード」がどのようなものなのか知り、
いろんな人が書いたコードを見ながら納得し、
自分のコードに落とし込む

これを早い段階から繰り返すことで、読みやすいコードを書こうとする習慣がつくはずです。
そして、最終的には超つよつよのFEになれる...！と思います！

私はFEに転職してすぐの頃、先輩方から以下の本を勧められました。
今の私には内容がやや難しく、読むのに時間がかかってますが
とても重要な考え方が載っているのはわかります。
これから、何度も読み返しつつ、身につけていけたらと思っています。

プログラマの必読書らしいので、読んだことないよ〜という方は
ぜひ一度読んでみてください。
もしかしたら、コーディングがうまくいかない時のヒントになるかもしれません。

リンク

全てのカリキュラムへのリンクは導入編に置いております

導入編

JavaScriptとは何か、基本的な文法

データ型

変数

演算子

制御構文 ⇦NOW!!