ECMAScript 2017、2018 の時代の開発環境

12
Like
0
Comment

masakielastic

Edited at 2017-09-11

概要

ECMAScript 2017、2018 で導入が予定されている機能および開発ツールについて調べました。

ECMAScript 2017

Object.values() と Object.entries()

それぞれプレーンなオブジェクトから列挙可能な配列を返します。

var obj = {a: 1, b: 2, c: 3};
for (let [key, value] of Object.entries(obj)) {
    console.log(key + ' ' + value); // "a 1", "b 2", "c 3"
}

for-in ループと hasOwnProperty によるチェックを組み合わせて書いていた時代と比べて、コードが書きやすくなったことを象徴するメソッドです。

async/await

async/await のサポートは HTTP ライブラリやフレームワーク、テストツールの世代交代の象徴となる機能です。最近 HTTP クライアントの request の開発者が r2 という名前の新しいプロジェクトをはじめたことが注目されました。

ECMAScript 2018

2ality にまとめ記事があります。アクティブな提案は tc39/proposals にまとまっています。

dynamic import()

条件に応じてスクリプトを読み込むことができます。たとえば翻訳ファイルが挙げられます。

import(`messages_${getLocale()}.js`)
.then(···);

Promise を返すので、async/await 構文も使えます。

async function main() {
    const myModule = await import('./myModule.js');
}
main();

Promise.prototype.finally()

try-catch-finally 句に対応するメソッドです。データベースの接続を閉じる、HTTP リクエストを送信中であることを示すオブジェクトを修正するなどの用途があります。

Class フィールド

# を使ってプライベートフィールドを宣言できるようになります。

class MyClass {
    static foo = 0;
    #bar;
    constructor(bar) {
        this.#bar = bar;
    }
}

WHATWG

URLSearchParams
URL Sandard で定義されます。Fetch API のリクエストボディに使うことができます。Content-Type は application/x-www-form-urlencoded になります。

AbortController

Fetch API のキャンセルを実現するために DOM Standard に導入されました。AbortSignal オブジェクトを fetch の第2引数に渡し、abort() メソッドでキャンセルを実行します。Cancelable Promise の提案も続いており、AbortController との互換性をどう保つのかが課題です。

EventTarget.addEventListener の第3引数

一回限定のハンドラ実行やブラウザースクロールの速度改善を目的とした passive オプションが追加されています。

element.addEventListener('some-event', eventHandler, {
  once: true,
  passive: true,
  capture: true
});

Streams API と gRPC

gRPC は Google のクラウドサービスで採用される RPC です。通信には HTTP/2 が使われます。Chrome や Firefox が Streams API を実装したことから gRPC のためのブラウザークライアントの開発が始められています。Github でパブリックベータ以前のテストユーザーが募集されています。

トランスパイラ (Babel)

babel-preset-env

公式で推奨されるプレセットです。設定ファイルでターゲットとして指定したブラウザーや Node.js のバージョンに合わせてトランスパイルするコードの量を減らしてくれます。Babel の標準機能にするかどうかが検討されています。

TypeScript

Babel 7 でプラグインおよびプレセットが利用できることが予定されています。

babel-plugin-syntax-typescript
babel-plugin-transform-typescript
babel-preset-typescript

モジュールバンドラー

主要なブラウザーが ES2015 を実装するようになり、トランスパイルするコードの量を減らすことが課題になっています。別の課題は開発サーバーのセットアップ作業を減らすことです。Webpack よりも軽量なモジュールバンドラーを試しています。

browserify

budo、bankai

mattdesl/budo は browserify による開発サーバーです。LiveReload や HTTPS に対応しています。別の選択肢として choojs/bankai が挙げられます。

rollup.js

rollup.js はモジュールバンドラーです。Acorn を採用しており、Babel を導入しなくても ES モジュールにデフォルトで対応しています。

 rollup main.js --o bundle.js --f cjs

rollup.js を採用した開発サーバーの事例として Felt が挙げられます。express.js で開発されています。

Fusebox

Fusebox は TypeScript で開発されたモジュールバンドラーです。express.js による開発サーバーも組み込まれています。

クライアントアプリ

仮想 DOM (React)

特許条項の問題
React に含まれる Facebook 独自の特許条項が Apache 財団が採用できないライセンスとして認定され、オープンソースのコミュニティから採用を避けるべきツールとして認識が広がっています。それに合わせて、Vue.js や React 互換の preact の注目度が高まっています。

状態管理 (Redux)

Repatch

Repatch は Redux を簡略化させることを目的としたライブラリで、アクションを手軽につくることができます。async/await にも対応しています。

PWA (Progressive Web App)

PWA
PWA (Progressive Web App) の開発ツールが急ピッチで進んでおり、awesome-pwa にまとめられています。

Service Workers
Chrome は Service Workers を実装済みで Safari も開発中です。

## 概要

ECMAScript 2017、2018 で導入が予定されている機能および開発ツールについて調べました。

## ECMAScript 2017

**Object.values() と Object.entries()**

それぞれプレーンなオブジェクトから列挙可能な配列を返します。

```js
var obj = {a: 1, b: 2, c: 3};
for (let [key, value] of Object.entries(obj)) {
    console.log(key + ' ' + value); // "a 1", "b 2", "c 3"
}
```

`for-in` ループと `hasOwnProperty` によるチェックを組み合わせて書いていた時代と比べて、コードが書きやすくなったことを象徴するメソッドです。

**async/await**

async/await のサポートは HTTP ライブラリやフレームワーク、テストツールの世代交代の象徴となる機能です。最近 HTTP クライアントの request の開発者が [r2](https://github.com/mikeal/r2) という名前の新しいプロジェクトをはじめたことが注目されました。

## ECMAScript 2018

2ality に[まとめ記事](http://2ality.com/2017/02/ecmascript-2018.html) があります。アクティブな提案は [tc39/proposals](https://github.com/tc39/proposals) にまとまっています。

**dynamic import()**

条件に応じてスクリプトを読み込むことができます。たとえば翻訳ファイルが挙げられます。

```js
import(`messages_${getLocale()}.js`)
.then(···);
```

Promise を返すので、async/await 構文も使えます。

```js
async function main() {
    const myModule = await import('./myModule.js');
}
main();
```

**Promise.prototype.finally()**

**Class フィールド**

`#` を使ってプライベートフィールドを宣言できるようになります。

```js
class MyClass {
    static foo = 0;
    #bar;
    constructor(bar) {
        this.#bar = bar;
    }
}
```

## WHATWG
**URLSearchParams**
URL Sandard で定義されます。Fetch API のリクエストボディに使うことができます。`Content-Type` は `application/x-www-form-urlencoded` になります。

**AbortController**

Fetch API のキャンセルを実現するために DOM Standard に導入されました。`AbortSignal` オブジェクトを fetch の第2引数に渡し、`abort()` メソッドでキャンセルを実行します。Cancelable Promise の提案も続いており、AbortController との互換性をどう保つのかが課題です。

**EventTarget.addEventListener の第3引数**

一回限定のハンドラ実行やブラウザースクロールの速度改善を目的とした passive オプションが追加されています。

```js
element.addEventListener('some-event', eventHandler, {
  once: true,
  passive: true,
  capture: true
});
```

**Streams API と gRPC**

gRPC は Google のクラウドサービスで採用される RPC です。通信には HTTP/2 が使われます。Chrome や Firefox が Streams API を実装したことから gRPC のためのブラウザークライアントの開発が始められています。[Github](https://github.com/grpc/grpc-experiments/issues/159#issuecomment-322069486) でパブリックベータ以前のテストユーザーが募集されています。

## トランスパイラ (Babel)

**babel-preset-env**

**TypeScript**

Babel 7 でプラグインおよびプレセットが利用できることが予定されています。

* babel-plugin-syntax-typescript
  * babel-plugin-transform-typescript
  * babel-preset-typescript

## モジュールバンドラー

### browserify

**budo、bankai**

mattdesl/budo は browserify による開発サーバーです。LiveReload や HTTPS に対応しています。別の選択肢として choojs/bankai が挙げられます。

### rollup.js

rollup.js はモジュールバンドラーです。Acorn を採用しており、Babel を導入しなくても ES モジュールにデフォルトで対応しています。
 
 ```js
 rollup main.js --o bundle.js --f cjs
 ```
 
rollup.js を採用した開発サーバーの事例として Felt が挙げられます。express.js で開発されています。
 
### Fusebox

Fusebox は TypeScript で開発されたモジュールバンドラーです。express.js による開発サーバーも組み込まれています。

## クライアントアプリ
### 仮想 DOM (React)
**特許条項の問題**
React に含まれる Facebook 独自の特許条項が Apache 財団が採用できないライセンスとして認定され、オープンソースのコミュニティから採用を避けるべきツールとして認識が広がっています。それに合わせて、Vue.js や React 互換の preact の注目度が高まっています。

### 状態管理 (Redux)
**Repatch**

Repatch は Redux を簡略化させることを目的としたライブラリで、アクションを手軽につくることができます。async/await にも対応しています。

### PWA (Progressive Web App)

**PWA**
PWA (Progressive Web App) の開発ツールが急ピッチで進んでおり、[awesome-pwa](https://github.com/hemanth/awesome-pwa) にまとめられています。

**Service Workers**
Chrome は Service Workers を実装済みで Safari も開発中です。

Edit request

Linked from these articles
Linked from React死亡?React終了?～Facebookの特許事項付きライセンスの問題～about 2 hours ago