ECMAScriptのproposalsを見て暇をつぶす話

はじめに

Amebaの広告プロダクトチームでフロントエンドエンジニアをやっている@zenn1234です。

この度、弊社の広告横軸組織PTAが運営するアドベントカレンダーに急遽参加することになりました。

拙い文章になりそうですが、頑張って書いていこうと思います。

何について書くか？

問題は、何にも書くことがない、ということです。

ネタが浮かばない。

このままだと運営さんからの おこられ が発生してしまうので、無い脳みそを使ってどうにかしてネタを絞り出します。

フロントエンジニアがブログネタに窮した時の救世主

そこで登場するのが ECMAScriptのproposalsを読み込む という作法です。

過去に数多のフロントエンジニアがアドベントカレンダーのネタに詰まり、その度にECMAScriptのproposalsに救ってもらってきた歴史があります。

なので今回もECMAScriptのproposalsを眺めつつ、気になったものについて雑な感想をつけるスタイルで行こうと思います。

ECMAScriptのproposalsとは？

ECMAScriptについてはこちらを見ていただくとして、proposalsというのは文字通り提案されている仕様です。

ここで管理されていて、以下のようにStageという段階が定められています。

Stage	Code	説明
Stage 4	Finished	最低2つ以上のプロジェクトで実装されている
Stage 3	Candidate	仕様が完成しフィードバックを受けている
Stage 2	Draft	APIや構文が定義されている
Stage 1	Proposal	目的や解決方法を示す
Stage 0	Strawman	アイデア段階

Stage 3

現在実装待ちの仕様を見ていきます。

以下、気になったものだけ記載しているので、Stage　3の一覧を全て見たい方はこちらをご覧ください。

Import Assertions

JSONファイルをimportで読み込めたり、WebAssemblyを読み込めたり。

  import json from "./foo.json" assert { type: "json" };
  import("foo.json", { assert: { type: "json" } });

  new Worker("foo.wasm", { type: "module", assert: { type: "webassembly" }; });

Temporal

ついに日付フォーマットがネイティブでできるように！
と思ったらフォーマットは自力でやらないといけないらしく、だったらこれ何の意味があるんかと。。
結局 Moment.js やら Day.js が必要なままになりそう。

  const instant = Temporal.Instant.from('1969-07-20T20:17Z');
  instant.toString(); // => '1969-07-20T20:17:00Z'
  instant.epochMilliseconds; // => -14182980000

Array Grouping

配列をグループ化したObjectを返す。
結構マニアックですが、便利だなと思うタイミングがいつか来そう。

const inventory = [
  { name: 'asparagus', type: 'vegetables', quantity: 5 },
  { name: 'bananas',  type: 'fruit', quantity: 0 },
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'cherries', type: 'fruit', quantity: 5 },
  { name: 'fish', type: 'meat', quantity: 22 }
];
const result = inventory.group(({ type }) => type);

/* result:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

Change Array by Copy

配列の操作に以下が追加される。

  Array.prototype.toReversed() -> Array
  Array.prototype.toSorted(compareFn) -> Array
  Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
  Array.prototype.with(index, value) -> Array

New Set methods

Setの操作に以下が追加される。

  Set.prototype.intersection(other)
  Set.prototype.union(other)
  Set.prototype.difference(other)
  Set.prototype.symmetricDifference(other)
  Set.prototype.isSubsetOf(other)
  Set.prototype.isSupersetOf(other)
  Set.prototype.isDisjointFrom(other)

Stage 2

ドラフトの仕様を見ていきます。
現時点での仕様なので、仕様変更されたり、このままお蔵入りになったりする可能性があるので注意してください。

以下、気になったものだけ記載しているので、Stage　2の一覧を全て見たい方はこちらをご覧ください。

Record & Tuple

従来のObject, Arrayとは違い、immutableなデータ構造を扱うことができる。
Immutable.js とか Immer とか使ってたのが不要に。

  #{}
  #{ a: 1, b: 2 }
  #{ a: 1, b: #[2, 3, #{ c: 4 }] }
  #[]
  #[1, 2]
  #[1, 2, #{ a: 3 }]

Pipeline Operator

パイプが使えるようになるので処理の流れが直感的に。
JSの書き方が大幅に変わりそうですね。es2015以来のインパクトがありそう。
仕様はまだブレそう。

  value |> one(%) |> two(%) |> three(%);

疲れた

Stage 1 と Stage 0　についても面白そうなのを取り上げようと思ったのですが、意外と物量があり時間がなくなってきたので今回はこの辺でおしまいです。

ありがとうございました。