モダンJavaScript #JavaScript

はじめに

フロント開発で、知らない記述のコードを見かけることが多くなりました。
サーバサイド開発が主担当なのですが、遅れをとらないように勉強を始めました。
参考になった資料や記事などを元にして、モダンJavaScriptについて、まとめていきます。

モダンJavaScript

変数宣言

var による変数宣言では再宣言できる。複数個所で定義されていると、プログラムの実行順によっては、どこで定義された変数なのかが、判断が難しくなる。
ES2015で追加された let による変数宣言を使えば同じ名前の変数の再宣言を避けられる。定数を宣言する const もES2015で利用可能となった。

constで定義した変数がオブジェクトや配列、関数といったプリミティブ型以外の場合は、内部の値を変更や追加できてしまうので注意が必要。

テンプレート文字列

バッククォートで囲んだ文字列に ${変数} を入れ込む記法。プラス記号で文字列を連結しないので可読性が向上する。

const name = 'World';
console.log(`Hello, ${name}!`);

オブジェクトの分割代入

オブジェクト内の変数の一部取り出しや異なる順番でも取り出せる。
変数名の後ろに別名の変数を定義することもできる。

const person = { id: 1, name: "田中太郎", birthday: "1991/01/09", height: 170, weight: 65 };
const { id, name, birthday } = person;
console.log(`${id}, ${name}, ${birthday}`);
const { weight: kg, height: cm } = person;
console.log(`${cm}, ${kg}`);

配列の分割代入

オブジェクトと違って変数の一部取り出しはできるが順番を変えた取り出しはできない。

const siblings = [ "太郎", "次郎", "三郎", "花子" ];
const [ one, two, three, four ] = siblings;
console.log(`${one}, ${two}, ${three}, ${four}`);

引数のデフォルト値

変数に値がない場合に undefined と表示されるのを防ぐことができる。

// 引数のデフォルト値
const hello = (name = "World") => console.log(`Hello, ${name}`);
hello();

// オブジェクト分割代入のデフォルト値
const person = { firstname: "田中", familyname: "太郎" };
const { gender = "male" } = person;
console.log(`性別: ${gender}`);

スプレッド構文

// 配列要素の展開
const nums = [ 1, 2 ];
const f_sum = (num1, num2) => console.log(num1 + num2);
f_sum(...nums); // 3

// 配列要素のまとめ代入
const nums2 = [ 1, 2, 3, 4, 5 ];
const [num1, ...nums3] = nums2;
console.log(nums3); // [2, 3, 4, 5]

// 配列要素のコピー
const nums3 = [ 1, 3, 5 ];
const nums4 = [...nums3];
console.log(nums4); // [ 1, 3, 5 ]

// 配列要素の結合
const nums5 = [ 7, 9 ];
const nums6 = [ ...nums4, ...nums5 ];
console.log(nums6); // [ 1, 3, 5, 7, 9 ];

// オブジェクトの結合
const score1 = { v1: 1, v2: 2 };
const score1a = {...score1};
console.log(score1a); // { v1: 1, v2: 2 }

const score2 = { v3: 3, v4: 4 };
const score2a = {...score1, ...score2};
console.log(score2a); // { v1: 1, v2: 2, v3: 3, v4, 4 }

オブジェクト定義の省略記法

// 変数名とオブジェクトのプロパティが同じケース１
const id = 1;
const name = "商品";
const product = {
  id: id,
  name: name
};
console.log(product); // { id: 1, name: "商品" }

// 変数名とオブジェクトのプロパティが同じケース２
const id = 2;
const name = "商品２";
const product = {
  id,
  name
};
console.log(product); // { id: 2, name: "商品２" }

配列

map(), filter()

Javaのラムダ式のような記述で配列の要素の加工もできる。

const people = [ "田中", "鈴木", "山田" ];

// 加工して新しい配列を作成
const people2 = people.map((x) => {
  return `${x}さん`;
});

people2.map((name, index) => {
  console.log(`${index+1}: ${name}`);
});

// 奇数にある要素をフィルタリングで取得
const people3 = people2.filter((name, index) => {
  return index % 2 == 0;
});

people3.map((name, index) => {
  console.log(`${index+1}: ${name}`);
});

References

『モダンJavaScriptの基本から始めるReact実践の教科書』じゃけぇ(岡田拓也)
『JavaScriptコードレシピ集』株式会社ICS 池田泰延鹿野壮著