本文へ移動

@babel/plugin-proposal-do-expressions

詳細​

do { .. } 式はブロック（1つ以上のステートメントを含む）を実行し、ブロック内の最終ステートメントの完了値が do 式の完了値になります。

出典: You Don't Know JS、型と文法 -> 第5章 -> ステートメントの完了値

これは、三項演算子のより複雑なバージョンと見なすことができます。

JavaScript
let a = do {
  if (x > 10) {
    ("big");
  } else {
    ("small");
  }
};
// is equivalent to:
let a = x > 10 ? "big" : "small";

この例は、あまりにもシンプルで三項演算子の方が良い選択肢であるため、最良の使用方法ではありませんが、do { ... } 式内で、複数のif ... elseチェーンを含む、はるかに複雑な条件を設定できます。

JavaScript
let x = 100;
let y = 20;

let a = do {
  if (x > 10) {
    if (y > 20) {
      ("big x, big y");
    } else {
      ("big x, small y");
    }
  } else {
    if (y > 10) {
      ("small x, big y");
    } else {
      ("small x, small y");
    }
  }
};

例​

JSX で​

do 式の最も有用な用途の1つは JSX 内です。コンポーネントを条件付きで表示する場合、通常は条件を実装して正しい値を返す別の関数を呼び出す必要があります。たとえば、以下のようにします。

JavaScript
const getColoredComponent = color => {
  if (color === "blue") {
    return <BlueComponent />;
  }
  if (color === "red") {
    return <RedComponent />;
  }
  if (color === "green") {
    return <GreenComponent />;
  }
};

const Component = props => (
  <div className="myComponent">{getColoredComponent()}</div>
);

do 式を使用すると、JSX 内にロジックを追加できます。

JavaScript
const Component = props => (
  <div className="myComponent">
    {do {
      if (color === "blue") {
        <BlueComponent />;
      } else if (color === "red") {
        <RedComponent />;
      } else if (color === "green") {
        <GreenComponent />;
      }
    }}
  </div>
);

インストール​

npm install --save-dev @babel/plugin-proposal-do-expressions

使用方法​

babel.config.json
{
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

CLI を介して​

シェル
babel --plugins @babel/plugin-proposal-do-expressions script.js

Node API を介して​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-proposal-do-expressions"],
});

参考文献​