フロントエンドでの関数型プログラミングについて

関数型プログラミングのトピックに興味を持ち、 ここで記事を見て、翻訳することに決めました。記事は小さくなりましたが、興味深いものでした。 オリジナルへのリンク。 次は翻訳そのものです。



関数型プログラミングは、フロントエンド開発でますます一般的になっています。 しかし、それは本当に何ですか？



あなたがフロントエンドの開発者であれば、おそらく彼を知らなくても、オブジェクト指向プログラミングに精通しているでしょう。 多くのJSライブラリは、目的の効果を記述するために作成できるクラスを使用します。次に例を示します。

const waypoint = new Waypoint({ element: document.getElementById('thing'), handler: () => console.log('You have scrolled to a thing') })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptはOOPで一般的に使用されますが、関数型プログラミングでJavaScriptを使用することを妨げるものは何もありません。 それらが互いにどのように異なるかを見てみましょう。



しかし、最初に、免責事項、私はAF対OOPが広く、微妙で、時には曖昧な主題であることを知っています。 以下は、おそらく二分法のわずかな単純化です。 それでも、フロントエンド開発はFPの影響から大きな利益を得ることができると思います。

機能指向とオブジェクト指向

関数型プログラミングに向けた小さな議論から始めましょう









（しゃれ：楽しい-楽しい、うんち-たわごと）



ここでバランスを取りたいと思いますが、関数型プログラミングに対する議論は...難しいということです。 これは理解できることであり、用語でさえ不思議に聞こえます。モナド、ファンクター、モノイド、および他のすべての数学用語は多くの人々を遠ざけることができます。 純粋に関数型の言語であるHaskellは、理解が難しいことで知られています。



ただし、機能的なコードを記述するために純粋に機能的な言語に切り替える必要はありません。 「機能的な」言語とは、言語が機能的なパラダイムを念頭に置いて設計されていることを意味します。 JavaScriptは、必要に応じて機能することができます。



まず、より完全な図を取得してみましょう。 私にとっては、少なくともその違いは次のように要約されます。

• オブジェクト指向プログラミングは 、周囲の世界について人々がどう考えるかを模倣するため、理解しやすいです。
• 関数型プログラミングは学習がより難しく、日常生活とは異なる考え方をするため、少し脳を再編成する必要があります。

それでは、OOPが直感的で馴染みがあるのに、なぜ誰かが思考を再構築する必要があるのでしょうか？ 自慢するためだけに？ それとも、多くの数学を導入することによって仕事（およびチーム）をより難しくしたい人がいるかもしれません。 いや AFを習得するのは難しいかもしれませんが、そのメリットには価値があります。



機能的なコードが実際にオブジェクト指向とどのように異なるかを見てみましょう。

ドアを閉める方法

あなたが世界を作り、新しい機能、つまりドアを作っていると想像してください。 部屋は閉じたり開いたり、部屋へのアクセスを制限または許可することができます。 かっこいい！ しかし、最初に機能的な方法で動作するようにコードが必要です。

 //    ,    Object.assign    // : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign const open = obj => Object.assign({}, obj, {locked: false}) // ,   : const myDoor = { color: 'red', locked: true, } // myDoor    (     ), //      "",     const myDoorOpened = open(myDoor)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして今、オブジェクト指向：

 //    : class Door { constructor(color, locked) { this.color = color this.locked = locked } open() { this.locked = false } } //    "" const myDoor = new Door('red', true) myDoor.locked // -> true myDoor.open() myDoor.locked // -> false
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでわかるAFの利点は何ですか？

• 再利用します。 機能バージョンでは、open関数はブール値のロックされたプロパティを持つすべてのものを開くことができます。 将来的には、チェストを作成し、同じ機能を使用してそれを開くことができます。 FPを使用すると、Unixの概念、Do One ThingとDo It Wellに準拠した、小さくてクリーンな関数を作成できます。
• 不変性 コードが大きくなるにつれて、オブジェクト指向バージョンでmyDoorオブジェクトを追跡するのが難しくなります（x行で既に開いていましたか？）。 長期的には、FIが推奨する不変のデータ構造を使用する方が安全です。
• データ FPバージョンでは、myDoorはJSONファイルからインポートできる、またはREST APIから取得できる純粋なデータです。 OOPを備えたバージョンでは、myDoorはデータを保存するオブジェクトであり、このデータを管理するためのメソッドです。
• 簡潔さ 。 コードが大きくなると、保守が難しくなり、機能的なコードはより簡潔になります。

OOPが悪いということではなく、問題になるのは非常に簡単です。 一方、関数型言語では、悪いコードを書くことは単純により困難です。



たとえば、Elmでは、switchステートメントでcaseを忘れると 、 コンパイラは警告を表示します 。 機能的スタイルは、プログラマーの目的に関する詳細情報を伝えるので、開発環境は、プログラマーパートナーのようにあなたと連携できます。

フロントエンド開発における関数型プログラミング

フロントエンドの開発者コミュニティは、2016年に関数型プログラミングに興味を持つようになりました。 AFの例を見つけることができるいくつかの興味深いプロジェクトを次に示します。

• TypeScriptとFlowは、JavaScriptで強力な型付けを提供します。 TypeScriptはJSのアドオンです。一方、Flowは、たとえば、行があるべき場所に数字が渡された場合に警告する警告システムです。
• Ramdaは「JavaScriptプログラマ向けの実践的な機能ライブラリ」です。一般的に強力な機能ツールです。 lodashまたはアンダースコアに似ていますが、AFを使用します。
• Reduxは、FPを含む状態監視ライブラリであり、そのコアには純粋な機能が含まれています。
• Elm 、 ClojureScript 、 PureScriptは、JavaScriptでコンパイルされる関数型言語です。 学習曲線は、上記のプロジェクトよりもはるかに急です。

次は？

関数型プログラミングに飛び込みたい場合は、次のことをお勧めします。

1. 徹底的だが非常にアクセスしやすいAFの紹介
2. フリスビー教授関数プログラミングガイド （無料の電子書籍）
3. 関数型プログラミング言語 -これらは不可解な用語です

JavaScriptの世界から来た場合：

1. ラムダでの考え -ラムダ入門
2. Awesome JS FI - JS向けの機能指向リソース
3. エリックエリオット 関数型プログラミングとは

読んでくれてありがとう！



誤字を見つけたり、翻訳の提案がある場合は、プライベートメッセージを書いてください。