2020.12.04

ざっくり ECMAScript 2015

ざっくりと ES2015 のおさらいをしたい人向け。オカタい説明は mdn さんあたりにおまかせするとして、ゆるっとざっくり気楽にサクッとコードベースでおさらい。ES2015 は Promise や クラス、let や const、アロー関数やイテレーターやジェネレーターなど、多くの機能が追加されたよ

環境構築

  • MacOS High Sierra
  • ふる〜い MBP 使ってます
  • nvm, ndenv, nodebrew のどれでもいいので node が動く環境を用意
  • VSCode 使ってます。拡張はお好みで。
  • node.js のバージョンは v14.7.0
  • 適当なディレクトリを掘って、index.js を用意しています (ファイル名はお好みで)
  • 動作確認は $ node index.js って叩いてます

最小限で動かすだけならこれだけでおっけいです。ここらへんの準備も面倒ならば codepen だの JSFiddle だの REPL だのを使ってもおk

es2015

es2015 は以下のような機能が追加されている(参考 Wikipedia ECMAScript

クラスモジュールイテレータfor/ofループ、Pythonスタイルのジェネレータ、アロー関数、2進数および8進数の整数リテラル、MapSetWeakMapWeakSet、プロキシ、テンプレート文字列letconst、型付き配列、デフォルト引数SymbolPromise分割代入可変長引数

この中でも主だったものを取り上げておきます。

let, const

letは再代入可能な変数宣言に使用、constは再代入不可能な変数宣言に使うよ

Class

classのコンストラクタは constructor() 呼んでインスタンスの初期化。

プロパティの初期化、インスタンスメソッド、ゲッター、セッター、スタティックメソッド、スタティックプロパティ、継承() あたりのサンプルも載せておきます(サンプルコードの質の低さにはつっこまない約束)

Promise

Promise は以下の大きな3つの前提を把握しておくと理解が早いです

  • Promise を使うことによって処理を任意のタイミングで実行するようコントロールできる
  • Promise は new を使ってインスタンスを作る。引数には excutor と呼ばれる関数を渡す
  • executor 関数は、Promise の実装から resolve関数をreject関数を受け取る
  • Promise は「Pending (保留中)」「Fulfilled (resolve 成就)」「Rejected (reject 却下)」といった状態を持つ
  • Pending は Fulfilled でも Rejected でもない状態

めっちゃわかりやすい例

以下の処理の結果は御存知の通り、setTimeout関数は非同期処理のため渡した関数の完了を待たずに次の処理に移行しちゃう。したがってconsole.logで吐き出されるのは空のオブジェクトだよ

Promise と then( )

Promise を使った例。then( ) は対象のPromiseが成功、及び失敗した場合のコールバック関数を受け、resolve( )、reject( )に応じたどちらかを実行。このコードは成功を期待した時のコード。

then( ) の引数に、resolve 時の処理と、reject 時の両方の処理を設定した場合の例

catch( )

catch( ) は Promise が reject された時にのみ呼ばれるよ。thenでゴリ押さないでこっちで書いたほうがお利口さん。

メソッドチェーン

then( )、catch( ) はメソッドチェーンで書ける。ついでに then( )はいくつでも書くことができ、書いた順に処理されるよ

Promise.all( )

Promise.all( ) の使い所は、いくつかの非同期処理をひとまとめにし、すべての処理の結果に応じた処理を行いたい場合に使うシーンを想像するとわかりやすいよ

一つでも reject された時の処理は catch( ) でつなげてコールバックで処理

ざっくりPromiseの例を載せたけど、詳しく知りたかったら MDNJavaScript Primer あたりを掘ってみるといいかも

アロー関数

アロー関数は、=> を使った匿名関数を定義するための新しい構文だよ。とりあえずコード。

ってちんぷんかんぷんだと思うので説明するよ

  • 引数は ( ) で囲う。但し、引数が1つの場合にのみ ( ) は省略可能
  • 処理の本体は { } で囲う。但し、return 文のみが本体ならば return と { } は省略可能
  • 次のコードの fn と fnc は一緒の意味になるよ

function で定義した関数は暗黙的に this が書き換えられたりするんだけど、アロー関数はそういった挙動がないよ。(っていうと誤解を招きそうだから補足するとアロー関数内のthisは定義時に決まるよ)

stdFn は function で定義されているので、this が obj を参照しているよ。arrowFn は暗黙的に this を書き換えてないのでグローバルオブジェクトを参照しにいく。obj.t と一緒。(ブラウザで実行するとWindowオブジェクトを参照)

module の import / export

export で 関数やオブジェクト、クラスやプリミティブな値を持つ変数などをエクスポートできるよ。また export には 名前付きのエクスポートとデフォルトエクスポートがあるよ。

  • 名前付きエクスポート:1 つのモジュールで 0 個以上エクスポートできる
  • デフォルトエクスポート:1 つのモジュールで 1 つエクスポートできる

名前付きエクスポート (named export)

定義済みのもののエクスポートや定義時にエクスポートの設定ができるよ。下記のコードでは関数をオブジェクトを定義しつつエクスポートし、Class は export { MyClass } でエクスポートしてるよ

デフォルトエクスポート (default export)

クラス名や関数名を指定しなくてもエクスポートできる。ただし、1 ファイルにつき一つのエクスポートになるよ。

インポート (import)

インポートには様々な構文があります ( 引用: mdn import )

export の例のコードを全部インポートした例

インポート周りはゴリゴリに説明を書くと記事が肥大化するのでこんくらいにしとく。ごめんけど。

テンプレート文字列

テンプレートリテラルを使うことで、複数行の文字列を改行を気にせずに扱えるよ。文字列はバッククォート ` で囲うよ。${ } で変数展開もできるよ。

結果

<main id=”main”>
<h1>Hello Template Literal</h1>
</div>

可変長引数 (Rest parameters)

関数の仮引数名に(ピリオド3つ→以下、スプレッド構文) を付けると、関数に渡された値が配列として受け取ることができるよ。

他の引数も渡せるけど、その場合は Rest Parameter を仮引数の最後にする必要があるよ

デフォルト引数

仮引数に値を代入する形式で定義しておくと、関数を呼び出し時に引数が指定されていなければデフォルト値が代入されるよ。

分割代入

変数定義時に、配列リテラルのような形式で変数名を定義することで、配列を個々の変数に一括で代入できちゃいます。

オブジェクトでもいけちゃう

配列展開

(スプレッド構文) で、配列リテラルの任意の位置に他の配列を展開できるよ

for-of

for-of の説明の前に、一旦 for-in の説明をしちゃうけど、for-inはキーが文字列で列挙可能なプロパティ全てに対して反復処理を行うよ

それに対して、for-ofは反復可能なオブジェクトに対して反復処理を行うよ。反復可能なオブジェクトには代表として、配列、文字列、Map、Set、DOMコレクション などがあるよ

Map

Map は Dictionary や 連想配列 と同様に Key と Value の組み合わせでできるデータ。

  • 定義時に [ [ ‘key1’, ‘value1’ ], [ ‘key2’, ‘value2’ ] ] の形式でコンスタラクタに値を渡しつつ初期化できる
  • get(‘key’) で要素を参照
  • set(‘key’, ‘value’) で要素を追加
  • delete(‘key’) で要素を削除
  • clear() で全要素を削除

結果

Map(3) { ‘apple’ => ‘りんご’, ‘banana’ => ‘バナナ’, ‘dragon’ => ‘ドラゴン!!!’ }
ドラゴン!!!
Map(3) { ‘banana’ => ‘バナナ’, ‘dragon’ => ‘ドラゴン!!!’, ‘TF’ => ‘痛風’ }
Map(0) {}

反復処理を forEach と for-of 行うパターンを載せとくよ( 他の子→ entries, keysvalues )

Set

Set は値が重複しないことを保証するコレクションだよ。同じ値が無い配列っていうイメージ。ただし、配列と違って順番に意味が無いのでインデックスを使って取り出すことはできないよ

  • 定義時に [ ‘value1’, ‘value2’, ‘value3’ ] の形式でコンスタラクタに値を渡しつつ初期化できる
  • add(‘value’) で要素を追加
  • delete(‘value’) で要素を削除
  • has(‘value’) で要素の有無を true/false で確認
  • 同じ値を追加しても無視される

結果

Set(3) { ‘apple’, ‘banana’, ‘DRAGON!’ }
3
Set(3) { ‘banana’, ‘DRAGON!’, ‘おっさん’ }
false
true

forEach での反復処理の例(for-of でもイケる)

WeakMap

WeakMap は Map に似ている Key と Value 形式のコレクションだよ。ただ以下の様な特徴があるよ

  • Key は オブジェクトでなければならない
  • キーが ガベコレ の対象になる
  • 列挙することができない
  • get、set、has、delete メソッドを持つ

WeakMap はオブジェクトのインスタンスに対応する一時的な値を保管する、みたいな使い方とかが良さげ。

WeakSet

WeakSet も WeakMap と同様で、値をオブジェクトで含むことが出来、同じ参照のものを含むことができないよ。参照が外れたら次のGCで破棄。用途むずい

  • add、has、delete メソッドを持つ
  • 参照がはずれれば GC 対象に

Symbol

Symbol( ) を使って作ったシンボルはユニークになり、他のシンボルと同じになることが無いです。従って、ユニークな識別子を使いたい場合に便利。同一のキーでの上書きなどの防止ができちゃう。ちなオブジェクトリテラル内でシンボルを使いたい場合は [ ] ブラケットを使うよ

イテレーター

イテレーターは「繰り返し」のための機構だよ。配列などの「反復処理」を思い出しますが、配列は「反復可能なオブジェクト」で、反復可能なオブジェクトは「for-of」を使って各要素への処理ができるよね。

しかし、配列は「反復子オブジェクト」では無いよ。下の図でいう緑っぽいやつが配列だけど赤っぽいやつではないんだ。反復子オブジェクトは next( ) というメソッドを呼び出すことで、次の要素を取り出すことができるオブジェクトを指すよ。

試しに、配列に対して next( ) を呼び出すと、次のコードのようになるよ

実行結果

iterableObject.next()
^

TypeError: iterableObject.next is not a function

これに対し、values( ) [Symbol.iterator] によって「反復子オブジェクトに変換」した例が次のコード

next( ) を呼び出すと2つの状態を持つオブジェクトが返ってくるよ。一つは value でそのを、もう一つは done で「全ての要素を取り出したかどうかを示す真偽値」。

次のコードはさっきのコードを少し変更して、更に次の要素を取り出してみた例

この例では while を使って一直線且つ網羅的に舐めていますが、iterator を使えば任意の順番や任意の要素数単位でのアクションを行ったりすることもできるよ。

また、イテレーターの考え方はジェネレーターでも必要になるので、ジェネレーターの理解のためにもしっかり抑えておきたいよね

ジェネレーター (関数)

ジェネレーターは通常の関数と違って、その関数を呼び出してもすぐには実行されないよ。呼び出し元には、まず反復子オブジェクト(イテレーター)が返ってきて、その後に next( )メソッドを呼ぶことで、実行が進んでいくよ。

ジェネレーターの定義には、キーワードである function の後に * アスタリスクを付け、yield を使って呼び出し側に値を供給するよ。

ジェネレーターとの双方向でのメッセージング

next( ) に引数を渡すと yield の評価の結果になるよ。これにより呼び出し側から任意のタイミングで値をジェネレーター側に渡すことができるよ。また、ジェネレータ内で return を呼び出すと next( ) で返ってくるオブジェクトの done が true になるよ(値が undefined で無い可能性があることに注意)