【Javascript】JSフレームワーク等を学ぶなら覚えておきたいコト

# はじめに
私は社会人5年目、SIerでエンジニアとしてWeb系の開発をおこなっています。

現在フロントエンドについて学んでおり、特にJavascriptについて学んでいますが、
ReactやVue.jsなどJavascriptのフレームワークを使うのであれば、
「これは知っておくといいコトだな」と思ったものをまとめました。

私と同じようにこれからフロントエンドについて学ぶ方の参考になれば嬉しいです。

# この記事の対象読者
* JavascriptやJSフレームワークを勉強中の人
* ES6の文法について学び直したい人

# おことわり
学んだ内容の理解を深めるために、自分なりに言語化していますが、誤った内容が含まれる場合があります。
見つけた場合は __優しく__ ご指摘いただけると幸いです。

# ES2015(ES6)
ECMAScriptの６番目の仕様です。
覚えづらいですが、ES2015であれば末尾の数字+1をとってES6と総称されることもあります。

# var, let, constの変数
ES6以前であれば変数宣言時にvarを使っていました。
ES6ではvarに加えてletとconstが追加されました。
## var
お馴染みの変数宣言です。
var変数は上書き、再宣言が許可されています。
```Javascript
// var変数は上書き可能
val1 = "val変数";
val1 = "val変数は上書き可能";

// varは再宣言可能
var val1 = "varは再宣言可能";
```
## let
letはvar変数と異なり、上書きは可能ですが再宣言は不可能な変数です。
```Javascript
// let変数は上書き可能
let val2 = "let変数";
val2 = "let変数は上書き可能";

// letは再宣言できない
let val2 = "letを再宣言";
// → Uncaught SyntaxError: Identifier 'val2' has already been declared
```
## const
const変数は上書き、再宣言ともに不可能です。
```Javascript
// constは上書き・再宣言不可能
const val3 = "const変数";
val3 = "constを上書き";
// → Uncaught TypeError: Assignment to constant variable.
const val3 = "constを再宣言";
// → Uncaught SyntaxError: Identifier 'val3' has already been declared
```

ただしオブジェクトであればconstで宣言したとしても、プロパティは上書き可能です。
```Javascript
const val4 = {
  name: "なまえ",
  age: 30,
};
val4.name = "ナマエ";
val4.address = "Tokyo";
```

また配列も同様に上書き可能です。
```Javascript
const val5 = ["dog", "cat"];
val5[0] = "bird";
val5.push("monkey");
```

## まとめ

| 変数 | 上書き | 再宣言 | 備考 |
|:-:|:-:|:-:|:-:|
| var | ○ | ○ ||
| let | ○ | × ||
| const | △ | △ |オブジェクトのプロパティ、配列は上書き可能|


# アロー関数
functionで宣言された関数を省略できる

```Javascript
// 従来の関数
function beforeFunc(str) {
  return str;
}
console.log(beforeFunc("hello!!!"));
```
このように書かれた関数を以下のような省略可能
```Javascript
// アロー関数
const afterFunc = (str) => {
 return str;
}
console.log(afterFunc("hello!!!"));

// {}内が１行であれば{}を省略可能
// このときreturn省略しなくてはいけない = 文ではなく式である必要があるため
const afterFunc2 = (str) => str;
console.log(afterFunc2("hello!!!"));
```

# 分割代入
配列の値またはオブジェクトのプロパティを個々の変数に代入すること
```Javascript
// 従来の代入
const myProfile = {
  name:"Suzuki",
  age: 26
};
const message = `My name is ${myProfile.name}. My age is ${myProfile.age}.`;

// 分割代入を使った場合
const { name, age } = myProfile;
const message2 = `My name is ${name}. My age is ${age}.`;

// 従来の代入（配列）
const myArray = ['Suzuki',26];
const message3 = `Name: ${myArray[0]}, Age: ${myArray[1]}.`;

// 分割代入を使った場合
const [ name2, age2 ] = myArray;
const message4 = `Name: ${name2}, Age: ${age2}.`;
```

# デフォルト値、引数など
```Javascript
const sayHello = (name) => console.log(`こんにちは！${name}さん！`);
sayHello();
// → こんにちは！undefinedさん！
```
引数に値が渡されない場合、undefinedとして扱われる。
→ バグの原因

関数の引数に何も値が渡されない場合の値を設定できる。
```Javascript
const sayHello = (name="Guest") => console.log(`こんにちは！${name}さん！`);
sayHello();
// → こんにちは！Guestさん！
```

# スプレッド構文
配列を展開する
→ 配列の中身を順番に処理してくれる
```Javascript
const arr1 = [1,2];
console.log(...arr1);
// ...をつけることで配列の値を順番に処理する

const sumFunc = (num1, num2) => console.log(num1 + num2);
// 下２つの結果は同じ
sumFunc(arr1[0], arr1[1]);
sumFunc(...arr1);
```

配列の一部を１つにまとめることも可能
```Javascript
const arr2 = [1,2,3,4,5];
const [num1, num2, ...arr3] = arr2;
console.log(num1);
console.log(num2);
console.log(arr3);
```

# map, filterのメソッド
どちらも配列に対して使用できるメソッド
## mapメソッド
配列内の全ての値に対して、順番に任意の処理を実行して新たな配列を取得する
```Javascript
const nameArr = ['tanaka', 'yamada', 'Suzuki'];
newNameArr = nameArr.map(name => `name: ${name}`);
console.log(newNameArr);
```

## filterメソッド
条件に合致する値だけ返す
``` Javascript
const numArr = [1,2,3,4,5];
const newNumArr = numArr.filter((num) => {
  return num%2 === 1;
});
```

# 三項演算子
ある条件 ? 条件に一致する場合 : 条件に一致しない場合
→ if文を省略できる
　→ ただし可読性が悪くなる
``` Javascript
const val6 = 1 > 0 ? true : false;
console.log(val6); // true
// if-elseを1行で書ける
```


# さいごに
ES6におけるJavascriptの仕様についてまとめました。
私と同じように勉強中の方のためになれば幸いです。

# 参考

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

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment