JavaScript
ECMAScript
babel

optional chainingを試してみる

はじめに

気になってた機能なので先日babel7のベータ版が出たことだし折角なので試してみました。
どんな機能かというと・・Rubyで言うぼっち演算子・・と言っても一部の人にしか伝わらないですね。
他の言語でいうとこの辺に書いてあるやつなんでしょう。SwiftとかC#にもこういうのがあるのかふむふむ。

注意:optional chainingはまだstage-1なので仕様が安定してません。なので正式にリリースされる際に動作が変わっている可能性があります。間違ってもproductionで使わないように。

インストール

  • babel-cliのベータ版とbabel-plugin-transform-optional-chainingを入れる
    まずはpackage.jsonを以下のように記述して・・
package.json
{
  "devDependencies": {
    "babel-cli": "7.0.0-beta.0"
  }
}

npmyarnでインストール

$ npm install
$ npm install --save-dev babel-plugin-transform-optional-chaining
or
$ yarn install
$ yarn add -D babel-plugin-transform-optional-chaining

それと.babelrcも編集

.babelrc
{
  "plugins": ["transform-optional-chaining"]
}

あとは作成したファイルをトランスパイルしてやればOK

使い方

まずはこれまでエラーになってたパターン

エラーになる例
const foo = {}
console.log(foo.bar.hoge);
// => TypeError: Cannot read property 'hoge' of undefined

optional chaining を使ってみる

optionalChaining.js
const foo = {}
console.log(foo.bar?.hoge);  // undefinedやnullになり得る値に「 ? 」を付ける
// undefined

おー便利だー。

詳しく知りたい人はプラグインの実装とかproposalをみてみると良いと思います。