chatGPTと学ぶJavaScript　第１週：JavaScriptの基礎〜制御構文編〜

こちらの続きです

https://qiita.com/Nao_O/private/1dac938a837c752762cc

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

## 制御構文
### 制御構文とは
いよいよ、「chatGPTと学ぶJavaScript　第1週」最後の項目は「制御構文」です。
まずはchatGPT先生に聞いてみますね。
>JavaScriptにおける制御構文について詳しく説明してください

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

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

**if文**
if文は、指定された条件がtrueの場合に、特定の処理を実行するために使用されます。
```javascript:JavaScript
if(条件式){
    // 条件がtrueの場合に実行される処理
}
```
**if-else文**
if-else文は、指定された条件がtrueの場合には特定の処理を実行し、falseの場合は別の処理を実行するために使用されます。
```javascript:JavaScript
if(条件式){
    // 条件がtrueの場合に実行される処理
} else {
    // 条件がfalseの場合に実行される処理
}
```
**else-if文**
else-if文は、指定された条件がtrueの場合には特定の処理を実行し、falseの場合は別の条件式を評価し、trueであればその条件に対応する処理を実行するために使用されます。
```javascript:JavaScript
if(条件式1){
    // 条件式1がtrueの場合に実行される処理
} else if(条件式2) {
    // 条件式1がfalseで、条件式2がtrueの場合に実行される処理
} else {
    // 条件式1も条件式2もfalseの場合に実行される処理
}
```
**switch文**
switch文は、指定された式の値によって分岐する場合に使用されます。
```javascript:JavaScript
switch(式){
    case 値1:
        //　式が値1に一致する場合の処理
        break;
    case 値2:
        //　式が値2に一致する場合の処理
        break;
    default:
        // 式がどの値にも一致しない場合の処理
}
```
式の評価結果が、各case文で指定された値と一致する場合に、
そのcase文の処理が実行されます。
break文は処理が終了したことを示すために使用されます。
default文は、どのcase文にも一致しない場合に実行される処理を指定します。

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

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

**for文**
for文は、指定された回数だけ繰り返すループで、一般的にカウンタ変数を使用してループを制御します。
```javascript:JavaScript
for(初期化式; 条件式; 更新式){
    //　繰り返し実行する処理
}
```
**for-in文**
for-in文は、オブジェクトのプロパティを反復処理するために使用されます。
```javascript:JavaScript
for(プロパティ in オブジェクト){
    //　繰り返し実行する処理
}
```
**for-of文**
for-of文は、配列などの反復可能オブジェクトに対して使用されます。
配列の各要素を反復処理します。
```javascript:JavaScript
for(変数 of 配列){
    //　繰り返し実行する処理
}
```
**while文**
while文は、指定された条件がtrueの場合に繰り返し処理を実行するために使用されます。
```javascript:JavaScript
while(条件式){
    //　条件がtrueの間繰り返し実行される処理
}
```
**do-while文**
do-while文は、while文と似ていますが、条件式のチェックがループ本体の実行後に行われます。
つまり、do-while文は少なくとも１回はループの本体を実行します。
```javascript:JavaScript
do {
    //　最初に一度だけ実行される処理
} while(条件式);
```
**break文**
break文は、ループを中断するために使用されます。
ループが実行されているときにbreak文が実行されると、ループは即座に終了します。

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

**ラベル付き文**
ラベル付き文は、特定の文を識別するための識別子（ラベル）をつけ、その部分を別の場所から参照できるようにすることができます。
ラベル付き文は、通常の文の前にラベル名をつけ、コロン（:）で区切ります。
例えば以下のようなコードです。
```javascript: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文など）の中で使われることが多いです。
ラベル付き文は、ネストされたループの中で、ある特定のループを抜けたい場合に便利です。

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

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

### 制御構文の種類

:::note info
**条件分岐文**
・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:JavaScript
for(let i = 1; i <= 10; i++){
    console.log(i);
}
```
一方、while文は、あらかじめ繰り返し回数がわからない場合に適しています。
例えば、ある条件が成立するまで何度も処理を繰り返す場合などです。
以下は、ランダムな数を生成し、その数が特定の値になるまで繰り返すwhile文の例です。
```javascript:JavaScript
let number = 0;
while(number !== 5){
    number = Math.floor(Math.random() * 10);
    console.log(number);
```
どちらの繰り返し文でも同じ処理ができますが、使い分けによってコードの可読性を高めたり、
パフォーマンスを向上させたりすることができます。

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

### break文を使うメリット
break文があると、そこで制御構文から抜け出し、その後の処理をスキップすることができます。
```javascript: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:JavaScript
for(let i = 1; i <= 10; i++){
    if(i % 2 === 0){
        continue;
    }
    console.log(i);
}
```
上の例では、for文を使って、1から10までの整数をコンソールに出力するコードですが、
偶数の場合はcontinueで処理をスキップしています。

<details><summary>コードの意味を詳しく解説</summary>

```javascript: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文で偶数の時の処理（コンソールに出力）はスキップ
// となる

```
</details>

出力結果は以下のようになります。
```javascript:JavaScript
1
3
5
7
9
```

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

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

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

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

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

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

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

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

「読みやすコード」というのは
- 保守性が高い
- 拡張性が高い
- バグが発生しずらく、修正しやすい

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

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

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

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

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

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

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

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

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

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

https://www.amazon.co.jp/%E3%83%97%E3%83%AA%E3%83%B3%E3%82%B7%E3%83%97%E3%83%AB-%E3%82%AA%E3%83%96-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B03%E5%B9%B4%E7%9B%AE%E3%81%BE%E3%81%A7%E3%81%AB%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%91%E3%81%9F%E3%81%84%E4%B8%80%E7%94%9F%E5%BD%B9%E7%AB%8B%E3%81%A4101%E3%81%AE%E5%8E%9F%E7%90%86%E5%8E%9F%E5%89%87-%E4%B8%8A%E7%94%B0-%E5%8B%B2/dp/4798046140/ref=sr_1_1?crid=1NFAJ0359QGC1&keywords=%E3%83%97%E3%83%AA%E3%83%B3%E3%82%B7%E3%83%96%E3%83%AB%E3%82%AA%E3%83%96%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0&qid=1679022988&sprefix=%E3%83%97%E3%83%AA%E3%83%B3%E3%82%B7%E3%83%96%E3%83%AB%2Caps%2C362&sr=8-1

https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=35Q8CTYW7J2DP&keywords=%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89&qid=1679023012&sprefix=%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%81%93%E3%83%BC%E3%81%A9%2Caps%2C282&sr=8-1



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

**導入編**

https://qiita.com/Nao_O/private/2e05cc452ef70f12ab96

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

https://qiita.com/Nao_O/private/a52215f4234410a1bff3

**データ型**

https://qiita.com/Nao_O/private/f1b801b4768c547d1886

**変数**

https://qiita.com/Nao_O/private/8c95f224a1314d572fb6

**演算子**

https://qiita.com/Nao_O/private/1dac938a837c752762cc

**制御構文** ⇦NOW!!

https://qiita.com/Nao_O/private/88b62bba8480192d5039