機能プログラミングは、プログラムを最も単純な形式に縮小することにより、プログラムの複雑さを低下させる方法を提供します。これは、純粋な數(shù)學的関數(shù)のように振る舞う機能です。 機能プログラミングの原則を學ぶことは、スキルセットに最適な追加であり、バグが少ないシンプルなプログラムを作成するのに役立ちます。

純粋な関數(shù)

この関數(shù)は

<span>// pure
</span><span>function add(a<span>, b</span>) {
</span>  <span>return a + b;
</span><span>}
</span>

常に同じ入力に対して同じ出力値を返します。 この関數(shù)は、関數(shù)の外側の外部可変狀態(tài)に依存しているため、不純物です。 この変數(shù)を関數(shù)內で移動すると、それは純粋になり、私たちの関數(shù)が毎年を正しくチェックすることを確信できます

<span>// impure
</span><span>var minimum = 21;
</span><span>var checkAge = function(age) {
</span>  <span>return age >= minimum; // if minimum is changed we're cactus
</span><span>};
</span>

純粋な関數(shù)には副作用がありません。ここに留意すべき重要なものがいくつかあります：

関數(shù)の外側のシステム狀態(tài)にアクセス

<span>// pure
</span><span>var checkAge = function(age) {
</span>  <span>var minimum = 21;
</span>  <span>return age >= minimum;
</span><span>};
</span>

http呼び出しを作成します ユーザー入力の取得

dom
• のクエリ
• 制御された突然変異
• アンダーリングオブジェクトを変更する配列とオブジェクトのミューテーターメソッドに注意する必要があります。この例は、配列のスプライスとスライス方法の違いです。
• 機能に渡されたオブジェクトの変異を避けた場合、プログラムが推論しやすくなるようになると、私たちの関數(shù)が私たちの下から物事を切り替えないことを合理的に期待できます。
• 純粋な関數(shù)の利點

同じ入力が常に同じ出力を生成するため、

<span>// impure, splice mutates the array
</span><span>var firstThree = function(arr) {
</span>  <span>return arr.splice(0,3); // arr may never be the same again
</span><span>};
</span>
<span>// pure, slice returns a new array
</span><span>var firstThree = function(arr) {
</span>  <span>return arr.slice(0,3);
</span><span>};
</span>

自己文書化

<span>let items = ['a','b','c'];
</span><span>let newItems = pure(items);
</span><span>// I expect items to be ['a','b','c']
</span>

不當に純粋な機能的プログラミング

プログラムを純粋な機能に減らすと、プログラムの複雑さを大幅に減らすことができます。ただし、機能的なプログラムは、機能的な抽象化をあまりにも押し上げている場合、レインマンの支援を理解するために最終的に必要とする可能性があります。
上のコードを消化するのに少し時間がかかります。

• 機能的なプログラミングの背景がない限り、これらの抽象化（カレー、作曲と小道具の過度の使用）は、実行の流れと同様に、従うのが非常に困難です。 以下のコードは理解しやすく、変更する方が簡単で、上記の純粋に機能的なアプローチよりもプログラムをはるかに明確に説明しており、コードが少ない。

  アプリ関數(shù)には、タグの文字列
  • が取得されます
  flickr
  • からjsonを取得します
  URLSを応答
  • に引き出します
  ノードの配列
  • を構築します
  ドキュメントに挿入します
  または、FetchやPromiseなどの抽象化を使用したこの代替APIは、非同期行動の意味をさらに明確にするのに役立ちます。

  <span>// pure
  </span><span>function add(a<span>, b</span>) {
  </span>  <span>return a + b;
  </span><span>}
  </span>

  注：フェッチと約束は今後の基準であるため、今日使用するにはポリフィルが必要です。

  ajax要求とDOM操作は純粋になることはありませんが、殘りの部分から純粋な機能を作成して、JSONの一連の畫像へのマッピングを行うことができます。

  <span>// impure
  </span><span>var minimum = 21;
  </span><span>var checkAge = function(age) {
  </span>  <span>return age >= minimum; // if minimum is changed we're cactus
  </span><span>};
  </span>

  私たちの関數(shù)は今、2つのことをしているだけです：

  マッピング応答データ - > urls

  <span>// pure
  </span><span>var checkAge = function(age) {
  </span>  <span>var minimum = 21;
  </span>  <span>return age >= minimum;
  </span><span>};
  </span>

  マッピングURLS->畫像

  これを行う「機能的な」方法は、これらの2つのタスクの個別の関數(shù)を作成することであり、Composeを使用して、一方の関數(shù)の応答を他の関數(shù)に渡すことができます。
  composeは、関數(shù)のリストの構成である関數(shù)を返し、それぞれが続く関數(shù)の返品値を消費します。
  • これが行われていることです。URLの応答を畫像関數(shù)に渡します。
  データフローの方向を理解するために右から左へと構成する引數(shù)を読むのに役立ちます。

  プログラムを純粋な機能に減らすことにより、將來それらを再利用する能力が高まり、テストがはるかに簡単で、自己文書化されています。 欠點は、（最初??の例のように）過度に使用すると、これらの機能的な抽象化により、

  より複雑な

  <span>// impure, splice mutates the array
  </span><span>var firstThree = function(arr) {
  </span>  <span>return arr.splice(0,3); // arr may never be the same again
  </span><span>};
  </span>
  <span>// pure, slice returns a new array
  </span><span>var firstThree = function(arr) {
  </span>  <span>return arr.slice(0,3);
  </span><span>};
  </span>

  になる可能性があるということです。 コードをリファクタリングするときに尋ねる最も重要な質問はこれです：

  コードは読みやすく理解しやすいですか？

  必須関數(shù)
  今、私は機能的なプログラミングをまったく攻撃しようとはしていません。すべての開発者は、プログラミングにおける一般的なパターンをより簡潔な宣言コードに抽象化できる基本的な機能を學ぶために、またはMarijn Haverbekeが言うように、協(xié)調した努力をする必要があります。

  <span>let items = ['a','b','c'];
  </span><span>let newItems = pure(items);
  </span><span>// I expect items to be ['a','b','c']
  </span>

  基本的な機能のレパートリーで武裝したプログラマー、さらに重要なことには、それらの使用方法に関する知識は、ゼロから始まる人よりもはるかに効果的です。 - Eloquent JavaScript、Marijn Haverbeke

  ここに、すべてのJavaScript開発者が學習してマスターする必要がある重要な機能のリストがあります。また、JavaScriptのスキルを磨いて、これらの各機能をゼロから書くのに最適な方法でもあります。

  配列
  foreach
  Map
  フィルター
  減少
  関數(shù)
  debounce
  • を作成します
  partial
  curry
  少ない
  機能的なプログラミングの概念を使用して、以下のコードを改善するために取ることができるいくつかの実用的な手順を見てみましょう。
  共有狀態(tài)への関數(shù)の依存

  <span>// pure
  </span><span>function add(a<span>, b</span>) {
  </span>  <span>return a + b;
  </span><span>}
  </span>

  を減らします

  これは明白で些細なことに聞こえるかもしれませんが、私はまだ自分の外に多くの狀態(tài)にアクセスして変更する機能を書きます。これにより、テストが難しくなり、エラーが発生しやすくなります。

  反復するためにforeachのような読みやすい言語抽象化を使用します

  <span>// impure
  </span><span>var minimum = 21;
  </span><span>var checkAge = function(age) {
  </span>  <span>return age >= minimum; // if minimum is changed we're cactus
  </span><span>};
  </span>

  マップのような高レベルの抽象化を使用して、コードの量を減らす

  <span>// pure
  </span><span>var checkAge = function(age) {
  </span>  <span>var minimum = 21;
  </span>  <span>return age >= minimum;
  </span><span>};
  </span>

  機能を最も単純なフォームに低下させます

  <span>// impure, splice mutates the array
  </span><span>var firstThree = function(arr) {
  </span>  <span>return arr.splice(0,3); // arr may never be the same again
  </span><span>};
  </span>
  <span>// pure, slice returns a new array
  </span><span>var firstThree = function(arr) {
  </span>  <span>return arr.slice(0,3);
  </span><span>};
  </span>

  動作が停止するまでコードを削除します

  <span>let items = ['a','b','c'];
  </span><span>let newItems = pure(items);
  </span><span>// I expect items to be ['a','b','c']
  </span>

  このような単純なタスクのために関數(shù)はまったく必要ありません。言語は、逐語的に書き出すのに十分な抽象化を提供します。
  テスト
  プログラムを単純にテストできることは純粋な機能の重要な利點です。このセクションでは、以前に見ていたFlickrモジュールのテストハーネスを設定します。

  <span>import _ from 'ramda';
  </span><span>import $ from 'jquery';
  </span>
  <span>var Impure = {
  </span>  <span>getJSON: _.curry(function(callback<span>, url</span>) {
  </span>    $<span>.getJSON(url, callback);
  </span>  <span>}),
  </span>
    <span>setHtml: _.curry(function(sel<span>, html</span>) {
  </span>    <span>$(sel).html(html);
  </span>  <span>})
  </span><span>};
  </span>
  <span>var img = function (url) {
  </span>  <span>return $('<img />', { src: url });
  </span><span>};
  </span>
  <span>var url = function (t) {
  </span>  <span>return 'http://api.flickr.com/services/feeds/photos_public.gne?tags=' +
  </span>    t <span>+ '&format=json&jsoncallback=?';
  </span><span>};
  </span>
  <span>var mediaUrl = _.compose(_.prop('m'), _.prop('media'));
  </span><span>var mediaToImg = _.compose(img, mediaUrl);
  </span><span>var images = _.compose(_.map(mediaToImg), _.prop('items'));
  </span><span>var renderImages = _.compose(Impure.setHtml("body"), images);
  </span><span>var app = _.compose(Impure.getJSON(renderImages), url);
  </span><span>app("cats");
  </span>

  ターミナルを起動してテキストエディターに準備を整えて準備ができています。Mochaをテストランナーとして使用し、ES6コードをコンパイルするためにBabelを使用します。
  Mochaには、セットアップや分解タスクの前後などのテストやフックを分割するための、説明やそれのような便利な機能がたくさんあります。 ASSERTは、単純な等式テストを実行できるコアノードパッケージであり、アサートとアサートです。

  最初のテストをテスト/example.js

  で書きましょう
  パッケージを開き、「テスト」スクリプトを次のように修正します

  <span>var app = (tags)=> {
  </span>  <span>let url = <span>`http://api.flickr.com/services/feeds/photos_public.gne?tags=<span>${tags}</span>&format=json&jsoncallback=?`</span>
  </span>  $<span>.getJSON(url, (data)=> {
  </span>    <span>let urls = data.items.map((item)=> item.media.m)
  </span>    <span>let images = urls.map((url)=> $('<img />', { src: url }) )
  </span>
      <span>$(document.body).html(images)
  </span>  <span>})
  </span><span>}
  </span><span>app("cats")
  </span>

  その後、コマンドラインからNPMテストを実行して、すべてが期待どおりに機能していることを確認できるはずです。
  boom。

  <span>let flickr = (tags)=> {
  </span>  <span>let url = <span>`http://api.flickr.com/services/feeds/photos_public.gne?tags=<span>${tags}</span>&format=json&jsoncallback=?`</span>
  </span>  <span>return fetch(url)
  </span>  <span>.then((resp)=> resp.json())
  </span>  <span>.then((data)=> {
  </span>    <span>let urls = data.items.map((item)=> item.media.m )
  </span>    <span>let images = urls.map((url)=> $('<img />', { src: url }) )
  </span>
      <span>return images
  </span>  <span>})
  </span><span>}
  </span><span>flickr("cats").then((images)=> {
  </span>  <span>$(document.body).html(images)
  </span><span>})
  </span>

  注：このコマンドの最後に-Wフラグを追加することもできます。モカに変更を監(jiān)視し、テストを自動的に実行したい場合は、再実行でかなり速く実行されます。

  Flickrモジュールのテスト

  <span>let responseToImages = (resp)=> {
  </span>  <span>let urls = resp.items.map((item)=> item.media.m )
  </span>  <span>let images = urls.map((url)=> $('<img />', { src: url }))
  </span>
    <span>return images
  </span><span>}
  </span>

  モジュールをlib/flickr.js

  <span>let urls = (data)=> {
  </span>  <span>return data.items.map((item)=> item.media.m)
  </span><span>}
  </span><span>let images = (urls)=> {
  </span>  <span>return urls.map((url)=> $('<img />', { src: url }))
  </span><span>}
  </span><span>let responseToImages = _.compose(images, urls)
  </span>

  に追加しましょう
  私たちのモジュールは、2つの方法を公開しています。flickrが公開されるように_ responsetoimages _responsetoimagesです。

  いくつかの新しい依存関係があります：jquery、アンダースコア、フェッチと約束のためのポリフィル。 それらをテストするには、JSDOMを使用してDOMオブジェクトウィンドウとドキュメントをポリフィルすることができ、Sinonパッケージを使用してFetch APIをスタブすることができます。

  <span>// pure
  </span><span>function add(a<span>, b</span>) {
  </span>  <span>return a + b;
  </span><span>}
  </span>

  test/_setup.jsを開くと、モジュールが依存しているグローバルでJSDOMを構成します。

  <span>// impure
  </span><span>var minimum = 21;
  </span><span>var checkAge = function(age) {
  </span>  <span>return age >= minimum; // if minimum is changed we're cactus
  </span><span>};
  </span>

  私たちのテストは、事前定義された入力を與えられた関數(shù)出力について主張するテスト/flickr.jsに座ることができます。 Global Fetchメソッドを「スタブ」またはオーバーライドして、HTTPリクエストを傍受および偽造して、Flickr APIを直接ヒットせずにテストを実行できるようにします。
  NPMテストでテストを再度実行すると、3つの保証グリーンダニが表示されるはずです。

  <span>// pure
  </span><span>var checkAge = function(age) {
  </span>  <span>var minimum = 21;
  </span>  <span>return age >= minimum;
  </span><span>};
  </span>

  phew！小さなモジュールとそれを構成する機能をテストし、純粋な機能と途中で機能構成を使用する方法について學びました。 私たちは純粋なものを不純なものから分離しました。読みやすく、小さな機能で構成され、よくテストされています。 コードは、上記の不合理に純粋な

  例よりも

  <span>// impure, splice mutates the array
  </span><span>var firstThree = function(arr) {
  </span>  <span>return arr.splice(0,3); // arr may never be the same again
  </span><span>};
  </span>
  <span>// pure, slice returns a new array
  </span><span>var firstThree = function(arr) {
  </span>  <span>return arr.slice(0,3);
  </span><span>};
  </span>

  を読み取り、理解し、変更するのが簡単で、コードをリファクタリングするときの私の唯一の目的です。 純粋な関數(shù)、それらを使用してください リンク フリスビー教授の機能プログラミングのほとんど適切なガイド - @drboolean - ブライアン?ロンズドルフによる機能プログラミングに関するこの素晴らしい無料の本は、私が出會うFPの最高のガイドです。 この記事の多くのアイデアと例は、この本から來ています。

  Eloquent JavaScript - 機能的なプログラミング@Marijnjh - Marijn Haverbekeの本は、プログラミングの私のお気に入りのイントロの1つであり、機能的プログラミングに関する素晴らしい章もあります。

  アンダースコア - アンダースコア、ロダッシュ、ラムダなどのユーティリティライブラリを掘り下げることは、開発者としての成熟の重要なステップです。これらの機能を使用する方法を理解すると、記述する必要があるコードの量が大幅に削減され、プログラムがより宣言的になります。

  -

  今のところそれはすべてです！ 読んでくれてありがとう。これがJavaScriptで機能的なプログラミング、リファクタリング、テストの良い紹介であることを願っています。 これは、これらのパターンを奨勵または施行するReact、Redux、ELM、Cycle、Reactivexなどのライブラリの人気が高まっているため、現(xiàn)時點で波を起こしている興味深いパラダイムです。
  • ジャンプして、水は暖かいです。
  • 合理的に純粋な機能プログラミングに関するよくある質問
  • 機能プログラミングにおける純粋な機能の重要性は何ですか？
  純粋な関數(shù)は、機能プログラミングの基本的な概念です。それらは、同じ入力に対して常に同じ出力を生成し、副作用がない関數(shù)です。これは、範囲外の狀態(tài)を変更しないか、外部狀態(tài)に依存しないことを意味します。これにより、外部要因を心配することなく、入力と出力を考慮するだけでいいため、予測可能でテストが簡単になります。純粋な機能は、コードの再利用性と読みやすさも促進し、コードを理解し、維持しやすくする。

  機能的プログラミングは他のプログラミングパラダイムとどのように異なりますか？

  機能プログラミングは、計算を數(shù)學機能の評価として扱い、狀態(tài)および変化可能なデータの変更を回避するプログラミングパラダイムです。これは、プログラムが実行されたときにグローバル狀態(tài)を変更するステートメントで構成されている命令的なプログラミングとは対照的です。機能プログラミングは、一流の市民としての機能など、高レベルの抽象化を促進し、聲明の代わりに表現(xiàn)を使用したプログラミングを奨勵します。これにより、推論が簡単なプログラミングのより宣言的で表現(xiàn)力豊かなスタイルにつながります。同じ入力に対して同じ出力を生成し、副作用を生成しません。例は次のとおりです。

  関數(shù)add（a、b）{

  a b同じ結果が與えられ、外部の狀態(tài)を変更しないと同じ結果。

  
  JavaScriptで純粋な機能を使用することの利點は何ですか？関數(shù)の入力と出力を考慮するだけであるため、コードをより予測可能でテストしてデバッグしやすくします。また、明確でシンプルなプログラミングスタイルを宣伝するため、コードをより読みやすく保守しやすくします。さらに、純粋な機能は非常に再利用可能で構成可能であり、コードを減らすとより複雑な機能を構築することができます。 、彼らはまた、いくつかの課題を提示します。主な課題の1つは、JavaScriptが純粋に機能的な言語ではなく、副作用と可変データを可能にすることです。これは、機能に意図せずに副作用を導入するのを避けるために注意する必要があることを意味します。さらに、純粋な関數(shù)を使用すると、データの変異を避け、代わりに新しいデータを返す必要があるため、より冗長コードにつながる場合があります。同時性と並列性に特に適しています。純粋な機能には副作用がないため、人種の條件やデータの腐敗について心配することなく、並行して安全に実行できます。これにより、機能プログラミングは、特にマルチコアおよび分散コンピューティング環(huán)境で、同時および並列アプリケーションを開発するための強力なツールになります。

  関數(shù)プログラミングの関數(shù)構成とは？

  関數(shù)構成は、機能プログラミングの基本的な概念です。 2つ以上の関數(shù)を組み合わせて新しい関數(shù)を作成することが含まれます。 1つの関數(shù)の結果は、次の関數(shù)への入力として使用されます。これにより、単純な関數(shù)から複雑な機能を構築し、コードの再利用性と読みやすさを促進できます。

  機能的プログラミングの不変性は何ですか？これは、データ構造が作成されると、変更できないことを意味します。代わりに、データ構造を変更する場合は、目的の変更を伴う新しい構造を作成します。これにより、副作用が回避され、コードがより安全で推論が容易になります。

  機能プログラミングは狀態(tài)をどのように処理しますか？

  機能プログラミングでは、副作用を回避するために狀態(tài)は慎重に処理されます。狀態(tài)を変更する代わりに、機能プログラミングはしばしば新しい狀態(tài)を返す純粋な関數(shù)を使用します。これにより、狀態(tài)は予測可能で管理しやすくなります。いくつかの機能的なプログラミング言語は、HaskellのMonadsなど、國家管理の高度な機能も提供しています。 。マルチコアや分散コンピューティングなど、並行性と並列性が重要な狀況では特に役立ちます。機能プログラミングは、純粋な機能と不変性がデータの整合性を確保するのに役立つデータ処理と分析でも一般的に使用されています。さらに、フロントエンド開発では機能的なプログラミングの概念がますます採用されており、React.jsなどの一般的なフレームワークがコンポーネント開発に機能的なスタイルを使用しています。