React,Vue.jsの前にJavaScriptを習得すべし！(テンプレート文字列、アロー関数、分割代入{}、デフォルト値=,スプレッド構文)

# テンプレート文字列
今までの書き方より楽になりました。

```js
const name = "ルフィ";
const age = 19;

const man = `俺は${name}だ！。今${age}で`;
console.log(man);
//俺はルフィだ！。今19歳だ
```
```\nはJavaScriptの改行```です。
```js
const name = "ルフィ";
const age = 19;

const man = `俺は${name}だ！。今${age}歳で\n海賊王になる男だ`;
console.log(man);

//俺はルフィだ！。今19で
//海賊王になる男だ
```

# アロー関数
アロー関数は```=>```を使います。

```js
const arrow = (str) => {
  return str;
};
console.log("func2です");

//func2です 
```


```js
const arrow = (num1, num2) => {
  return num1 + num2;
};
console.log(arrow(100, 200));

//300
```

```js
function fn(number) {
  return number * 20;
}

console.log(fn(10));

const Arrow = (number) => {
  return number * 20;
};
console.log(Arrow(10));

//200
//200
```

### returnの省略法
***returnを省略して書く***ことができます。


```js
//const arrow = (str) => {
//  return str;
//};
//console.log(arrow("func2です"));

const arrow = (str) => str;
console.log(arrow("func2です"));
//func2です
```

```js
//const Arrow = (number) => {
//  return number * 20;
//};
//console.log(Arrow(10));

const Arrow = (number) => number * 20;
console.log(Arrow(10));
//200
```

```js
const fn_Arrow_Object = (number) => ({
  result: number * 20,　//こう書く場合は()を使う
});

console.log(fn_Arrow_Object(10));
```
結果は
![スクリーンショット 2023-03-23 0.58.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/05e390dd-23f0-e78f-e741-7dba4e11d0e5.png)

⚫︎補足
```引数は１つなら()を省略しても大丈夫```です。


# 分割代入{}
***配列やオブジェクトから特定の要素を取り出す書き方***です。
色々な書き方を見ていきます。

まずは基本的な書き方です。
```index.js
const pirates = {
  name: "ルフィ",
  age: 19
};

const man = `俺は${pirates.name}です。年齢は${pirates.age}歳だ`;
console.log(man);

//俺はルフィです。年齢は19歳だ 
```

```index.js
const pirates = ["ゾロ", 21];

const man = `俺は${pirates[0]}だ!年齢は${pirates[1]}だ`;
console.log(man);

//俺はゾロだ!年齢は21だ
```


```js
const pirates = ["ゾロ", 21];

const man = `俺は${pirates[0]}だ!年齢は${pirates[1]}だ`;
console.log(man);

const [name, age] = pirates;
const man2 = `俺は${name}だ！年齢は${age}だ`;
console.log(man);

//俺はゾロだ!年齢は21だ
//俺はゾロだ!年齢は21だ
```
```js
const [fire, , grass] = ["炎タイプ", "水タイプ", "草タイプ"];
console.log(fire);
console.log(grass);
//"炎タイプ"
//"草タイプ"
```

```js
const { water, fire } = {
  fire: "リザードン",
  grass: "フシギバナ",
  water: "カメックス",
};
console.log(fire);
console.log(water);
//リザードン
//カメックス
```
基本的な形でした。この後は***関数に関する分割代入***です。

```js
const array = ["UK", "England", "London"];
const objAddress = { state: "UK", nation: "England", city: "London" };

const fnArray = ([state, nation, city]) => {
  console.log("---配列---");
  console.log(`country: ${state}`);
  console.log(`state: ${nation}`);
  console.log(`city: ${city}`);
};

//---配列---
//country: UK
//state: England
//city: London
```

```js
const array = ["UK", "England", "London"];
const objAdd = { state: "UK", nation: "England", city: "London" };

const fnObj = ({ state, nation, city }) => {
  console.log("---オブジェクト---");
  console.log(`state: ${state}`);
  console.log(`nation: ${nation}`);
  console.log(`city: ${city}`);
};

fnObj(objAdd);
//---オブジェクト---
//state: UK
//nation: England
//city: London
```

# デフォルト値

```js
const sayHello = (name = "悟空") => console.log(`オッス!オラは${name}だ`);
sayHello();
//オッス!オラは悟空だ 
```



# スプレッド構文
```...を使う構文```です。
まずは配列で展開していきます。この構文は***配列を順番に処理***していきます。
手で色々動かしていってみてください。

```js
const arr1 = [10, 20];
console.log(arr1);
console.log(...arr1);

//[10, 20]
//10
//20
```

```js
const arr1 = [10, 20];
const sum = (score1, score2) => console.log(score1 + score2);
sum(arr1[0], arr1[1]);
sum(...arr1);

//30
```

***配列のコピーと結合***です。

```js
const array4 = [100, 300];
const array5 = [500, 800];

const array6 = [...array4];
console.log(array6);

const array7 = [...array4, ...array5];
console.log(array7);

//[100, 300]
//[100, 300, 500, 800]
```
配列とコピーをします。
```js
const array4 = [100, 300];
const array5 = [500, 800];

const array8 = array4;
array8[0] = 100;
console.log(array8);

// [100, 300]
```

```js
//配列コピー
const array4 = [100, 300];
const array5 = [500, 800];

const array6 = [...array4];
//array6[0] = 100;
console.log(array6);
console.log(array4);
// [100, 300]
// [100, 300]

```
もう少し使ってみましょう。
```main.js
const nums = [300, 100, 400, 1000, 500, 150, 200, 600];

const result = Math.max(...nums); //max最高値を出力 minにすると最低値
console.log(result);
//1000
```

```main.js
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1];

console.log(newArr);
```
![スクリーンショット 2023-04-01 16.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/9a8e2611-59ac-2132-1494-190a72289e2c.png)

```main.js
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1];
let newArr1 = arr1;
newArr.push(4);

console.log(newArr);
```

![スクリーンショット 2023-04-01 16.10.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/8c9cfa7c-f342-5cb5-70a2-c03eeaa267cd.png)


```main.js
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr1 = arr1;
let newArr = [...arr1, 10, ...arr2];
console.log(newArr);

//(7) [1, 2, 3, 10, 4, 5, 6]
```

```main.js
const obj = {
  name: "Tom",
  age: 22,
};
const newObj = { ...obj };
newObj.name = "John";

console.log(newObj, obj);
```
![スクリーンショット 2023-04-01 16.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/4edf4c36-e54d-4e8f-49e5-71340f9c5072.png)

```main.js
const resultA = (...argA) => console.log(argA);
resultA(10, 50);

const resultB = (n, ...argB) => console.log(argB);
resultB(10, 30, 40);
```
![スクリーンショット 2023-04-01 16.19.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/dd004f55-efab-bee4-7743-7e0a5a603381.png)




実際に動かしてみてください。


# 資料

https://www.udemy.com/course/modern_javascipt_react_beginner/

https://www.udemy.com/course/react-complete-guide/