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

bashでは、!$は最後のコマンドの最後の引数を意味します。

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スクリプトを使用して、Babelの使用を開始します。

$ 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"]

結論

この記事がお役に立てば幸いです。 それを覚えておいてくださいそれは単なるシンタックスシュガーです。 それを使うかどうかはあなた次第です。 この記事を楽しんでいるなら、もっとクールな記事を受け取るために購読してください。