坂本  篤司

坂本 篤司

1649826000

JavaScriptパイプ演算子の提案を調査する

ECMAScript委員会は、JavaScript開発者の開発を容易にする革新的なアイデアを継続的に受け入れ、奨励しています。すべてのアイデアが言語に実装されているわけではありませんが、特定の、そして頻繁に提案される概念、JavaScriptパイプ演算子が注目を集め始めています。

新しい演算子の提案は、開発者が現在の方法よりも優れた構文、読みやすさ、および利便性で入力値に対して連続した操作を実行できるようにするため、ステージ2に到達しました。

この記事では、入力値に対して並行操作を実行する現在の複数の方法、各メソッドの長所と短所を取り上げ、パイプ演算子の導入がJavaScript開発者にとって今後どのような意味を持つかについて説明します。

JavaScriptの現在の設計パラダイム

今日のJavaScript内では、いくつかの一般的なオプションを使用して操作を連続して実行することが可能です。それぞれに独自のトレードオフがあります。

JavaScriptでのディープネスティング

深い入れ子関数呼び出しを使用することは、連続した操作を実行する1つの方法です。次に例を示します。

function exclaim(sentence) {
        return sentence + '!';
}

function addIntroGreeting(sentence) {
        return 'Hello friend, ' + sentence
}

function addInspiration(sentence) {
        sentence + 'You are destinated for greatness!'
}

let sentence = 'live life to the fullest';

const modifiedSentence = addInspiration(addIntroGreeting(exclaim(sentence)).trim());
console.log(modifiedSentence);

// "Hello my friend, live life to the fullest! You are destinated for greatness!"

次のコードを読むために、開発者がしなければならないことは次のとおりです。

  1. 最もネストされた関数がどこにあり、どの値が関数に渡されるかを見つけ、右にスキャンします
  2. 関数を見つけて、何exclaimが返されるかを判断します
  3. 左に読んで、見てくださいaddGreeting
  4. コードを調べて関数を見つけ、それが何を返すかを判断します
  5. 右を見てtrim、同じレベルの呼び出しがあることを確認してくださいaddGreeting
  6. 最後に、最後の関数を見てみましょう。addInspiration

これらの手順を組み合わせると、特に上記で実行した単純な操作と組み合わせると、一度に読んで頭の中で追跡するのは非常に困難です。目を前後に動かさずに左から右に読むことはできません。

さらに、時間をかけて編集を振りかけると、複数の引数が異なるネストされたレベルで各関数に渡され、処理に独自の認知的負荷を必要とする複雑な操作と組み合わされて、コードの保守が困難になります。

入れ子関数は機能しますが、コードベースにどのようなコストがかかりますか?

JavaScriptで一時変数を使用する

深くネストされた関数呼び出しを使用する代わりに、一時変数を作成すると、上記の読みやすさの問題を軽減できます。

function exclaim(sentence) {
        return sentence + '!';
}

function addIntroGreeting(sentence) {
        return 'Hello friend, ' + sentence
}

function addInspiration(sentence) {
        sentence + ' You are destinated for greatness!'
}

const sentence = 'live life to the fullest';
const exclaimedSentence = exclaim(sentence);
const introAndExclaimedSentence = addIntroGreeting(exclaimedSentence);
const trimmedSentence = introAndExclaimedSentence.trim();
const finalInspirationalSentence = addInspiration(trimmedSentence)
console.log(finalInspirationalSentence)

// "Hello my friend, live life to the fullest! You are destinated for greatness!"

上記のコードの読みやすさは理にかなっており、簡単に理解できますが、一時変数は開発者の摩擦を増やし、コードを冗長にし、変数の命名には時間がかかります。

さらに、変数自体は、非同期コード(コールバック、、、またはpromiseなど)が原因で、予期しないときに予期しない値を持つ可能性がありますasync/await。変数が複数の場所で変更されているバグを追跡するのは難しい場合があります。

一時変数は実行可能なオプションですが、新しいパイプオペレーターは、これらの欠点を引き起こすことなくこれらの問題の多くを解決し、冗長性を犠牲にすることなくプロセスを面倒なものにしないと思います。

JavaScriptでのメソッドチェーン

連続操作を実行するためのもう1つのデザインパターンは、メソッドチェーンです。開発者は、現在このオプションを実装しているJavaScript配列メソッドのおかげで、このオプションに精通しています。

console.log([1, 2, 3].map(num => num * 2).filter(num => num > 2));
// [4, 6]

このスタイルでは、コードを左から右に読み取ることができるため、理解しやすくなります。一時変数ほど冗長ではなく、コードを完全に読み取る必要はありません。では、問題は、なぜメソッドチェーンが十分に優れていないのかということです。

かつては、その限られたアプリケーションでは、操作対象の値にクラスのメソッドが使用可能でなければならないため、すべてのユースケースでそれを利用することが困難になります。

上記の配列の例では、操作からの各戻り値は別の配列であり、配列メソッドにアクセスできます。そうでない場合、それらをチェーンすることはできません。また、JavaScriptの他の構文や演算子(。など)では、そのままでは機能しませんawait

なぜパイプ演算子を使用するのですか?

テクノロジーのほとんどのものと同様に、上記の一般的なパターンにはそれぞれ長所と短所があります。開発者の裁量により、作成しようとしているコードに応じてトレードオフを行うことができ、保守可能で読み取り可能なコードを作成するために最善を尽くします。

アーキテクチャやコードレビューの議論では、意見の異なる人が必ずしも正しいか間違っているとは限らないことがよくあります。だからこそ、テクノロジーにおける非常に多くの答えが「状況によって異なります」ということになります。

パイプオペレーターは、すべてのオプションを取り込んで、それらすべての最良のものを組み合わせた代替ソリューションを返します。古いパターンを取り除くことはなく、開発者と言語をより良くすることができるオプションを追加しています。あなたがそうするなら、お互いに有利です。

そうは言っても、パイプオペレーターについてさらに詳しく見ていきましょう。

JavaScriptでのパイプ演算子の提案は何ですか?

パイプ演算子は、今日の最良のオプションを組み合わせて、値に対して連続した操作(関数呼び出しなど)を実行していることを示します。これは、複数のステップに組み合わせることができ、前の操作の値が次のパイプに渡されます。

この提案では、2つの異なる演算子の構文と機能について言及していますが、ハックパイプ演算子を使用することをお勧めします。一方、F#演算子には、異なる構文を使用して並行操作を単純化するという同じ目的があります(注:これまでのところ、TC39委員会によって2回妨害されていました)。構文の議論は、一般的なユースケースに合わせて最適化し、冗長性を減らすことになります。そのため、提案の作成者は、今後ハックパイプを推奨します。

ハックパイプ演算子の使用

ハックパイプ演算子の構文は非常に単純です。

  • |>:パイプオペレーター
  • %:値のプレースホルダー記号(承認に達する前に変更される可能性があります)

その優先順位は、矢印関数、代入演算子、およびジェネレータ演算子と同じです。これは、同じ優先順位の演算子を使用する場合は括弧を使用する必要があることを意味します。そうしないと、エラーがスローされます。

function exclaim(sentence) {
        return sentence + '!';
}

function addIntroGreeting(sentence) {
        return 'Hello friend, ' + sentence
}

function addInspiration(sentence) {
        sentence + ' You are destined for greatness!'
}

const sentence = 'live life to the fullest';

// Nested
const modifiedSentence = addInspiration(addIntroGreeting(exclaim(sentence)).trim());

// pipe operator as 1 line
const finalSentence = sentence |> exclaim(%) |> addIntroGreeting(%) |> %.trim() |> console.log(%);

// pipe operator split per line
const finalSentence = sentence 
  |> exclaim(%) 
  |> addIntroGreeting(%) 
  |> %.trim()
  |> console.log(%);

// "Hello my friend, live life to the fullest! You are destined for greatness!

パイプ演算子の構文と操作性は、特にネストオプションと比較すると、適用範囲が制限されることなくメソッドチェーンの可読性を提供するため、非常に気に入っています。

左から右に簡単に読んで、初期変数の開始位置と順序の操作の両方を確認できます。私は大ファンです!

提案が進んでいない理由

アイデアの完全な履歴とさまざまな提案は、提案の履歴ドキュメントで読むことができます。一般に、懸念事項はその構文と、他のデータフロー提案とどのように重複するかです。委員会のメンバーは、強い賛成から弱い反対まで、さまざまなレベルのサポートを持っており、JavaScriptでのデータフロー操作の全体的なアプローチについての話し合いが続いています。

最新の情報を入手するには、履歴書とそのリンクをたどることをお勧めします。

結論

パイプオペレーターの提案は、Web開発者にとって関心のあるトピックになっています。現時点ではステージ2に過ぎないため、承認されて言語に追加されるかどうかはまだわかりません。さらに、F#パイプオペレーターに対する過去の提案は却下されました。

一般的なパターンの利点を使いやすく、習得しやすい構文に組み合わせることで、新しい演算子は開発者にとって非常に役立つと思います。詳細については、提案を読むか、 babelプラグインを使用してプロジェクトで検討することをお勧めします。

ソース:https ://blog.logrocket.com/investigating-javascript-pipe-operator-proposal/

#javascript 

What is GEEK

Buddha Community

JavaScriptパイプ演算子の提案を調査する
坂本  篤司

坂本 篤司

1649826000

JavaScriptパイプ演算子の提案を調査する

ECMAScript委員会は、JavaScript開発者の開発を容易にする革新的なアイデアを継続的に受け入れ、奨励しています。すべてのアイデアが言語に実装されているわけではありませんが、特定の、そして頻繁に提案される概念、JavaScriptパイプ演算子が注目を集め始めています。

新しい演算子の提案は、開発者が現在の方法よりも優れた構文、読みやすさ、および利便性で入力値に対して連続した操作を実行できるようにするため、ステージ2に到達しました。

この記事では、入力値に対して並行操作を実行する現在の複数の方法、各メソッドの長所と短所を取り上げ、パイプ演算子の導入がJavaScript開発者にとって今後どのような意味を持つかについて説明します。

JavaScriptの現在の設計パラダイム

今日のJavaScript内では、いくつかの一般的なオプションを使用して操作を連続して実行することが可能です。それぞれに独自のトレードオフがあります。

JavaScriptでのディープネスティング

深い入れ子関数呼び出しを使用することは、連続した操作を実行する1つの方法です。次に例を示します。

function exclaim(sentence) {
        return sentence + '!';
}

function addIntroGreeting(sentence) {
        return 'Hello friend, ' + sentence
}

function addInspiration(sentence) {
        sentence + 'You are destinated for greatness!'
}

let sentence = 'live life to the fullest';

const modifiedSentence = addInspiration(addIntroGreeting(exclaim(sentence)).trim());
console.log(modifiedSentence);

// "Hello my friend, live life to the fullest! You are destinated for greatness!"

次のコードを読むために、開発者がしなければならないことは次のとおりです。

  1. 最もネストされた関数がどこにあり、どの値が関数に渡されるかを見つけ、右にスキャンします
  2. 関数を見つけて、何exclaimが返されるかを判断します
  3. 左に読んで、見てくださいaddGreeting
  4. コードを調べて関数を見つけ、それが何を返すかを判断します
  5. 右を見てtrim、同じレベルの呼び出しがあることを確認してくださいaddGreeting
  6. 最後に、最後の関数を見てみましょう。addInspiration

これらの手順を組み合わせると、特に上記で実行した単純な操作と組み合わせると、一度に読んで頭の中で追跡するのは非常に困難です。目を前後に動かさずに左から右に読むことはできません。

さらに、時間をかけて編集を振りかけると、複数の引数が異なるネストされたレベルで各関数に渡され、処理に独自の認知的負荷を必要とする複雑な操作と組み合わされて、コードの保守が困難になります。

入れ子関数は機能しますが、コードベースにどのようなコストがかかりますか?

JavaScriptで一時変数を使用する

深くネストされた関数呼び出しを使用する代わりに、一時変数を作成すると、上記の読みやすさの問題を軽減できます。

function exclaim(sentence) {
        return sentence + '!';
}

function addIntroGreeting(sentence) {
        return 'Hello friend, ' + sentence
}

function addInspiration(sentence) {
        sentence + ' You are destinated for greatness!'
}

const sentence = 'live life to the fullest';
const exclaimedSentence = exclaim(sentence);
const introAndExclaimedSentence = addIntroGreeting(exclaimedSentence);
const trimmedSentence = introAndExclaimedSentence.trim();
const finalInspirationalSentence = addInspiration(trimmedSentence)
console.log(finalInspirationalSentence)

// "Hello my friend, live life to the fullest! You are destinated for greatness!"

上記のコードの読みやすさは理にかなっており、簡単に理解できますが、一時変数は開発者の摩擦を増やし、コードを冗長にし、変数の命名には時間がかかります。

さらに、変数自体は、非同期コード(コールバック、、、またはpromiseなど)が原因で、予期しないときに予期しない値を持つ可能性がありますasync/await。変数が複数の場所で変更されているバグを追跡するのは難しい場合があります。

一時変数は実行可能なオプションですが、新しいパイプオペレーターは、これらの欠点を引き起こすことなくこれらの問題の多くを解決し、冗長性を犠牲にすることなくプロセスを面倒なものにしないと思います。

JavaScriptでのメソッドチェーン

連続操作を実行するためのもう1つのデザインパターンは、メソッドチェーンです。開発者は、現在このオプションを実装しているJavaScript配列メソッドのおかげで、このオプションに精通しています。

console.log([1, 2, 3].map(num => num * 2).filter(num => num > 2));
// [4, 6]

このスタイルでは、コードを左から右に読み取ることができるため、理解しやすくなります。一時変数ほど冗長ではなく、コードを完全に読み取る必要はありません。では、問題は、なぜメソッドチェーンが十分に優れていないのかということです。

かつては、その限られたアプリケーションでは、操作対象の値にクラスのメソッドが使用可能でなければならないため、すべてのユースケースでそれを利用することが困難になります。

上記の配列の例では、操作からの各戻り値は別の配列であり、配列メソッドにアクセスできます。そうでない場合、それらをチェーンすることはできません。また、JavaScriptの他の構文や演算子(。など)では、そのままでは機能しませんawait

なぜパイプ演算子を使用するのですか?

テクノロジーのほとんどのものと同様に、上記の一般的なパターンにはそれぞれ長所と短所があります。開発者の裁量により、作成しようとしているコードに応じてトレードオフを行うことができ、保守可能で読み取り可能なコードを作成するために最善を尽くします。

アーキテクチャやコードレビューの議論では、意見の異なる人が必ずしも正しいか間違っているとは限らないことがよくあります。だからこそ、テクノロジーにおける非常に多くの答えが「状況によって異なります」ということになります。

パイプオペレーターは、すべてのオプションを取り込んで、それらすべての最良のものを組み合わせた代替ソリューションを返します。古いパターンを取り除くことはなく、開発者と言語をより良くすることができるオプションを追加しています。あなたがそうするなら、お互いに有利です。

そうは言っても、パイプオペレーターについてさらに詳しく見ていきましょう。

JavaScriptでのパイプ演算子の提案は何ですか?

パイプ演算子は、今日の最良のオプションを組み合わせて、値に対して連続した操作(関数呼び出しなど)を実行していることを示します。これは、複数のステップに組み合わせることができ、前の操作の値が次のパイプに渡されます。

この提案では、2つの異なる演算子の構文と機能について言及していますが、ハックパイプ演算子を使用することをお勧めします。一方、F#演算子には、異なる構文を使用して並行操作を単純化するという同じ目的があります(注:これまでのところ、TC39委員会によって2回妨害されていました)。構文の議論は、一般的なユースケースに合わせて最適化し、冗長性を減らすことになります。そのため、提案の作成者は、今後ハックパイプを推奨します。

ハックパイプ演算子の使用

ハックパイプ演算子の構文は非常に単純です。

  • |>:パイプオペレーター
  • %:値のプレースホルダー記号(承認に達する前に変更される可能性があります)

その優先順位は、矢印関数、代入演算子、およびジェネレータ演算子と同じです。これは、同じ優先順位の演算子を使用する場合は括弧を使用する必要があることを意味します。そうしないと、エラーがスローされます。

function exclaim(sentence) {
        return sentence + '!';
}

function addIntroGreeting(sentence) {
        return 'Hello friend, ' + sentence
}

function addInspiration(sentence) {
        sentence + ' You are destined for greatness!'
}

const sentence = 'live life to the fullest';

// Nested
const modifiedSentence = addInspiration(addIntroGreeting(exclaim(sentence)).trim());

// pipe operator as 1 line
const finalSentence = sentence |> exclaim(%) |> addIntroGreeting(%) |> %.trim() |> console.log(%);

// pipe operator split per line
const finalSentence = sentence 
  |> exclaim(%) 
  |> addIntroGreeting(%) 
  |> %.trim()
  |> console.log(%);

// "Hello my friend, live life to the fullest! You are destined for greatness!

パイプ演算子の構文と操作性は、特にネストオプションと比較すると、適用範囲が制限されることなくメソッドチェーンの可読性を提供するため、非常に気に入っています。

左から右に簡単に読んで、初期変数の開始位置と順序の操作の両方を確認できます。私は大ファンです!

提案が進んでいない理由

アイデアの完全な履歴とさまざまな提案は、提案の履歴ドキュメントで読むことができます。一般に、懸念事項はその構文と、他のデータフロー提案とどのように重複するかです。委員会のメンバーは、強い賛成から弱い反対まで、さまざまなレベルのサポートを持っており、JavaScriptでのデータフロー操作の全体的なアプローチについての話し合いが続いています。

最新の情報を入手するには、履歴書とそのリンクをたどることをお勧めします。

結論

パイプオペレーターの提案は、Web開発者にとって関心のあるトピックになっています。現時点ではステージ2に過ぎないため、承認されて言語に追加されるかどうかはまだわかりません。さらに、F#パイプオペレーターに対する過去の提案は却下されました。

一般的なパターンの利点を使いやすく、習得しやすい構文に組み合わせることで、新しい演算子は開発者にとって非常に役立つと思います。詳細については、提案を読むか、 babelプラグインを使用してプロジェクトで検討することをお勧めします。

ソース:https ://blog.logrocket.com/investigating-javascript-pipe-operator-proposal/

#javascript