Clever Geek Handbook

JavaScriptでArrow関数が本当に必要とするもの

こんにちは、Habr！MartinNovákによる記事「JavaScriptに矢印機能がある本当の理由」の翻訳をあなたの注意を引くために提示します。





*ゲームSkyrimからのミームフレーズ



それでも矢印機能を使用しない場合は、自分を責めないでください。それは両親の仕事です。代わりに、勤勉な学習者として使用することで得られるメリットについて考えてください。今日、私のコードはすべて矢印関数を使用して記述されています。



これは同じコードの例であり、従来のスタイルでも記述されています。 



const arrowFunction = (arg1, arg2) => arg1 + arg 2;

const traditionalFunction = function(arg1, arg2) {
  return arg1 + arg2;
};


矢印関数を使用して記述した場合、コードがはるかに短いことに気付くかもしれません。矢印の前に書かれたものはすべて引数であり、矢印の後は返された結果です。

複数のアクションを含む関数が必要な場合は、次のように記述できます。 



const arrowFunction = (arg1, arg2) => {
  const result = arg1 + arg2;
  return result;
};


矢印関数はラムダ関数とも呼ばれ、JavaScriptだけでなく使用されます。Pythonは、ラムダ関数も発生する良い例です。



Pythonでは、それらの構文は次のとおりです。 



lambdaFunction = lambda a, b : a + b


簡素化する



矢印関数を使用すると、KISSの原則（Keep-it-simple-stupid）および単一の責任の原則（各関数が1つの特定のアクションのみを担当する）に従ってコードを単純化するようになります。



一般的に、私は中括弧{}なしでそれらを書きます。関数が読みにくい場合、または関数で複数の式を使用する必要がある場合は、関数をいくつかの小さな関数に分割することをお勧めします。

このコードは、記述が簡単で、再利用とテストが簡単です。また、関数には、実行している作業を正確に表すために、よりわかりやすい名前を付けることができます。



ファーストクラスの機能



JavaScriptにはファーストクラスの関数があります。これらは、通常の変数のように使用される関数です。それらは他の関数への引数として機能することも、結果としてそれらを返すこともできます。あなたが最もよく知っている例： 



document.querySelector('#myButton').addEventListner('click', function() {
  alert('click happened');
});


ここに示されているのは、addEventListenerに引数として渡される匿名関数です。この手法は、Javascriptでコールバックによく使用されます。



関数を返す例は異なります-以下に示します： 



const myFirstClassFunction = function(a) {
  return function(b) {
    return a + b;
  };
};

myFirstClassFunction(1)(2); // => 3


ただし、矢印機能を使用すると、すべてがはるかにきれいに見えます。 



const myFirstClassArrow = a => b => a + b;

myFirstClassArrow(1)(2); // => 3


ここではすべてが単純です。最後の矢印の前に書かれているのは引数であり、最後の矢印の後に書かれているのは計算です。実際、私たちはいくつかの関数を使用しており、複数の呼び出しfn（call1）（call2）を使用することもできます。



部分的な適用



矢印関数を使用して、レゴブリックのように、部分的に適用可能な関数を作成できます。これにより、特定の引数を渡すことで特別な関数を作成できます。以下の例でそれを分解してみましょう： 



const add = a => b => a + b;

const increaseCounter = counter => add(1)(counter);
increaseCounter(5); // => 6

const pointFreeIncreaseCounter = add(1);
pointFreeIncreaseCounter(5); // => 6


これは、デフォルト変数で関数を使用するのと似ていますが、部分的なアプリケーションにより柔軟性が高まります。



これらの機能はカレーと呼ばれます。これらは、機能プログラミングで一般的な一連の単一関数とモナドです。



機能プログラミング



ご想像のとおり、矢印関数の主な理由は機能プログラミングです。これは、単純な関数の構成に基づく宣言型のパラダイムです。



機能プログラミングは、多くの開発者（記事の著者を含む）が好むOOPの代替手段です。どんなスタイルでも議論できますが、機能的なプログラミングはかっこいいし、かつては違った考え方をしたと思っているだけでも不快に感じるはずです。



純粋な関数は入力のみに依存し、常に何らかの値を返します。他の変数を変更（変更）することはなく、入力値以外の外部データに依存しません。これにより、参照の透過性が得られ、プログラミングが容易になります。



もちろん、1つの変数を変更せずに、大量のコードを作成することは常に可能です。



お気づきかもしれませんが、矢印関数は入力と出力の間でデータを変換するように設計されています。中括弧なしで省略表現を返す必要さえありません。



矢印関数-結論



矢印関数を使用すると、構文が短くなり、コードの記述、読み取り、テストにかかる時間が短縮され、コードが簡素化されます。あなたは高度な開発者である可能性が高いため、考えてみてください。これらのヒントを使用すると、より高度になり、関連性が高まります。機能的なプログラミングは本当にクールです。それはあなたをコードからエレガントな短い機能を作るアーティストに変えます。



実際の機能例



ウサギの穴に何が隠されているかを理解するために、オープンソースライブラリ@ 7urtle / lambdaの使用例を見てみましょう。 



import {trim, upperCaseOf, lengthOf, lastLetterOf, includes, compose} from '@7urtle/lambda';

const endsWithPunctuation = input =>
  includes(lastLetterOf(input))('.?,!');

const replacePunctuationWithExclamation = input =>
  substr(lengthOf(input) - 1)(0)(input) + '!';

const addExclamationMark = input =>
  endsWithPunctuation(input)
    ? replacePunctuationWithExclamation(input)
    : input + '!';

const shout = compose(addExclamationMark, upperCaseOf, trim);

shout(" Don't forget to feed the turtle.");
// =>    !


矢印関数を使用して機能プログラミングを学ぶことは非常に中毒性があります。これにより、パフォーマンスと再利用性が向上した短いコードを記述できます。



JavaScriptは、Cのような構文の使用と、機能プログラミングの特殊性との間の不一致が複雑になる可能性があります。人々がよりよく理解し、学習資料へのアクセスを提供できるようにするために、私は@ 7urtle / lambdaライブラリを開発しました。自分のペースで機能プログラミングを習得できます。www.7urtle.comは、必要なすべてのツールを提供することで、このパラダイムを学ぶのに役立ちます。


More articles:


All Articles