【初学者向け】ES6で追加されたJavaScriptの機能をTypeScriptで書く

2021年5月17日2022年11月16日

URLをコピーしました！

いきなりですが、2020年4月にWebエンジニアにジョブチェンジしてこれまではバックエンド開発（PHP）メインの仕事をしてきて、2021年5月に自社開発企業に転職した執筆時現在、

フロントエンド：TypeScript/Vue.js(Nuxt.j)
バックエンド：PHP/Laravel

の開発に携わっているのですが、TypeScript（以下、TS）はこれまでノータッチだったので現在学習中です。

そいうい経緯もあり、この記事ではモダンJavaScriptと（多分）言われているES6の機能をTypeScriptで書いてみようというものです。

どちらかというと発信用というより自己学習用の記事なので、

・TypeScriptの勉強をしてみたい！
・モダンJavaScriptについて知りたい！

このような方に読んでいただけたら良い学習になると思います！

というわけで早速解説していきますね。

参考教材

モダンJavaSciptの基礎から始める挫折しないためのReact入門

モダンJavaScript（ES6）の学習はこちらの『モダンJavaSciptの基礎から始める挫折しないためのReact入門』教材がとてもわかりやすいです。

僕自身、この教材で学習してこの記事を執筆しましたのでぜひ受講してみてください。

総合情報サイトのcoreda!（コレダ!…

【教育・学習】資格・学習総合情報サイト「コレダ！」がお届けする教育・学習における資格・学習の総合情報サイトです。

ES6とは

ES6はECMAScript2015という言い方もします。

ではECMAScriptって何かというとJavaScritptの書き方を定めた規定みたいなもので、その中で2015年に策定されたものをECMAScript2015と言います。

ECMAScript（エクマスクリプト）は、Ecma Internationalのもとで標準化手続きが行われているJavaScriptの規格
https://ja.wikipedia.org/wiki/ECMAScript

それを別名でES6と呼びます。

本記事の趣旨とはズレるのでECMAScriptについての解説はこれくらいにしますのでもっと詳しく知りたいという方はこちらの記事を読んでみてください。

ES6で追加された機能

というわけでここからES6で追加された機能についてまとめていきます。

この記事でご紹介する内容はES6で追加された機能全てを網羅するものではなく、著者自身が学習した範囲の内容ですのでご了承ください。

参考までに、WikipediaにES6で追加された機能が書かれています。

クラス、モジュール、イテレータ、for/ofループ、Pythonスタイルのジェネレータ、アロー関数、2進数および8進数の整数リテラル、Map、Set、WeakMap、WeakSet、プロキシ、テンプレート文字列、let、const、型付き配列、デフォルト引数、Symbol、Promise、分割代入、可変長引数
https://ja.wikipedia.org/wiki/ECMAScript

let、constによる変数宣言

これまで（ES5以前）変数はvarが使われていましたが、letとconstが追加されました。

これらの特徴はこちらです。

変数の種類	再代入	再宣言
let	○	×
const	×	×
var	○	○

let、const、varの特徴

新しく追加されたlet、constについてコードで説明してみます。

let：再代入○、再宣言×

// 宣言
let fruit: string = "apple";

console.log(fruit); // apple

// 再代入可能
fruit = "banana";
console.log(fruit); // banana

// 再宣言できない
let fruit: string = "orange"; // エラー

const：再代入×、再宣言×

// 宣言
const age: number = 30;

console.log(age); // 30

// 再代入、再宣言できない
age = 40; // エラー
const age = 50; // エラー

現在は変数宣言時にはvarではなくletもしくはconstを使うことが推奨されています。

varは色々とガバガバなので使ったらダメ！と思っておきましょう。

アロー関数

アロー関数は関数を簡単に書くことができる書き方です。

アロー関数を使わないES5までの書き方

// function 関数名() {}
function addNumber(num1: number, num2: number): number {
  return num1 + num2;
}

console.log(addNumber(1, 2)); // 3

// const 関数名 = function() {}
const subNumber = function (num1: number, num2: number): number {
  return num1 - num2;
};

console.log(subNumber(3, 1)); // 2

アロー関数

const addNumber = (num1: number, num2: number): number => {
  return num1 + num2;
};

console.log(addNumber(1, 2)); // 3

// 処理が1行の場合は{}とreturnを省略できる
const subNumber = (num1: number, num2: number): number => num1 - num2;

console.log(subNumber(3, 1)); // 2

アロー関数の書き方は大きく3つありますがそれらは以下の書き方です。

// 基本形
const 関数名 = (変数) => {
  // 処理
};

// 処理が1行の場合は{}とreturnを省略できる
const 関数名 = (引数) => 処理;

// 変数が1つの場合は()を省略できる
const 関数名 = 引数 => 処理;

繰り返しになりますが、引数の2倍を返す関数をアロー関数で書いてみます。

// 3つとも同じアロー関数

const doubleNumber = (num: number): number => {
  return num * 2;
};

const doubleNumber = (num: number): number => num * 2;

const doubleNumber = num: number: number => num * 2; // TypeScriptで型宣言するとエラーになりました
const doubleNumber = num => num * 2; //型宣言しなければ書ける

僕は最近このアロー関数をしっかり見始めたのでまだまだ慣れないのですが、Vue.js（Nuxt.js）のコードで結構見かける（React.jsでも結構使うらしいです）ので少しずつ慣れていこうと思います。

テンプレート文字列

テンプレート文字列を使うことで変数を用いた文字列の連結がかなり楽になります。

テンプレート文字列を使わない

これまでの場合では以下のように+で文字列と変数を連結していました。

const name: string = "花子";
const age: number = 24;

// +で変数と文字列を連結する
const selfIntroduction: string = name + "さんは" + age + "歳です。";

console.log(selfIntroduction); // 花子さんは24歳です。

テンプレート文字列を使う

これをテンプレート文字列を使って書き換えます。

const name: string = "花子";
const age: number = 24;

// テンプレート文字列を使用
const selfIntroduction: string = `${name}さんは${age}歳です。`;

console.log(selfIntroduction); // 花子さんは24歳です。

テンプレート文字列の基本的な使い方はこちらです。

文字列をバッククウォート（`）で囲む
変数は${変数}と書く

これはとても便利ですね。何よりコードの可読性がかなり上がります。

ちなみにですが、以下のコードのように${}の中で演算することもできます。

const name: string = "花子";
const age: number = 24;

// ${}の中で演算できる
const selfIntroduction: string = `${name}さんは来年${age + 1}歳です。`;

console.log(selfIntroduction); // 花子さんは来年25歳です。

分割代入

分割代入はオブジェクトや配列の要素をそれぞれ変数に代入する時に役立つ代入方法（変数宣言方法）です。

実際にコードで基本的な書き方を見てみます。

/**
 * オブジェクト
 */
const personalInfo = {
  name: "ゆーたろー",
  age: 29
};
// 分割代入
const { name, age } = personalInfo;

console.log(`私の名前は${name}で、年齢は${age}歳です`);
// 私の名前はゆーたろーで、年齢は29歳です

/**
 * 配列
 */
const fruitInfo = ["バナナ", 200];
// 分割代入
const [name, price] = fruitInfo;

console.log(`${name}は${price}円です`);
// バナナは200円です

オブジェクトを例にすると分割代入を使う、使わない場合の書き方の違いはこちらです。

const personalInfo = {
  name: "ゆーたろー",
  age: 29
};

// 分割代入を使わない
const name = personalInfo.name;
const age = personalInfo.age;

// 分割代入を使う
const { name, age } = personalInfo;

// オブジェクトのプロパティ名と揃えないとエラーになる
const { a, b } = personalInfo; // エラー

余談ですが、オブジェトを定義するときに型を厳しく制限したい場合はinterfaceを使って書きます。

// interface定義
interface personalInfoInterface {
  name: string;
  age: number;
}

// 型定義でinterfaceを設定する
// OK
const personalInfo: personalInfoInterface = {
  name: "ゆーたろー",
  age: 29
};

// NG（ageはnumber型のみ許可される）
const personalInfo: personalInfoInterface = {
  name: "ゆーたろー",
  age: "29歳" // エラー
};

引数のデフォルト値

関数の引数にデフォルト値を設定することができます。

PHPだとこれは見慣れているので他の言語も共通なのかと思っていましたが、JavaScriptの場合はES6からなんですね。

実際にコードを書きます。
同じくES6で追加されたアロー関数、テンプレート文字列を使っています。

// デフォルト値の設定なし
const doubleNumber = (num: number): string => `${num}の2倍は${num * 2}です!`;

console.log(doubleNumber(3)); // 3の2倍は6です!

// デフォルト値設定
const doubleNumber = (num: number = 4): string =>`${num}の2倍は${num * 2}です!`;

console.log(doubleNumber()); // 4の2倍は8です!

// 型宣言が無い方がわかりやすいと思うので載せておきます
const doubleNumber = (num = 4) => `${num}の2倍は${num * 2}です!`;

console.log(doubleNumber()); // 4の2倍は8です!

スプレッド構文

スプレッド構文は僕的にわかりやすく説明すると『配列の中身を順番に取得する』です。

これもコードで説明した方が早そうなのでコードを書きます。

const numArray: number[] = [1, 10, 100];

console.log(...numArray); // 1 10 100

このように配列numArrayの中身を1つずつ取得してconsole.logでコンソールに出力しています。

スプレッド構文は関数の引数にも適用することができます。

const numArray: number[] = [1, 10, 100];

const sumNumber = (num1: number, num2: number, num3: number): number =>
  num1 + num2 + num3;

console.log(sumNumber(numArray[0], numArray[1], numArray[2])); // 111
// 関数の引数に適用
console.log(sumNumber(...numArray)); // 111

スプレッド構文は分割代入と組み合わせてこのような使い方もできます。

const fruitsArray: string[] = ["apple", "banana", "orange", "melon", "peach"];

// 分割代入＋スプレッド構文
// ３つ目の要素（fruitsArray[2]）以降は全てfruit3に代入
const [fruit1, fruit2, ...fruit3] = fruitsArray;

console.log(fruit1); // apple
console.log(fruit2); // melon
console.log(fruit3); // ["orange", "melon", "peach"]

// これはエラーになる
const [fruit1, ...fruit2, fruit3] = fruitsArray;

分割代入の途中でスプレッド構文を使うエラーになります。最後に使わないといけません。

クラス定義

JavaScriptはES6からRubyやPHPなどのオブジェクト指向プログラミング言語と同じようにクラスを定義できるようになりました。
（厳密にはPHPはオブジェクト指向プログラミング言語ではありませんが…）

書き方もかなり似ています。

class animal {
  // プロパティ
  animalType: string;
  voice: string;

  // コンストラクタ
  constructor(animalType: string, voice: string) {
    this.animalType = animalType;
    this.voice = voice;
  }

  // メソッド
  cry() {
    return `${this.animalType}は${this.voice}と鳴きます。`;
  }
}

// animalクラスのインスタンス作成
const dog = new animal("犬", "ワン!");
console.log(dog.cry()); // 犬はワン!と鳴きます。

構成としても他のオブジェクト指向プログラミング言語と同じく