JavaScriptの現状と将来というタイトルで発表してきた

the present and future of JavaScript

情報処理学会の若手の会で発表してきました。
三回目の参加で、二回連続30minのセッションをさせて頂きました。
前回は3年前に発表してその頃はまだ学生でした👨‍🎓

実はこの週、スライドにも書いてある通りバンクーバでNode InteractiveとNode関係者があつまるNode.js Collaborator Summitが開かれてました。
そちらの情報は他の方が何かしら報告してくれると思いますので、それを期待しています🙏

さて、それではスライドの内容を少し読み砕きましょう

ECMAScriptとは？

ECMAScriptとは、Ecma Internationalによって管理されるJavaScriptの標準化仕様です。
JavaScriptとは、ECMAScriptに基づく実装を指します。

エディション

そのころに選定された仕様をまとめたものがエディションです。
1997/06に最初のECMAScript 1が出ました。
そして、2015/06 からは毎年でるように変わりました。 (from ES2015)

TC39

ECMA-262とECMA-402を管理します。 JSの構文と国際化APIです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources

ここの委員会メンバーは各ブラウザの主要ベンダーと会社(e.g. Airbnb, FaceBook, PayPal, Bocoup, etc...)です。
また、委員会メンバーの推薦で所属している人もいます。

TC39プロセス

標準化されるまでに5つのプロセスを踏む必要があります。(stage-0 to stage-4)
このstageは二ヶ月に一回あるミーティングにより、変動していき、stage-4に入ったら次のリリースで正式に仕様として組み込まれます。

今年のスケジュールは以下のとおりです。

Dates	Location	Host
2017-01-24 to 2017-01-26	San Jose, CA	PayPal
2017-03-21 to 2017-03-23	Portland, OR	Mozilla
2017-05-23 to 2017-05-25	New York, NY	Google
2017-07-25 to 2017-07-27	Redmond, WA	Microsoft
2017-09-26 to 2017-09-28	Boston, MA	Bocoup
2017-11-28 to 2017-11-30	San Francisco, CA	Airbnb

各種stageの説明

stage-0(Strawman)

アイディアのフェイズです。
これは委員会メンバーではなくても、提出が可能です。
提出フォームから提出します。
そして、ドキュメントを作り、tc39/proposalsの方へそのリンクを追加するPRを提出する必要があります。

stage-1(Proposal)

ポリフィル、デモがあり、潜在的な問題の特定が必要です。
このステージではチャンピオンと呼ばれるものが必ず必要です。
チャンピオンは、提出者または共同チャンピオン(片方がTC39メンバー)でならなくては次のステージには進めません。

stage-2(Draft)

仕様に含まれる最初のバージョンです。
このstageにいることで仕様として含まれる可能性が高いです。
正式な構文記述の追加が必要です。

stage-3(Candidate)

このプロポーザルの終盤です。
各種ベンダーとユーザからのフィードバックをさらに求めます。
また、正式な仕様のドキュメントは完成しており、TC39のレビュワーとECMAScriptのエディタにより、レビューとサインオフされる必要があります。

stage-4(Finished)

次のリリースで正式な仕様として含まれるでしょう。
test262に合格していて、ブラウザベンダーの2つ以上で実装が組み込まれる必要が必ずあります。
また、ECMAScriptのエディタは仕様書に署名をする必要があります。

test262がBabylonに統合されました。

BabylonとはBabelのJSパーサです。

github.com

今回のMTG(60th)で変更したプロポーザル一覧

約2週間前に変動したプロポーザルの一覧です。

Proposal	Stage	Description
mport.meta	2 → 3
export ns from 'mod';	2 → N/A	it moved to https://github.com/tc39/ecma262/pull/1005
Array.prototype.flat{Map,ten}	1 → 2
throw Expressions	1 → 2
String.prototype.matchAll	1 → 2
Extensible numeric literals	0 → 1
First-Class Protocols	0 → 1	it was called `Interfaces` in stage-0
JSON superset	0 → 1
nullary coalescing	0 → 1
Partial application	0 → 1
Pipeline Operator	0 → 1
ArrayBuffer.transfer	N/A → 0
Builtins.typeOf() and Builtins.is()	N/A → 0
Object Shorthand Improvements	N/A → 0

github.com

ES2015 - ES2017

スライドを見てください。
また、これは世の中に沢山いい記事があるので省きます。

ES2018

現在、stage-4にあるのは、Template Literal Revisionのみとなっています。

Template Literal Revision

ES2015にも、String Templateの中に、Tagged Templateという書き方がありますが、それには制限がありました。
Tagged Templateというのは、有名なlibraryだとstyled-componentsやyo-yoが採用しています。
その制限というのが、Latexやwindowsのpath, 8進数のエスケープなどを表現できない(エラーで落ちる)問題です。

const tag = (obj) => ({
  Raw: obj.raw,
  Cooked: obj
});

tag`\u{4B}`; // ES2015 ~
// { Raw: [ '\\u{4B}' ], Cooked: [ 'K' ] }

// ES2018 ~
tag`\uu ${1} \xx`; // a Unicode escape
// { Raw: [ '\\uu ', ' \\xx' ], Cooked: [ undefined, undefined ] }
tag`\100`; // an octal escape

このリリースでは、その制限をなくし、イレギュラーなエスケープはundefinedとして、Cookedに入れられます。

候補

現在、stage-3には以下のプロポーザルがあり、ES2018として組み込まれる可能性が高いです。

• Asynchronous Iteration
• BigInt
• Class Fields
• global
• Function.prototype.toString revision
• import()
• import.meta
• Legacy RegExp features in JavaScript
• Optional catch binding
• Promise.prototype.finally
• RegExp Lookbehind Assertions
• RegExp named capture groups
• Rest/Spread Properties
• s (dotAll) flag for regular expressions

面白そうなプロポーザル

興味あるプロポーザルを話しました。
stage-1が多く、Syntaxが変動する可能性があるので注意してください。
Binary ASTは他の場所で話します😌

Class Fields

class Counter extends HTMLElement {
  x = 0;  // public fields
  #y = 0; // private fields

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  clicked() {
    this.x++;
    this.#y++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  render() {
    this.textContent = this.#y.toString();
  }
}

Promise.prototype.finally

let finished = false;

fetch()
  .then((res) => {
    // finished = true;
  })
  .catch((err) => {
    // finished = true;
  })
  .finally(() => {
    finished = true;
  });

同じ処理をthenとcatchで書かなくて良くなりました。

Optional Chaining

abouthiroppy.hatenablog.jp

Pipeline Operator

abouthiroppy.hatenablog.jp

Partial Application Syntax

function add(x, y) { return x + y; }

// before
const addOne = add.bind(null, 1); // this, the left(x = 1), the right(y = undefined)
addOne(2); // 3

// after
const addOne = add(1, ?); // apply from the left(x)
addOne(2); // 3

const addTen = add(?, 10); // apply from the right(y)
addTen(2); // 12

const f = (...x) => x;
const g = f(..., 9, ...);
g(1, 2, 3); // [1, 2, 3, 9, 1, 2, 3]

const res = a |> f(?, 1) |> g(?, 2); // const res = g(f(a, 1), 2);

今まではES5のbindで部分適用していましたが、これからは?がある場合に固定化されます。
また、spread operatorでも展開できます。

github.com

Promise.try

bluebirdと同じ、tryです。

function getUserById(id) {
  return Promise.try(() => {
    if (typeof id !== 'number') {
      throw new Error('id must be a number');
    }

    return db.getUserById(id);
  });
}

Temporal

日付の計算等の扱いが簡単になります。

let myCivilDate = new CivilDate(2016, 2, 29);
let newCivilDate = myCivilDate.plus({years: 1, months: 2});
//results in civil date with value 2017-4-28

github.com

まとめ

• ECMAScriptは毎年更新されます
• 誰でもプロポーザル出せるぞ！！
• 次のリリース(ES2018)は2018/06です！

宣伝

2017/11/25 - 26 で東京Node学園祭2017をやるので是非来てくださいね;)

nodefest.jp

The End

それではJavaScriptライフを楽しんで！😎

github.com