はじめに

私は社会人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変数は上書き、再宣言が許可されています。

// var変数は上書き可能
val1 = "val変数";
val1 = "val変数は上書き可能";

// varは再宣言可能
var val1 = "varは再宣言可能";

let

letはvar変数と異なり、上書きは可能ですが再宣言は不可能な変数です。

// let変数は上書き可能
let val2 = "let変数";
val2 = "let変数は上書き可能";

// letは再宣言できない
let val2 = "letを再宣言";
// → Uncaught SyntaxError: Identifier 'val2' has already been declared

const

const変数は上書き、再宣言ともに不可能です。

// constは上書き・再宣言不可能
const val3 = "const変数";
val3 = "constを上書き";
// → Uncaught TypeError: Assignment to constant variable.
const val3 = "constを再宣言";
// → Uncaught SyntaxError: Identifier 'val3' has already been declared

ただしオブジェクトであればconstで宣言したとしても、プロパティは上書き可能です。

const val4 = {
  name: "なまえ",
  age: 30,
};
val4.name = "ナマエ";
val4.address = "Tokyo";

また配列も同様に上書き可能です。

const val5 = ["dog", "cat"];
val5[0] = "bird";
val5.push("monkey");

まとめ

アロー関数

functionで宣言された関数を省略できる

// 従来の関数
function beforeFunc(str) {
  return str;
}
console.log(beforeFunc("hello!!!"));

このように書かれた関数を以下のような省略可能

// アロー関数
const afterFunc = (str) => {
 return str;
}
console.log(afterFunc("hello!!!"));

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

分割代入

配列の値またはオブジェクトのプロパティを個々の変数に代入すること

// 従来の代入
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}.`;

デフォルト値、引数など

const sayHello = (name) => console.log(`こんにちは！${name}さん！`);
sayHello();
// → こんにちは！undefinedさん！

引数に値が渡されない場合、undefinedとして扱われる。
→ バグの原因

関数の引数に何も値が渡されない場合の値を設定できる。

const sayHello = (name="Guest") => console.log(`こんにちは！${name}さん！`);
sayHello();
// → こんにちは！Guestさん！

スプレッド構文

配列を展開する
→ 配列の中身を順番に処理してくれる

const arr1 = [1,2];
console.log(...arr1);
// ...をつけることで配列の値を順番に処理する

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

配列の一部を１つにまとめることも可能

const arr2 = [1,2,3,4,5];
const [num1, num2, ...arr3] = arr2;
console.log(num1);
console.log(num2);
console.log(arr3);

map, filterのメソッド

どちらも配列に対して使用できるメソッド

mapメソッド

配列内の全ての値に対して、順番に任意の処理を実行して新たな配列を取得する

const nameArr = ['tanaka', 'yamada', 'Suzuki'];
newNameArr = nameArr.map(name => `name: ${name}`);
console.log(newNameArr);

filterメソッド

条件に合致する値だけ返す

const numArr = [1,2,3,4,5];
const newNumArr = numArr.filter((num) => {
  return num%2 === 1;
});

三項演算子

ある条件 ? 条件に一致する場合 : 条件に一致しない場合
→ if文を省略できる
　→ ただし可読性が悪くなる

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