JavaScriptパイプラインオペレーターの提案を見てください

getdocs

2年前

JavaScript パイプライン演算子の提案は、現在ステージ1 の提案であり、JavaScriptに新しい演算子を追加します。この新しい演算子は、連鎖関数を拡張して読みやすくするためのシンタックスシュガーとして機能します。

実例を示すために、パイプライン演算子を使用しない簡単な例から始めましょう。

// assume that `withHello`, `withWave` and `capitalize` are available
let greeting = withHello(withWave(capitalize('alligator')))

console.log(greeting) // Hello, Alligator 👋

同じ例ですが、提案されたパイプライン演算子を使用しています。

let greeting = 'alligator' |> capitalize |> withWave |> withHello

console.log(greeting) // Hello, Alligator 👋

または、次のように読みやすい方法でフォーマットします。

let greeting = 'alligator' 
  |> capitalize 
  |> withWave 
  |> withHello

console.log(greeting) // Hello, Alligator 👋

ご覧のとおり、パイプラインオペレーターは、コードをより明確で読みやすくし、最終的には保守しやすくするのに役立ちます。

複数の再帰関数呼び出しでは、最も内側の関数が最初に呼び出されます。つまり、呼び出しが書き込まれる順序は、最後の関数呼び出しから最初の関数呼び出しまでである必要があります。これは、考えて書くのに少し逆行する可能性があります。コード。パイプライン演算子を使用すると、記述された順序が逆になり、最初の関数呼び出しが最初に追加されます。

今日のパイプラインオペレーターの使用

この提案はまだ非常に初期の段階であるため、現在のブラウザではサポートが見つかりません。 Babel を利用して、今日それを使用できるようにし、すべてのブラウザーで機能するコードをトランスパイルすることができます。

開始するには、マシンにNode.jsがインストールされていることを確認してください。

新しいフォルダを作成し、新しいプロジェクトを初期化しましょう。

$ mkdir pipeline-operator
$ cd !$ 
$ yarn init -y
$ touch index.js

バッシュで !$ 最後のコマンドの最後の引数を意味します。

Babelを初期化する

次に、プロジェクトのBabeldev依存関係をインストールしましょう。

$ yarn add -D @babel/cli @babel/core @babel/plugin-syntax-pipeline-operator

と呼ばれる新しいファイルを作成します .babelrc プロジェクトディレクトリ内：

$ touch .babelrc

次の設定をコピーしてに貼り付けます .babelrc:

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

追加する start プロジェクトのpackage.jsonファイルにスクリプトを記述します。このファイルは実行されます babel:

"scripts": {
  "start": "babel index.js --out-file pipeline.js --watch"
}

私たちの新しいを使用してバベルの使用を開始します start 脚本：

$ yarn start

作業中はこのスクリプトを停止しないでください。このスクリプトは監視モードになっているため、ファイルを変更しても引き続き機能します。代わりに、別のコンソールタブを開いて、出力されたJavaScriptファイルを実行します（pipeline.js).

これで、コードでパイプライン演算子を使用する準備が整いました。 🎉

使用法

まず、使用するヘルパー関数をいくつか作成しましょう。

index.js

function withPrefix(string, prefix = "Hello, ") {
  return prefix + string;
};

function withSuffix(string, suffix = "It's me!") {
  return string + suffix;
}

function capitalize(string) {
  return string[0].toUpperCase() + string.substr(1);
}

function lowerCase(string) {
  return string.toLowerCase();
}

パイプライン演算子なしでそれらをどのように使用するかを見てみましょう。

index.js

let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD'))))

console.log(greeting) // Hello, world it's me!

// With arguments

let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD')), '. We love you <3'), 'Hi there, ')

console.log(greeting) // Hi there, world. we love you <3

コードは少し紛らわしいようですよね？次に、パイプライン演算子を使用するとどのようになるかを見てみましょう。

index.js

let greeting = 'WORLD' 
  |> capitalize
  |> lowerCase 
  |> withSuffix 
  |> withPrefix 

console.log(greeting) // Hello, world it's me!

// With arguments

let greeting = 'WORLD'
  |> capitalize
  |> lowerCase
  |> (str => withSuffix(str, '. We love you <3'))
  |> (str => withPrefix(str, 'Hi there, '))

console.log(greeting) // Hi there, world. we love you <3

次のコードを実行します。

$ node pipeline.js

ご覧のとおり、関数の引数でも同じように簡単に使用できます。

引数

// ...
|> (str => withPrefix(str, 'Hi there, '))

単なる矢印関数です。最初の引数は、処理しようとしている文字列です。 'WORLD' 私たちの場合には。

組み込みのメソッドを使用することもできます。

index.js

let greetingArray = 'WORLD' 
  |> withPrefix
  |> (str => str.toLowerCase()) 
  |> capitalize
  |> (str => str.split(''))

console.log(greetingArray) // => ["H", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d"]