初心者による初心者のためのJavaScript基礎２【配列・条件分岐・繰り返し】

# 目次
[1. 配列](#1-配列)
&emsp;[1-1. 配列の宣言](#配列の宣言)
&emsp;[1-2. 要素の取得](#要素の取得)
&emsp;[1-3. 要素の追加と削除](#要素の追加と削除)
[2. 条件分岐](#2-条件分岐)
&emsp;[2-1. 比較演算子](#比較演算子)
&emsp;[2-2. if文](#if文)
&emsp;[2-3. switch文](#switch文)
[3. 繰り返し（ループ）](#3-繰り返しループ)
&emsp;[3-1. for文](#for文)
&emsp;[3-2. while文](#while文)
&emsp;[3-3. break文とcontinue文](#break文とcontinue文)
&emsp;[3-4. forEachメソッド](#foreachメソッド)
[4. JavaScript基礎シリーズ](#4-javascript基礎シリーズ)
[5. 参考記事](#5-参考記事)

# 1. 配列
配列とは複数の値を一つのデータのように扱うことができるデータ構造のことです。

## 配列の宣言
JavaScriptで配列を宣言する方法は2種類あります。
```js
const students = ["Qii太郎", "Zenn次郎", "はてなブ郎"];
// 配列リテラル

const students = new Array("Qii太郎", "Zenn次郎", "はてなブ郎");
// 配列コンストラクタ
```
配列コンストラクタで数値を格納する際は注意が必要です。
配列コンストラクタでは、引数に一つの数値を渡すとその数の配列要素を作成することになります。
```js
const scores = new Array(2);

console.log(scores); //出力結果 : [empty × 2]
```
配列を宣言する際は配列リテラルを使う方が無難です。

## 要素の取得
配列変数を指定すると配列全ての要素が取得されます。
また、`lengthプロパティ`を使用すると要素の数が取得できます。
```js
const students = ["Qii太郎", "Zenn次郎", "はてなブ郎"];

console.log(students);
// 出力結果 : Qii太郎,Zenn次郎,はてなブ郎

console.log(students.length);
// 出力結果 : 3
```
特定の要素を取得したい場合は要素番号を指定します。
```js
console.log(students[0]); //出力結果 : Qii太郎
console.log(students[1]); //出力結果 : Zenn次郎
console.log(students[2]); //出力結果 : はてなブ郎
```
:::note info
_Point_
要素番号は`0`から始まります
:::

## 要素の追加と削除
要素を追加する場合は`pushメソッド`を使用します。
```js
students.push("note四郎");

console.log(students);
// 出力結果 : Qii太郎,Zenn次郎,はてなブ郎,note四郎
```
要素の削除は`delete演算子`を使用します。
気をつけたいのは削除しても完全に要素がなくなるわけではなく、要素が空になるということです。
（要素自体を削除する方法をコメント欄で教えていただきました）
```js
delete students[3];

students.push("個人ブ郎");

console.log(students); //出力結果 : Qii太郎,Zenn次郎,はてなブ郎,,個人ブ郎
console.log(students.length); //出力結果 : 5
console.log(students[3]); //出力結果 : undefined
console.log(students[4]); //出力結果 : 個人ブ郎
```
:::note warn
delete演算子で削除しても要素がなくなるわけではなく、要素の数も変わりません。
:::

# 2. 条件分岐
特定の条件に一致するかどうかで処理を分けることができます。
条件に一致することを`true`、一致しないことを`false`と表現します。
これを真偽値と言います。

:::note info
真偽値
条件に一致　・・・　__true__
条件に不一致 ・・・　__false__
:::

## 比較演算子
値を比較するときは比較演算子を使用します。
| 比較演算子 | 使用例 | 内容 |
|:-:|:-:|:-:|
| < | a < b | aはbより小さいか |
| <= | a <= b | aはb以下か |
| > | a > b | aはbより大きいか |
| >= | a >= b | aはb以上か |
| === | a === b | aとbは等しいか |
| !== | a !== b | aとbは等しくないか |

JavaScriptでは値が等しいかどうかを比較する場合、`==`と`===`の2種類が存在します。

:::note info
等価演算子と厳密等価演算子
`==`(等価演算子)　・・・　__値__ が一致するかどうか
`===`(厳密等価演算子)　・・・　__値__ と __型__ が一致するかどうか
:::

## if文
if文は次のように記載します。
```js
if (条件式) {
    // 条件式がtrueの時に実行される処理
    // （falseの時は処理されない）
}
```
```js
if (条件式) {
    // 条件式がtrueの時に実行される処理
} else {
    // 条件式がfalseの時に実行される処理
}
```
```js
if (条件式1) {
    // 条件式1がtrueの時に実行される処理
} else if (条件式2) {
    // 条件式1がfalseで条件式2がtrueの時に実行される処理
} else {
    // 条件式が全てfalseの時に実行される処理
}
```
プログラムは上から処理されていくので、上記のように記載した場合で条件式1と条件式2のいずれも`true`になる場合、条件式1の処理しか実行されません。
`else if`は複数記載することもできます。
```js:例
const age = 35;

if (age >= 40) {
console.log("年齢は40歳以上です。");
} else if (age >= 30) {
console.log("年齢は30代です。");
} else {
console.log("年齢は30歳未満です。");
}

// 出力結果 : 年齢は30代です。
```

## switch文
switch文は複数の値の中から式に一致する値の処理を実行する記載方法です。
if文でも同様の記載はできますが、比較する値が多い場合はswith文の方が簡潔に記載することができます。
```js
switch (式){
    case 値1:
        // 式が値1の時に実行される処理
        break;
    case 値2:
        // 式が値2の時に実行される処理
        break;
    case 値3:
        // 式が値3の時に実行される処理
        break;
    default:
        // 式の値がいずれのcaseとも一致しない場合に実行される処理
}
```
`break文`で処理が終了します。
if文と違って`break文`がないとcaseと値が一致した以降の処理が全て実行されます。
また、該当する値がない場合は`default`に記載した処理が実行されます。
該当する値がない場合に処理を何も実行させない場合は`default`を省略することもできます。
```js:例
const language = "Java";

switch (language){
    case "PHP":
        console.log("言語はPHPです。");
        break;
    case "Ruby":
        console.log("言語はRubyです。");
        break;
    case "Java":
        console.log("言語はJavaです。");
        break;
    default:
        console.log("言語が指定されていません。");
}

// 出力結果 : 言語はJavaです。
```
switch文についてはこちらの記事がとてもわかりやすかったです。
（Javaの記事ですが基本的なswitch文の書き方は同じです）

https://www.javadrive.jp/start/if/index4.html

# 3. 繰り返し（ループ）
for文やwhile文を使用することで一定の回数や特定の条件下で同じ処理を繰り返すことができます。

## for文
for文は次のように記載します。
```js
for (初期化式; 条件式; 加算式) {
    // 繰り返し実行する処理
}
```

:::note info
__初期化式__
for文の中で使用する変数の初期値を定義します。
ここで定義される変数は`カウンタ変数`とも呼ばれます。
慣習的に`i`を変数として使用することが多いですが任意の変数を使用できます。
:::

:::note info
__条件式__
何回繰り返すかを指定します。
:::

:::note info
__加算式__
処理後に変数をどのように増減させるかを指定します。
:::

条件式が`true`の間、処理が繰り返されます。
カウンタ変数はfor文のループの中で使用できます。

```js:例
for ( let i = 1; i <= 3; i++ ) {
    console.log(i + "回目の処理です。");
}

// 出力結果↓↓
// 1回目の処理です。
// 2回目の処理です。
// 3回目の処理です。
```

## while文
while文は次のように記載します。
```js
while (条件式){
    // 繰り返し実行する処理
}
```
for文と同じく条件式が`true`となる間、処理を繰り返します。
for文と違い回数が決まっていない場合に使用します。
また、初期化式や加算式がないので、条件式の変化をwhile文の中で記載する必要があります。

```js:例
let num = 0;

while (num < 3) {
    console.log(num);
    num++;
}

// 出力結果↓↓
// 0
// 1
// 2
```

## break文とcontinue文
switch文でも使用しましたが、繰り返し処理でも`break文`が使用できます。

:::note info 
__break__
以降の処理は実行されず、ループ処理が終了
:::

同様に`continue文`も使用することができます。

:::note info
__continue__
以降の処理は実行されず、次のループへ
:::

```js:例
console.log(`3の倍数の時だけアホになります。\n100まで数えます。`);
let num = 0;

while (num < 100) {
    num++;
    if (num % 3 === 0) {
        console.log(`٩( ᐛ )${num}!`);
        continue;
        // これ以降の処理は実行されず次のループへ
    }
    console.log(num);
    if (num === 10) {
        console.log("やっぱり終わります。");
        break;
        // これ以降の処理は実行されずループ自体が終了
    }
}

// 出力結果↓↓
// 3の倍数の時だけアホになります。
// 100まで数えます。
// 1
// 2
// ٩( ᐛ )3!
// 4
// 5
// ٩( ᐛ )6!
// 7
// 8
// ٩( ᐛ )9!
// 10
// やっぱり終わります。
```

## forEachメソッド
配列にforEachメソッドを使用することで、配列の要素を一つずつに対して繰り返し処理が実行されます。
次のように記載します。
```js
配列.forEach(function(value){
    // 実行する処理
});
```
forEachメソッドの引数に関数（コールバック関数）を記載します。
関数については別の記事で説明していきます。
コールバック関数に引数を指定することで配列の要素が順に入ります。
```js:例
const students = ["Qii太郎", "Zenn次郎", "はてなブ郎"];

students.forEach(function(student){
    console.log(student);
});

// 出力結果↓↓
// Qii太郎
// Zenn次郎
// はてなブ郎
```
コールバック関数には第2引数と第3引数を指定することもできます。
```js
配列.forEach(function(value, index, array){
    // 実行する処理
});
```
<table>
<tr>
    <td>第1引数</td>
    <td>(value)</td>
    <td>要素の値</td>
</tr>
<tr>
    <td>第2引数</td>
    <td>(index)</td>
    <td>要素のインデックス</td>
</tr>
<tr>
    <td>第3引数</td>
    <td>(array)</td>
    <td>配列</td>
</tr>
</table>
次のような使い方ができます。

```js:例
const students = ["Qii太郎", "Zenn次郎", "はてなブ郎"];

students.forEach(function(student, i, students){
    console.log(`出席番号${i + 1}:${student}(全校生徒:${students})`);
});

// 出力結果↓↓
// 出席番号1:Qii太郎(全校生徒:Qii太郎,Zenn次郎,はてなブ郎)
// 出席番号2:Zenn次郎(全校生徒:Qii太郎,Zenn次郎,はてなブ郎)
// 出席番号3:はてなブ郎(全校生徒:Qii太郎,Zenn次郎,はてなブ郎)

students.forEach(function(student, i, students){
    if (students[i] === "Zenn次郎") {
        console.log(`本日の日直は${student}さんです。`);
    }
});

// 出力結果 : 本日の日直はZenn次郎さんです。
```
for文を使用しても同様の記載ができますが、存在しない要素に対しての処理が異なります。
```js
const students = ["Qii太郎",, "はてなブ郎"];

students.forEach(function(student){
    console.log(student);
});

// 出力結果↓↓
// Qii太郎
// はてなブ郎

for (let i = 0; i < students.length; i++) {
    console.log(students[i]);
}

// 出力結果↓↓
// Qii太郎
// undefined
// はてなブ郎
```
:::note warn
forEachメソッドでは存在しない要素に対しては処理が実行されないが、
for文では存在しない要素に対しても処理が実行される
:::


# 4. JavaScript基礎シリーズ
[1. 変数](https://qiita.com/katao_eng/items/4b10add27a4c9ca77ca0)
2. 配列・条件分岐・繰り返し　←今ここ
[3. 関数](https://qiita.com/katao_eng/items/eedfa502eacf770c39fd)


# 5. 参考記事
[【初心者向け】JavaScriptの配列の基礎的な使い方！プログラミングに配列は必須！](https://and-engineer.com/articles/YhS1AxMAACAAdK93)
[【JavaScript入門】配列の使い方と操作まとめ（初期化・追加・結合・検索・削除）](https://www.sejuku.net/blog/31746)
[【JavaScriptの条件分岐】if文の書き方/使い方 - サンプルコードとあわせて解説](https://www.pasonatech.co.jp/workstyle/column/detail.html?p=2619)
[【プログラミング基礎】スクラッチで真偽（True, False）を理解しよう！](https://manabi-plus.jp/programming-scratch-truefalse/)
[条件分岐 · JavaScript Primer #jsprimer](https://jsprimer.net/basic/condition/)
[【JavaScript入門】比較演算子の使い方まとめ (==/===/OR/AND)](https://www.sejuku.net/blog/23942)
[【入門】JavaScriptのswitch文の書き方をサンプルコードで解説！](https://www.pasonatech.co.jp/workstyle/column/detail.html?p=2624)
[while文を使った繰り返し処理](https://www.javadrive.jp/javascript/for/index6.html)
[Java | switch文を使った条件分岐](https://www.javadrive.jp/start/if/index4.html)
[【JavaScriptの入門】繰り返し処理 -for文](https://tcd-theme.com/2021/05/javascript-for.html)
[【JavaScriptの入門】繰り返し処理 -while文](https://tcd-theme.com/2021/05/javascript-while.html)
[顔文字「٩( ᐛ )و」は馬鹿にしてるときに使う？](https://urarara0724.jp/blog-entry-3042.html)
[JavaScript | 配列の要素を順に取得する(forEach)](https://www.javadrive.jp/javascript/array/index10.html)
[JavaScriptでforEachメソッドを使用する方法 | IT職種コラム](https://it-kyujin.jp/article/detail/1539/)