JavaScript備忘録


### はじめに
この記事はプログラミング初学者の学習教材Progate-JavaScriptコース備忘録です。

スペシャルサンクス
siracamus様　https://qiita.com/shiracamus

### 補足

```text:記号の読み方
[]	角括弧(かく – )	bracket ブラケット
{}	波括弧(なみ – )	brace ブレース
<>	山括弧(やま – )	小なり／大なり	less-than sign
```

## <font color="Red">Progate JavaScript Ⅰ</font>

### 出力: `console.log();`

```js
console.log("Hello World");
//「()」に出力する文字を入力。文字列は""で囲む。数字はそのまま
```

### 変数: `let ○○ = ~~;`

```js:例①
let name ="こんにちわ";
console.log("name");
//結果：こんにちわ
```

```js:例②
let number = 0;
console.log(number);
//結果：0
number += 1;
console.log(number);
//結果：1
```

### 定数: `const ○○ = ~~;`

```js:例
const hello ="こんばんわ";
console.log("hello");
//結果：こんばんわ
```

### テンプレートリテラル:  バッククォーテーションで囲む

```js:例
const hello = "にんじゃわんこ";
console.log(`こんにちは、${name}さん`);
//結果：こんにちは、にんじゃわんこさん
```

### 条件分岐: `if`  ※見やすくするために、Tabでインデント（字下げ）をつける

```js:例
const number = 12;
if (number > 10) {
  console.log("numberは10より大きいです");
}
//結果：numberは10より大きいです
```

### 真偽値と比較演算子: `<`, `<=`, `>`, `>=`

```js
a < b   //aはbより小さい
a <= b  //aの方が小さいまたは等しい
a > b   //aはbより大きい
a >= b  //aの方が大きいまたは等しい
```

```js:例
const age = 24;
// 「age >= 20」を出力
console.log(age >= 20);
//結果：true

// 「age < 20」を出力
console.log(age < 20);
//結果：false

// ageの値が20以上の場合に、「私は20歳以上です」と出力
if (age >= 20) {
  console.log("私は20歳以上です");
}
//結果：私は20歳以上です
```

### 等価演算子: `==`, `!=`

```js
a == b  //aとbは等しい
a != b  //aとbは異なる

const number = 10;

console.log(number = 10);
//結果：true

console.log(number = "10");
//結果：false
```

### 厳密等価演算子: `===`, `!==`

```js
a === b  //aとbが厳密に等しい
a !== b  //aとbが厳密に異なる
```

### 条件分岐: `if()`, `else`

```js:例
const number = 7;
if (number > 10) {
  console.log("numberは10より大きいです");
} else {
  console.log("numberは10より小さいです");
}
//結果：numberは10より小さいです
```

### 条件分岐: `else if()`

```js:例
const number = 7;
if (number > 10) {
  console.log("numberは10より大きいです");
} else if (number > 5) {
  console.log("numberは5より大きいです");
} else {
  console.log("numberは5より小さいです")
}
```
```text:結果
numberは5より大きいです  //条件式2がtrueなので「else if」の中の処理が実行された
```

### かつ: `&&`, または `||`  NG例 `10 < x < 30`

```js:例
const number = 31;
if (number >= 10 && number < 100) {
  console.log("numberは2桁です");
}
//結果:numberは2桁です
```

### switch文①: `case`, `break`

```js:例１
const n = 2;

switch (n) {
  case 1:  //❌セミコロン ⭕️コロン
    console.log("大吉です");
    break;

  case 2:
    console.log("吉です");
    break;

  case 3:
   console.log("小吉です");
   break;
}
//結果:吉です
```

```js:例2
// break;がない場合 (break;を忘れないように注意)
const color = "赤";

switch (color) {
  case "赤":  //コロン
    console.log("ストップ！");
    //←ここに「break;」記述なし
  case "黄":
    console.log("要注意");
    break;
}
```
```text:
//結果: //その次のcaseの処理も実行されてしまっているケース
ストップ！
要注意  
```

### switch文②: `default`

caseのどれにも一致しなかった時、defaultのブロックが実行される。
defaultはif文のelseに似たようなもの。
if, elseifによる分岐が多く複雑な場合、switch文で書き換えると
シンプルで読みやすいコードにできる。

```js:例
const n = 4;
switch (n) {
  case 1:
    console.log("大吉です");
    break;
  case 2:
    console.log("吉です");
    break;
  case 3:
    console.log("小吉です");
    break;
  // どのcaseにも合致しなかったときの処理を追加してください
  default:
    console.log("凶です");
    break;
}
//結果:凶です
```

## <font color="Navy">Progate JavaScript Ⅱ</font>

### 繰り返し処理①: `while`

```js:例
let number = 1;
while (number <= 100) {
console.log(number);
number += 1;
}
//結果:1.2.3...100
```

```js:失敗例
let number = 1;
while (number <= 100) {
  console.log(number);
  //「number += 1;」を入力し忘れているケース
}

//結果：1.1.1...（無限ループが発生）
```

### 繰り返し処理②: `for`

できることはwhile文と同じ。while文に比べてシンプルに書くことができるのが特徴。
for文では「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書く。
括弧の中ではそれぞれをセミコロン（;）で区切る。※,（カンマ）で区切らないように注意

```js:例①
for (let number = 1; number <= 100; number += 1) {
  console.log(number);
}
```

最後の number += 1の後に;（セミコロン）は必要なし。
「number += 1」を「number++」のように省略可。
「number -= 1」→「number--」も同様。

```js:例②
for (let number = 1; number <= 100; number++) {
  // if文を用いて、numberが3の倍数の時に「3の倍数です」、そうでないときは数字を出力
  // 「3の倍数である」ということは、「3で割った余りが0と等しい (number % 3 === 0)」という条件と同じ
  if (number % 3 === 0) {
    console.log("3の倍数です");
  } else {
    console.log(number);
  }
}
```

```text:結果
1
2
3の倍数です
4
5
3の倍数です...
```

### 配列:  配列の要素の取得（インデックス番号）

```js:例①
const fruits = ["apple","banana","orange"];  //const:定数
console.log(fruits);
//結果:['apple', 'banana', 'orange']
```

```js:例②
//※要素の1つ目は[０]（ゼロ）から始まることに注意
const fruits = ["apple","banana","orange"];
console.log(fruits[0]);
//結果:['apple']

console.log(fruits[2]);
//結果:['orange']
```

```js:例③
//※要素の1つ目は[０]（ゼロ）から始まることに注意
const fruits = ["apple","banana","orange"];
console.log(fruits[0]);    // 更新前
fruits[0] = "grape";
console.log(fruits[0]);    //更新後
```

```text:結果
apple
grape
```

要素に値を代入することで、要素が更新された。

### 配列と繰り返し①: `for文`

下記の文をfor文へ書き換えられる

```js
const fruits = ["apple","banana","orange"];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
```

```text:結果
apple
grape
orange
```

```js:例
const fruits = ["apple","banana","orange"];
//①iが0~2のあいだループする  ②for()の後に;セミコロンいらない
③,（カンマ）で区切らないように注意
for (let i = 0; i < 3; i++) {
  //変数iを用いて要素を取得
  console.log(fruits[i]);
}
```

```text:結果
apple
grape
orange
```

### 配列と繰り返し②: `配列.length`

```js:例
const fruits = ["apple","banana","orange","lemon","peach"];
//「.length」は定数fruitsの中にある5つのことを示している。
for (let i = 0; i < fruits.length; i++) {
  //変数iを用いて要素を取得
  console.log(fruits[i]);
}
```

```text:結果
5
apple
grape
orange
lemon
peach
```

### オブジェクト

```js:比較
//さっきまでの配列の場合 []角括弧で囲む
[値1, 値2, 値3]
//オブジェクトの場合 {}波括弧で囲む
{プロパティ１: 値1, プロパティ2: 値2}
```

```js:例
{name: "手裏剣", price: 300}

//①プロパティと値は「:コロン」でつなぐ
//②「プロパティ1：値1」で一つの要素となる。要素同士は「,コンマ」で区切る
{プロパティ1: 値1, プロパティ2: 値2}
```

```js:例
const item = {name："手裏剣",price:300};
console.log(item);
//結果:{name: '手裏剣', price: 300};
```

### オブジェクトの値の取得・更新

```js:例①
const item = {name: "手裏剣", price: 300};
//「.name（プロパティ名）」で、nameプロパティの値を習得
console.log(item.name);
//結果:手裏剣
```

```js:例②
const item = {name: "手裏剣", price: 300};
//priceプロパティの値を更新
item.price = 500;
console.log(item.price);
//結果:500
```

### オブジェクトを要素に持つ配列（1）: オブジェクトの値を取り出す

①角括弧[]内は配列。
②「プロパティ1：値1」で一つのオブジェクトとなる。オブジェク同士は「,（コンマ）」で区切る
`[{プロパティ1：値1},{プロパティ2:値2}]`

```js:例
//※インデックスの先頭は[０]（ゼロ）から始まることに注意。配列の要素の取得（インデックス番号）と同じ。
const item = [
  {name："手裏剣", price:300},
  {name："忍者刀", price:1200}
];
console.log(item[1]);
//結果:{name："忍者刀",price:1200}

console.log(item[1].price);
//結果:1200
```

### オブジェクトを要素に持つ配列（2）: 配列と繰り返し処理

```js
const items = [
  {name: "手裏剣", price: 300},
  {name: "忍者刀", price: 1200},
  {name: "爆竹", price: 200}
];

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  console.log("この武器は" + item.name+ "です");
  console.log(item.price + "円です");
}
```

```text:結果
この武器は手裏剣です
300円です
この武器は忍者刀です
1200円です
この武器は爆竹です
200円です
```

### 存在しない要素を取得する: `undefined`

```js:例①
const animals = ["dog","cat","sheep"];
console.log(animals[5]);
//結果:undefined
```

```js:例②
const items = [
  {name："手裏剣",price:300},
  {name："忍者刀",price:1200},
  {name："爆竹",price:200},
  {name："ドラゴンボール"}
];

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  console.log("この武器は" + item.name+ "です");
  console.log(item.price + "円です");
}
```

```text:結果
この武器は手裏剣です
300円です
この武器は忍者刀です
1200円です
この武器は爆竹です
200円です
この武器はドラゴンボールです
undefinedです
```

### undefinedを避ける

ドラゴンボールの値段の値が指定されていなかった場合「値段は秘密です」にする。

```js:例
const items = [
  {name: "手裏剣", price: 300},
  {name: "忍者刀", price: 1200},
  {name: "爆竹", price: 200},
  {name: "ドラゴンボール"}
];

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  if (item.price === undefined) {
    //priceの値がundefined（定義なし）の場合
    console.log("値段は秘密です");
  } else {
    //priceの値はitem.priceの値となるようにする
    console.log(item.price + "円です");
  }
  console.log("この武器は" + item.name+ "です");
  console.log(item.price + "円です");
}
```

```text:結果
この武器は手裏剣です
300円です
この武器は忍者刀です
1200円です
この武器は爆竹です
200円です
この武器はドラゴンボールです
値段は秘密です  ←非売品
```

### 総合演習①: 複雑なオブジェクト

```js: 例①
const character = {
  name: "にんじゃわんこ",
  favorite: {
    food: "ラーメン"
  }
};
console.log(character.favorite);
console.log(character.favorite.food);
```

```text:結果
{food: "ラーメン"}
ラーメン
```

```js:例②
const cafe = {
  name: "Progateカフェ",
  businessHours: {
    opening: "10:00(AM)",
    closing: "8:00(PM)"
  }
};

// 「店名:〇〇」を出力
console.log("店名：" + cafe.name);

// 「営業時間:〇〇から△△」を出力
console.log("営業時間: " + cafe.businessHours.opening + "から" + cafe.businessHours.closing);
```

```text:結果
店名：Progateカフェ
営業時間: 10:00(AM)から8:00(PM)
```

### 総合演習②: オブジェクトの値に配列を用いる

```js:例
const cafe = {
  name: "Progateカフェ",
  businessHours: {
    opening: "10:00(AM)",
    closing: "8:00(PM)"
  },
  // menusプロパティに配列を代入
  menus: ["コーヒー", "紅茶", "チョコレートケーキ"]
};

console.log(`店名: ${cafe.name}`);
console.log(`営業時間:${cafe.businessHours.opening}から  ${cafe.businessHours.closing}`);
console.log("おすすめメニューはこちら");

// for文を用いて配列menusの中身を表示
for (let i = 0; i < cafe.menus.length; i++) {
  console.log(cafe.menus[i]) ;
}
```

```text:結果
店名: Progateカフェ
営業時間:10:00(AM)から8:00(PM)
おすすめメニューはこちら
コーヒー
紅茶
チョコレートケーキ
```

## <font color="SeaGreen">Progate JavaScript Ⅲ</font>

### 関数 function と、関数を定義する

```js:例
const introduce = function() {
  console.log("こんにちは");
  console.log("私はにんじゃわんこです");
}
//関数の呼びだし「定数名();」
introduce();
```

```text:結果
こんにちは
私はにんじゃわんこです
```

### アロー関数: `=>`

```js:例
//「function()」を「() =>」に変える（同じ意味＆同じ使い方なので、結果も同じ）
const introduce = () => {
  console.log("こんにちは");
  console.log("私はにんじゃわんこです");
};
//関数の呼びだし「定数名();」
introduce();
```

```text:結果
こんにちは
私はにんじゃわんこです
```

### 引数（ひきすう）

```js:例①
const 定数名 = (引数名) => {

};
定数名(値);
```

```js:例②
const introduce = (name) => {
  console.log("こんにちは");
  //「`（グレイブアクセント）」を使用。
  console.log(`私は${name}です`);
};
introduce("にんじゃわんこ");
introduce("ひつじ仙人");
```

```text:結果
こんにちは
私はにんじゃわんこです
こんにちは
私はひつじ仙人です
```

### 複数の引数を受け取る関数

```js:例①
const 定数名 = (第1引数, 第2引数, ...) => {

};
定数名(値1, 値2, ...);
```

```js:例②
const introduce = (name,age) => {
  //「`（グレイブアクセント）」を使用。
  console.log(`私は${name}です`);
  console.log(`私は${age}歳です`);
};
//値は「,（コンマ）」で区切る
introduce("にんじゃわんこ",14);
```

```text:結果
私はにんじゃわんこです
私は14歳です
```

```js:例③文字列ではなく数字を値とする場合
const add = (number1, number2) => {
//number1とnumber2を足した値をコンソールに出力
  console.log(number1 + number2);
};
// 引数に5と7を渡して関数を呼び出し
add(5, 7);
```

```text:結果
12
```

### 戻り値（もどりち）〜関数が戻り値を返す〜

```js:例①
const 定数名 = () => {
  return 値;
};
```

```js:例②
const add = (a,b) => {
  return a + b;
};
//aとbを足した値が戻り値として呼び出し元に帰る
```

```js:例③
const add = (a,b) => {
  return a + b;
};
const sum =add(1,3);
console.log(sum);
//結果:4
```

```js:例④
const half = (number) => {
  // numberを2で割った値を戻り値として返す
  return number / 2;
};

// 定数resultを定義する
const result = half(130);

// 「130の半分は〇〇です」となるように出力。「`（グレイブアクセント）」に注意。
console.log(`130の半分は${result}です`);

//結果:130の半分は65です

```

### 戻り値の活用 
```js:例
const check = (number) => {
// numberが3の倍数かどうかを戻り値として返す。3で割ったあまりが０。
return number % 3 === 0;

};

// if文の条件式で、checkを呼び出す
if (check(123)) {
console.log("3の倍数です");
} else {
console.log("3の倍数ではありません");
}
//結果:3の倍数です
```
### スコープ



## <font color="Gold">Progate JavaScript Ⅳ</font>

### クラス (1)

JavaScriptのライブラリ（React,Vue.js）を学ぶ上で重要
　まずはJavaScript Ⅱコースのオブジェクトを復習
```js:例
const user = {name:"にんじゃわんこ",age:14}
console.log(user.age);
//結果:１４
```
オブジェクトの値の部分には関数を用いることもできる。
```text:例
const 定数名 = {
  プロパティ名:() => {
  処理
  }
};

```
```js:例
const user = {
  name:"にんじゃわんこ",
//アロー関数
  greet:() => {
  console.log("こんにちは！");
  }
};
//関数の呼び出し
user.greet();
//結果:こんにちは！
```
```js:例
// 定数animalを定義する
const animal = {
  name:"レオ",
  age:3,
  greet:() => {
  console.log("こんにちは");
  }
};

// animalのnameプロパティの値を出力する
console.log(animal.name);
//結果:レオ

// animalのgreetプロパティの関数を実行する
animal.greet();
//結果:こんにちは

```
### クラス (2)
```text:
//効率よくオブジェクトを作成していくための方法として、最初に「設計図」を用意する方法があります。
//例えばユーザーのデータをいくつも作成する場合、最初に「ユーザーを生成するための設計図」を用意し、
//その設計図をもとにユーザーのデータを生成（量産）していく、といったことができます。
//「設計図」のことをJavaScriptでは「クラス」と呼びます。
//図のように「class クラス名」とすることで新しくクラスを用意できます。なお、クラス名は基本的に大文字から始めるようにしましょう。
```
```text:例
クラス名「Animal」を定義する。クラス名は大文字から始める。
class Animal { 
}
```
### インスタンスの生成
```js:
//クラスから生成したオブジェクトをインスタンスと呼ぶ。


例：クラスからオブジェクトを生成する「new クラス名()」
class Animal { 
}
const animal = new Animal();
//Animalクラスのインスタンス「new Animal();」部分をAnimalインスタンスと呼ぶ。
console.log(animal);
//結果:Animal{}
```
### コンストラクタ(1)コンストラクタについて
```js:
class Animal { 
　　constructor() {
　　　　console.log("こんにちわ！");
　　}
}
const animal1 = new Animal();
const animal2 = new Animal();
```
```text:結果
こんにちわ！
こんにちわ！
```
### コンストラクタ(2)プロパティと値を追加する
```js:
//例①
class Animal { 
　　constructor() {
　　this.name = "レオ";
　　}
}
const animal = new Animal();
console.log(animal.name);
```
```text:結果
レオ
```

```js:
//例②
class Animal {
　　　constructor() {
　　　　　// nameの値に文字列「レオ」を代入
　　　　　this.name = "レオ";
    
　　　　　// ageの値に数値の「3」を代入
　　　　　this.age = 3;
　　　}
}

const animal = new Animal();

// 「名前: 〇〇」となるように出力
console.log(`名前: ${animal.name}`);

// 「年齢: 〇〇」となるように出力
console.log(`年齢: ${animal.age}`);
```
```text:結果
名前：レオ
年齢：３
```
### コンストラクタ(3)インスタンスごとに値を変える

コンストラクタ(2)例②の「レオ」や「３」は毎回同じ値になってしまう
→インスタンスごとに値を設定したい。
コンストラクタでは、「Javascript コースⅢ」で学んだ関数と同じように、引数を受け取ることが可能です。
```js:
//例
class Animal {
　//引数を受け取る
　　　constructor(name,age) {
　　　　　this.name = name;    
　　　　　this.age = age;
　　}
}
const animal = new Animal("レオ", 3);
console.log(`名前: ${animal.name}`);
console.log(`年齢: ${animal.age}`);
```
```text:結果
名前： レオ
年齢： ３
```

### メソッド(1)
メソッドとはそのインスタンスの「動作」のようなものです。名前や年齢などの「情報」はプロパティで追加したのに対して、メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表します。
情報・・・名前：レオ、年齢：３
動作・・・歩く、挨拶をする
```
```js:
//例①
class Animal { 
  constructor(name,age) {

　　}
　　greet() {
　　console.log("こんにちわ");
　　}
}
const animal = new Animal();
console.log(animal.name);
```
```text:結果
レオ
```
### メソッド(2)
```js:
//例
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("こんにちは");
  }
  
  // infoメソッドを追加
  info() {
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

const animal = new Animal("レオ", 3);
animal.greet();

// animalに対してinfoメソッドを呼び出す
animal.info();
```
```text:結果
こんにちは
名前はレオです
3歳です
```












<font color="DeepPink">Progate JavaScript Ⅴ</font>
<font color="Sienna">Progate JavaScript Ⅵ</font>
<font color="BlueViolet">Progate JavaScript Ⅶ</font>
───────
## <font color="Gold">Progate JavaScript Ⅳ</font>
## <font color="DeepPink">Progate JavaScript Ⅴ</font>
## <font color="Sienna">Progate JavaScript Ⅵ</font>
## <font color="BlueViolet">Progate JavaScript Ⅶ</font>
↑↑↑↑↑↑↑ 編集リクエストの内容