JavaScript

ECMAScript 6を触ってみる – モダンになった文法

投稿日:2017年4月25日 更新日:


WEB+DB PRESS Vol.87は、@t_wadaさんの言うとおりES6を速習するのにとても良い書籍だと思う。個人的には「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」よりも「JavaScriptパターン ―優れたアプリケーションのための作法」の方が良いとは思うものの、どちらも優れた本なので、「JavaScriptパターン」と「WEB+DB PRESS Vol.87 第1特集」とプラスαとして「JavaScript: The Good Parts」を使って全体像をつかむという速習コースの実践をしている。ということで今回は「WEB+DB PRESS Vol.87 第1特集 第3章-モダンになった文法-」を速習する。

BabelはES6のトランスパイラ

詳細は本家サイトにて

Babelを使ってES6をES5にトランスパイルしてみる

npmを初期化する

babelをインストールする

.babelrcに以下を追加する

ES6を記述

以下のコマンドを実行する

ES5にトランスパイルされる

これで、ES6をES5にトランスパイルする環境が整ったので、次からは新しく追加された文法を確認していく

モダンになった文法

アロー関数

ES5

ES6

thisの補足

ES5

ES6

クラスと継承

  • わかりやすいクラス構造になった
  • 組み込みクラスのErrorやArrayなどを継承することができるようになった

ES5でのクラス表現

ES6でのクラス表現

クラスの継承

ES6

オブジェクトリテラルの拡張

プロパティ省略記法

オブジェクトプロパティ名のキー名と値の変数名が等しいばあい、省略記法がつかえるようになった

ES5

ES6

コンピューテッドプロパティ

プロパティのキー名が変数に入った文字列であるとき、一度オブジェクトw生成する必要があったがES6ではキーを角括弧で囲むことで直接変数や式を指定できるようになった

ES5

ES6

メソッド定義

オブジェクトのメソッドをfunctionキーワードを使わずに短く定義できるメソッド定義記法が導入された

ES5

ES6

ここでアロー関数を使うと、thisの補足が発動してしまうのでこのケースではthisを束縛しないメソッド定義記法を使う

letとconstによるブロックスコープ

for分のブロックスコープ

ES5

ES6

constで呈すを宣言

letと同時に導入されてconstを使うことでブロックスコープの定数を宣言できる

関数パラメータの拡張

デフォルトパラメータ

関数の引数のデフォルト値を簡単に指定できるようになった

レフトパラメータ

可変長引数をとる関数を簡単に書けるようになった

スプレッドオペレータ

スプレッドオペレータのドット記法によりシンプルに配列を引数として展開できるようになった

ES5

ES6

分割代入

配列やオブジェクトから構造がマッチするデータを抽出できる機能で、変数への代入と関数引数の指定という2つの場面で使える

変数への分割

イテレータとfor/of文

ES6では汎用的な繰り返し処理用のインターフェースとしてIterableとIteratorが導入された

イテレータを使った反復処理

for/of文

iterの部分にはIterableであればどんなオブジェクトが入っても構わない

スプレッドオペレータと分割代入
スプレッドオペレータと分割代入も、Iterableなオブジェクトを受け付けることができる

スプレッドオペレータ

分割代入

他にもArray,Map、Set、PromiseなどがIterableを受け取るメソッドをもっていて、イテレータはES6で集合データを扱う為の共通基盤となっている。

テンプレートリテラル

文字列を定義する新しいリテラルとしてテンプレートリテラルが導入された

変数の埋込

テンプレートリテラルはバッククオートで囲んだ文字列で、途中に変数を埋め込むことができる

複数行文字列

改行を含む複数行の文字列もそのまま表示できる

タグ付きテンプレート

タグ付きテンプレートとは、テンプレートタグと呼ばれる関数をつかってテンプレートリテラルを変換する仕組み

  • タグ付きテンプレートは、テンプレートリテラルの前にタグを書く
  • タグの実態は普通の関数
  • タグ関数は第1引数に変数埋め込みで分割されたテンプレートリテラルの配列、第2引数移行に埋め込まれる値を受け取る
  • 埋め込まれる値をHTMLエスケープする

テンプレートリテラルの変数埋め込み、複数行テキスト、タグ付きテンプレートを組み合わせることで、さまざまなDSL(Domain Specific Language)が書けるようになる


-JavaScript
-, ,

執筆者:

関連記事

ECMAScript 6を触ってみる – 非同期処理 PromiseとGeneratorによるフロー制御

前回に引き続きJSの速習コースを実践。今回は「WEB+DB PRESS Vol.87 第1特集 第5章-簡潔で柔軟な非同期処理-」を速習する。 PromiseとGeneratorによるフロー制御 これ …

JavaScriptパターン

「JavaScriptパターン」第4章-関数-が面白かったからまとめながら写経した

タイトルにあるようにとても面白かったというのと、JavaScriptパターンの輪読会で第4章「関数」の後半を担当したのでその記録も兼ねて内容まとめながら写経した。 目次 はじめに 4.1 背景 4.2 …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月 …

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1. …

ECMAScript 6を触ってみる – 標準化されたモジュール管理システム

前回に引き続きJSの速習コース実践ラスト。最後は「WEB+DB PRESS Vol.87 第1特集 第6章-標準化されたモジュール管理システム-」を速習する。 これまでのモジュール管理 JavaScr …