8.2 基本構文（変数とは、if文, switch文, for文, while文について）

## 変数とは
プログラミング言語における「値を入れておく箱」のこと

https://wa3.i-3-i.info/word1603.html

### 変数の宣言について

https://techacademy.jp/magazine/14872

実際にjsで書いてみよう
<details><summary>宣言</summary>
<div>

```js
// 宣言
var testV = "var";
let testL = "let";
const testC = "const";
console.log(testV);
console.log(testL);
console.log(testC);
```
</div>
</details>

<details><summary>再代入</summary>
<div>

```js
// 再代入
var testVar = "var宣言";
console.log(testVar);
testVar = "var再代入"; // 再代入可
console.log(testVar);

let testLet = "let宣言";
console.log(testLet);
testLet = "let再代入"; // 再代入可
console.log(testLet);

const testConst = "const宣言";
console.log(testConst);
testConst = "const再代入"; // 再代入不可のためエラーが出る
console.log(testConst);
```
</div>
</details>

<details><summary>再宣言</summary>
<div>

```js
// 再宣言
var testVar = "var再宣言";
console.log(testVar);

let testLet = "let再宣言"; // 再宣言不可のためエラーが出る
console.log(testLet);

const testConst = "const再宣言"; // 再宣言不可のためエラーが出る
console.log(testConst);
```
</div>
</details>

|         |  再代入  |  再宣言  |  スコープの範囲  |
| ------- | --- | --- | --- |
|  var    | ○ | ○ | 関数内ならどこでも可 |
|  let    | ○ | × | 宣言したブロック{}内 |
|  const  | × | × | 宣言したブロック{}内 |

var、let、constの３種類で宣言できますが、**バグを防ぐためにも基本的にはconstを使用するようにしています。**（varを使用したことはありません）

### 変数の型について
プログラミング言語の変数には型というものがあり、JavaScript（以降js）は、型を自動で決定してくれる言語となっています。

https://www.webprofessional.jp/beginners-guide-javascript-variables-and-datatypes/

---

## if文, switch文
if文, switch文は条件分岐を記述するときに使用します。

- if文　「もし○○だったら××してね～」な条件分岐を書くときに使う構文
- switch文　処理が3つ以上に枝分かれする条件分岐を書くときに使う構文

### if文
https://wa3.i-3-i.info/word11654.html

実際にjsで書いてみよう

<details><summary>script.js</summary>
<div>

```js
/** 食べ物 */
let food = "パン";
// food = "ケーキ";
// food = "";

if (food === "パン") {
  console.log("パンを食べる");
} else if (food === "ケーキ") {
  console.log("ケーキを食べる");
} else {
  console.log("暴れる");
}
```
</div>
</details>

#### switch文
https://wa3.i-3-i.info/word15416.html

実際にjsで書いてみよう

<details><summary>script.js</summary>
<div>

```js
/** 今日のおやつ */
let todaySnack = "ケーキ";
// todaySnack = "ミカン";
// todaySnack = "なし";
// todaySnack = "";
switch (todaySnack) {
  case "ケーキ":
    console.log("喜んで食べる");
    break;

  case "ミカン":
    console.log("そこそこ喜んで食べる");
    break;

  case "なし":
    console.log("暴れる");
    break;

  default:
    console.log("何もしない");
}
```
</div>
</details>

---

## for文, while文（do～while文）
- for文　一般的には「これだけの回数、同じ処理を繰り返してね～」な繰り返し処理を書くときに使う構文
- while文　「条件を満たしている間は同じ処理を繰り返してね～」な繰り返し処理を書くときに使う構文　
- do～while文　「まず1回この処理をやりたまえ。その後は条件を満たしているかぎり同じ処理を繰り返してね～」な繰り返し処理を書くときに使う構文


### for文
https://wa3.i-3-i.info/word15412.html

実際にjsで書いてみよう

<details>
<summary>script.js</summary>
<div>

```js
for (let i = 0; i < 5; i++) {
  console.log(i);
}
```
</div>
</details>


### while文
https://wa3.i-3-i.info/word15410.html

実際にjsで書いてみよう

<details>
<summary>script.js</summary>
<div>

```js
let piyota = "ピヨ太は寝ている";
// piyota = "ピヨ太は起きている";
console.log(piyota);
while (piyota === "ピヨ太は寝ている") {
  // ピヨ太を起こす
  piyota = "ピヨ太は起きた";
}
console.log(piyota);
```
</div>
</details>


### do～while文
https://wa3.i-3-i.info/word15411.html

実際にjsで書いてみよう

<details>
<summary>script.js</summary>
<div>

```js
let piyota = "ピヨ太は寝ている";
do {
  // ピヨ太を起こす
  piyota = "ピヨ太は起きた";
  console.log("do");
} while (piyota === "ピヨ太は寝ている");
```
</div>
</details>

### while文、do～while文の違い

https://wa3.i-3-i.info/diff297programming.html

上記にも記載されているように、基本while文を使用しています。do～while文は使用したことがありません。

# 参考

https://www.webprofessional.jp/beginners-guide-javascript-variables-and-datatypes/

https://wa3.i-3-i.info/index.html