BT

InfoQ ホームページ ニュース Babel 7.3: スマートパイプライン,プライベートインスタンスアクセサ,他

Babel 7.3: スマートパイプライン,プライベートインスタンスアクセサ,他

ブックマーク

原文(投稿日:2019/03/28)へのリンク

先日リリースされたBabel 7.3では,プライベートインスタンスアクセサと"スマート"パイプラインオペレータのパースとコンパイルが可能になった。正規表現の名前付きキャプチャグループや他の機能も,新たにサポートされている。

babelの設定に"@babel/plugin-proposal-private-methods"を加えれば,プライベートなインスタンスフィールドのゲッタおよびセッタとして定義された構文(プライベートインスタンスアクセサ)の使用が可能になる。プロポーザルでは,独自のエレメント実装として,次のような例が挙げられている。

class Counter extends HTMLElement {
  #xValue = 0;

  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value; 
    window.requestAnimationFrame(this.#render.bind(this));
  }

  #clicked() {
    this.#x++;
  }

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

  connectedCallback() { this.#render(); }

  #render() {
    this.textContent = this.#x.toString();
  }
}
window.customElements.define('num-counter', Counter);

get #xset #xがプライベートゲッタおよびセッタ関数で,それぞれプライベート値"xValue"の取得と更新を行う。#renderCounterクラスのプライベートメソッドである。

従来のBabelリリースにも,クラスインスタンス用のプライベートなフィールドとメソッドについては実装されていた。静的プライベートフィールドもBabel 7.1ですでに実装されていたが,静的パブリックフィールド静的プライベートメソッドは将来のリリースで対応される予定である。プライベートなフィールドとメソッド,アクセサは,静的なものとクラスインスタンスに関するもの,いずれもECMAScriptステージ3プロポーザルであるため,現時点ではJavaScript言語の一部とは見なされていない。

Babel 7.3はまた,スマートパイプラインオペレータ・プロポーザルのメインプロポーザルも実装している。ただし,同プロポーザルの追加機能はサポートしていない。新しい構文を有効にするには,"@babel/plugin-proposal-pipeline-operator"プラグインを.babelrcコンフィギュレーションに追加すればよい。

{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "smart" }]
  ]
}

パイプラインオペレータは,関数パイプラインを通るデータフローとして定義可能な演算構文を提供するものだが,パイプライン構文の詳細は現時点では決まっていない。パイプラインオペレータに関しては3つのプロポーザルがあり,そのひとつ"Minimal Pipeline Proposal"では,次のような関数構成を,

let newScore = boundScore( 0, 100, add(7, double(person.score)) )

より簡潔に記述することができる。

let person = { score: 25 };

let newScore = person.score
  |> double
  |> (_ => add(7, _))
  |> (_ => boundScore(0, 100, _));

newScore //=> 57

Minimal Pipeline Proposalでは,パイプライン内の"await"構文はサポートされないため,"|> await f"は最初にエラーとなる。

"F# Pipelines Proposal"は,"await"ユースケースをサポートする。このプロポーザルでは,次のようなコードを,

console.log(
  await stream.write(
    new User.Message(
      capitalize(
        doubledSay(
          await promise,
          ', '
        )
      ) + '!'
    )
  )
);

このような構文でフラットにすることができる。

promise
  |> await
  |> (x => doubleSay(x, ', '))
  |> capitalize
  |> (x => x + '!')
  |> (x => new User.Message(x))
  |> (x => stream.write(x))
  |> await
  |> console.log;

プロポーザルでは,この構文から得られるであるメリットについて,使用例を挙げて説明している

"Smart Pipelines Proposal"は,ECMAScript ステージ0のプロポーザルだ。そのため,構文は将来的に変更される可能性が高い。"スマート"なプロポーザルであると主張する重要なアドバンテージは,曖昧さのないセマンティクスを提供している点にある。次のコードは,

input |> await object.method(x, y);

文面上,次のような意味の可能性がある。

await object.method(input, x, y);
await object.method(x, y, input);
await object.method(x, y)(input);
(await object.method(x, y))(input);

このような状況で,"スマート"なプロポーザルでは,パイプ入力引数のプレースホルダとして"#"を使用することによって,次のように明示的な構文を強制する。

input |> await object.method(#, x, y);
input |> await object.method(x, y, #);
input |> await object.method(x, y)(#);
input |> (await object.method(x, y))(#);

"Minimal Pipeline Proposal"は前回のBanelのマイナリリースでサポート済だが,"F# Pipeline Proposal"はまだサポートされていない

Babel 7.3は,ES2018の一部として承認されている"RegExp Named Capture Groups"プロポーザルを実装している。新構文は、対応プラグインの"@babel/plugin-transform-named-capturing-groups-regex"をBabelコンフィギュレーションに追加することで有効になる他,"@babel/preset-env"を含むBabel設定の一部としてもデフォルトで含まれている。

"RegExp Named Capture Groups"では、正規表現が名前で一致する文字列の特定部分を参照することができる。例えば,

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let result = re.exec('2015-01-02');
// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

// result[0] === '2015-01-02';
// result[1] === '2015';
// result[2] === '01';
// result[3] === '02';

Babel 7.3リリースには,TypeScriptの構文解析など,多数のバグ修正や改良も含まれている。

BabelはMITオープンソースライセンス下で利用することができる。コントリビューションについては,Babelのコントリビューションガイドライン行動規範に従うことを条件に,Babel GitHub組織経由で受け付けている。プロジェクトを支援するための寄付も,Open Collectiveを通じて行うことができる。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。