Javascript ES6 まとめ①

## 変数定義

```javascript
let 変数名;
```

**注意点**

- 英単語を使用
- 複数単語を使用する場合は大文字で区切る
- 開始文字に数字は使えない
- ローマ字表記は使用可能だが望ましくない
- 日本語表記は可能だが望ましくない

**例**

```javascript
○ let name;      // ローマ字使用
○ let firstName; // 大文字で区切る
△ let namae;     // ローマ字表記はよくない
△ let 名前;     　// 日本語表記はよくない 
× let 1name;     // 先頭数字は使用不可
```

## 定数

```javascript
const 定数名;
```

**注意点**

- 変数と違い代入した値を変更できない。更新しようとした場合エラーは発生。

**例**

```javascript
○ const PI = 3.14;
○ const philippineIslands = 3.14;
△ const enshuritu = 3.14;
△ const 円周率 = 3.14;
× const 1PI = 3.14;
```

## テンプレートリテラル

**テンプレートリテラルを用いない連結**

```javascript
let age = 30;
const name = "Qiita";
console.log(name + "さんは" + age + "歳です"); // => Qiitaさんは30歳です
```

**テンプレートリテラルを用いた連結**

```javascript
let age = 30;
const name = "Qiita";
console.log(`${name}さんは${age}歳です`); // => Qiitaさんは30歳です
```
※出力対象をバッククォートを使う

## if文

```javascript
if (条件1 && 条件２) {
  処理;
} else if (条件3 || 条件４) {
  処理;
} else {
  処理;
}
```
## switch文

```javascript
let rank = 1;

switch (rank) {
  case 1:
    console.log("ランクはSです");
    break;

  case 2:
    console.log("ランクはAです");
    break;

  case 3:
     console.log("ランクはBです");
   break;

  case 4:
     console.log("ランクはCです");
   break;

  default:
    console.log("ランクはありません");
  break;
}

```

**注意**
- `case`定義行の末尾は`:`コロン
- `break`を指定することでswitch文を抜ける
- `default`を指定することでどの`case`にも当てはまらなかった場合の処理を記述する

## while文

**書式**

```javascript
while (条件;) {
  処理;
}

```


**例**

```javascript
let num = 0;
const limit = 100;

while (num <= limit) {
  num += 1;
}
console.log(num); // => 101
```
while文の末尾には`;`セミコロンを付けない

## for文

**書式**

```javascript
for (変数の定義; 条件; 処理) {
  処理;
}
```

**例**

```javascript
for (let num = 0; num <= 10; num++) {
  処理;
}
```
while文の末尾には`;`セミコロンを付けない

## 配列を作る

```javascript
let prefecture = ["大阪", "京都", "兵庫", "和歌山", "滋賀", "奈良"];
const fruits = ["りんご", "ばなな", "ぶどう", "レモン", "オレンジ"];
```

## ループで配列を回す

```javascript
let prefecture = ["大阪", "京都", "兵庫", "和歌山", "滋賀", "奈良"];
for (let i = 0; i < prefecture.length; i++){
  console.log(prefecture[i]);
}
/*
== 出力結果 ==
大阪
京都
兵庫
和歌山
滋賀
奈良
*/
```

## オブジェクト

```javascript
let user = {name: "taro", age: "15"}
const company = {name: "qiita", address: "〇〇〇〇"}

console.log(user.name); // => taro
```

## オブジェクトを持つ配列

```javascript
const users = [
  {name: "ichiro", age: "20"},
  {name: "jiro", age: "25"},
  {name: "taro", age: "35"}
];
console.log(users[1].name); // => jiro
```
## 関数

```javascript
const greet = function() {
  console.log("こんにちわ");
}

// 呼び出し
greet(); // => こんにちわ
```

## アロー関数/引数/戻り値/スコープ

```javascript
const greet = () => {
  console.log("おはよう");
}

//呼び出し
greet(); // => おはよう

// -------- 引数 ----------

const introduce = (name, age) => {
  console.log(`私の名前は${name}、${age}歳です`);
}

// 呼び出し
introduce("佐藤", 30); // => 私の名前は佐藤、30歳です

// -------- 戻り値 ----------

const double = (number) => {
  return number * 2 
}
const result = double(5);

console.log(result); // => 10

// 真偽値
const check = (number) => {
  return number % 3 === 0;
}

if (check(30)) {
  console.log("3の倍数です");
} else {
  console.log("3の倍数ではない");
}

// -------- スコープ ----------

const name = "佐藤";

const greet = (name) => {
  console.log(私は`${name}です`);
}

greet("田中"); // 私は田中です

greet(name); // 私は佐藤です
```
## クラス/定義/オブジェクト/インスタンス

```javascript

// -------- 例 ----------
const person = {
  name: "佐藤",
  age: 30,
  greet: () => {
    console.log("こんにちは！");
  }
};

// 呼び出し
console.log(person.name); // => 佐藤
console.log(person.age); // => ３０
person.greet // => こんにちは！


// -------- 定義/オブジェクト/インスタンス ----------

// Userクラス定義
class User {
}

// userオブジェクトにUserクラスのインスタンスを代入
const user = new User();

// Userクラスのインスタンスが格納されている
console.log(user); // => User {}
```

## クラス/constructor(コンストラクタ)

```javascript
class User {
  // constructor内の処理はUserクラスのインスタンスが生成された直後に実行される
  constructor() {
    console.log("Userクラスのインスタンス生成");
  }
}

const user1 = new User(); // => Userクラスのインスタンス生成
const user2 = new User(); // => Userクラスのインスタンス生成
```

## クラス/this

```javascript
class User {
  constructor() {
    this.name = "user1";
    this.age = 25;
  }
}

const user = new User();

console.log(user.name); // => user1
console.log(user.age); // => 25
```

## クラス/this(引数)

```javascript
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const user = new User("ユーザー1", 20);

console.log(user.name); // => ユーザー1
console.log(user.age); // => 20
```

## クラス/メソッド

```javascript
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`私は${this.name}、${this.age}です`);
  }
}

const user = new User("ユーザー1", 20);

user.greet();
```

## クラス/メソッド内でメソッド呼び出し

```javascript
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet () {
    console.log("こんにちは");
  }

  info() {
    this.greet();
    console.log(`私は${this.name}、${this.age}です`);
  }
}

const user = new User("ユーザー1", 20);

user.info();
```


## クラス/継承

```javascript

//Animalクラス定義
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("こんにちは！");
  }

  info() {
    this.greet();
    console.log(`私は${this.name}、${this.age}歳です`);
  }
}

// Animalクラスを継承したDogクラスを定義
class Dog extends Animal {
  getHumanAge() {
    return this.age * 7;
  }
}

const dog = new Dog("ドッグ", 4);
dog.info();

const humanAge = dog.getHumanAge();
console.log(`人間年齢で${humanAge}です`); // => 人間年齢で28歳です
```

## クラス/constructorオーバーライド super();

```javascript
class Item {
  constructor(name) {
    this.name = name;
  }
  info() {
    console.log(`${this.name}です`);
  }
}

class Pc extends Item {
  constructor(name, type) {
    super(name); // super();で親クラスのconstructorを呼び出し
    this.type = type;
  }
 
  info() {
    console.log(`商品${this.name}は${this.type}商品です`);
  }
}

const pc = new Pc("MacPC", "家電");

pc.info(); // => 商品MacPCは家電商品です
```

## ファイルのimport(インポート)/export(エクスポート)

```javascript:user.js
class User {
}
export default User;
// Userクラスを他のファイルでも使用可能にする設定
```

```javascript:script.js
import User from "./user";
// ファイルuser.jsを読み込みUserクラスを使えるようにする設定
```

【注意点】

- パス指定の拡張子.jsは省略
- `import`するだけでは読み込めない。
- 呼び出し元で`export`をする必要がある。

## 値のimport(インポート)/export(エクスポート)

```javascript:data.js
const data1 = "data1";

export default data1; // 定数data1を他のファイルでも使えるようにする設定
```

```javascript:script.js
import data1 from "./data" // data.jsで定義された定数data1を使えるようにする設定
```

【注意点】

- `export default`は1ファイル1つの値のみ
- `export default`を２つ定義した場合`SyntaxError`が発生

```javascript
const data1 = "data1";
const data2 = "data2";

export default data1;
export default data2; // SyntaxError: data.js: Only one default export allowed per module.
```

## 名前付きimport(インポート)/export(エクスポート)

```javascript:data.js
const data1 = "data1";
const data2 = "data2";

export {data1, data2}; // 定数`data1`と`data2`を他のファイルで使えるようにする設定
```

```javascript:script.js
import {data1, data2} from "./data"; // data.jsの定数data1とdata2をscript.jsで使えるようにする設定
```

## パッケージのimport

```javascript
//import 定数名 from "パッケージ名";
import chalk from "chalk"; // chalkは出力する文字の色を変更できる

console.log(chalk.yellow("黄色")) // => 出力された文字の色が黄色で表示される
console.log(chalk.bgYellow("黄色")) // => 出力された文字の背景色が黄色で表示される
```
# メソッド:配列

## forEach

```javascript
const numbers = [1, 2, 3];
numbers.forEach((number) => {console.log(number)});

// 長いコードを書く時
numbers.forEach((number) => {
  console.log(number)
});

//出力結果どちらも
1
2
3
```

## find

```javascript
const numbers = [2, 9, 6, 5];

const foundNumber = numbers.find((number) => {
  return number > 6;
});
console.log(foundNumber); // => 9

const notFoundNumber = numbers.find((number) => {
  return number === 1;
});
console.log(notFoundNumber); // => undefined

// -------------------- オブジェクト --------------------
const users = [
  {name: "user1", age: 10},
  {name: "user2", age: 20},
  {name: "user3", age: 30}
]

const foundUser = users.find((user) => {
  return user.name === "user2";
});

console.log(foundUser); // => {name: "user2", age: 20}
```

## filter

```javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const addNumbers = numbers.filter((number) => {
  return number % 3 === 0;
});

console.log(addNumbers); // => [ 3, 6, 9 ]

// -------------------- オブジェクト --------------------
const users = [
  {name: "user1", age: 10},
  {name: "user2", age: 20},
  {name: "user3", age: 30}
]

const underThirty = users.filter((user) => {
  return user.age < 30;
});

console.log(underThirty);
// => [ { name: 'user1', age: 10 }, { name: 'user2', age: 20 } ]
```

## map

```javascript
const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); //=> [ 2, 4, 6, 8 ]

// -------------------- オブジェクト --------------------
const names = [
  {firstName: "first1", lastName: "last1"},
  {firstName: "first2", lastName: "last2"},
  {firstName: "first3", lastName: "last3"},
  {firstName: "first4", lastName: "last4"}
];

const fullNames = names.map((name) => {
  return `${name.firstName} ${name.lastName}`;
});

console.log(fullNames); // => [ 'first1 last1', 'first2 last2', 'first3 last3', 'first4 last4' ]
```

**map: 配列の全ての要素に同じ処理をして、処理結果を集めた新しい配列を作る**