ELMによる機能的な反応性プログラミング：紹介

コアポイント

• ELMは、JavaScriptにまとめられた機能的なプログラミング言語であり、フロントエンド開発の簡素化と強化に焦点を当てています。タイプの推論を使用し、反応的であり、純粋なビュー、参照透明性、不変のデータなどの機能的なプログラミングパターンを組み合わせています。
• ELMは、不変のデータ、DOMを記述する純粋なビュー、一元配置データストリーム、集中状態、および集中データのバリエーション説明、限られた副作用などのモードを使用します。これらのパターンにより、アプリケーションは予測、維持、堅牢性を容易にします。
• ELMのセキュリティ機能は、値が空になる可能性を回避し、開発者にアプリケーションのすべての代替パスを処理することを強制します。これにより、アプリケーションに多くの信頼性があり、ELMアプリケーションでランタイムエラーがめったに表示されません。
• elmのアーキテクチャは、他の多くの言語で使用されるモデルビューコントローラー（MVC）パターンとは異なるモデルビューアップデート（MVU）パターンに従います。このパターンにより、コード構造を簡単に構築し、アプリケーションを介してデータがどのように流れるかを推測できます。

ELMは、最近かなりの注目を集めた機能的なプログラミング言語です。この記事では、それが何であり、なぜあなたがそれに注意を払うべきかを探ります。

ELMの主な焦点は、フロントエンド開発をよりシンプルで堅牢にすることです。 ElmはJavaScriptにコンパイルされるため、最新のブラウザのアプリケーションを構築するために使用できます。

elmは、タイプの推論を備えた静的にタイプされた言語です。タイプの推論とは、すべてのタイプを自分で宣言する必要がないことを意味します。コンパイラに多くのタイプを推測させることができます。たとえば、one = 1を書くことにより、コンパイラはoneが整数であることを知っています。

elmは、ほぼ純粋に機能的なプログラミング言語です。 ELMは、純粋なビュー、参照透明性、不変のデータ、制御された副作用などの多くの機能パターンに基づいています。 HaskellやOcamlなどの他のML言語と密接に関連しています。

elmは反応的です。エルム内のすべてが信号を通過します。 ELMの信号は、時間の経過とともにメッセージを渡します。たとえば、ボタンをクリックすると、信号を介してメッセージが送信されます。

JavaScriptのイベントに似た信号を考えることができますが、イベントとは異なり、信号はELMの一流の市民であり、合格、変換、フィルタリング、および組み合わせることができます。

elm syntax

ELM構文はHaskellに似ています。どちらもMLファミリー言語だからです。

<code class="language-elm">greeting : String -> String
greeting name =
  "Hello" ++ name</code>

これは、1つの文字列を取り、別の文字列を返す関数です。

なぜエルムを使用するのですか？

エルムをフォローする必要がある理由を理解するには、過去数年間のフロントエンドプログラミングのトレンドについて説明しましょう。

遷移dom

の代わりに状態について説明してください

少し前に、DOMを手動で変更することでアプリケーションを構築しました（たとえば、jQueryを使用して）。アプリケーションが成長するにつれて、より多くの状態を紹介します。すべての状態間の遷移をエンコードする必要があると、アプリケーションの複雑さが指数関数的に増加し、維持がより困難になります。

これを行うのではなく、Reactや他のライブラリは、特定のDOM状態の説明に焦点を当てるという概念を普及させ、ライブラリがDOM変換を処理することに焦点を当てました。私たちは、私たちがそこにたどり着く方法ではなく、個別のDOM状態を説明することにのみ焦点を当てています。

これにより、書かれて維持する必要があるコードが大幅に削減されます。

イベントとデータ変換

アプリケーション状態の観点から、アレイにコメントを追加するなど、自分で状態を変更することが一般的です。

これを行う代わりに、イベントに基づいてアプリケーションの状態を変更する必要がある方法を説明し、他の何かがこれらの変換を適用する必要があります。 JavaScriptでは、Reduxはアプリケーションの構築方法を人気にしています。

これの利点は、これらの変換を記述するために「純粋な」関数を書くことができることです。これらの機能は、理解してテストしやすいです。追加の利点は、アプリケーションの状態がどこに変更され、アプリケーションが維持されやすくなるかを制御できることです。

もう1つの利点は、私たちの見解が州を変える方法を知る必要がないことであり、どのイベントを派遣するかを知る必要があるということです。

一方向のデータフロー

もう1つの興味深い傾向は、すべてのアプリケーションイベントを一方向で流れることです。コンポーネントが他のコンポーネントと通信できるようにするのではなく、中央のメッセージパイプラインを介してメッセージを送信します。この中央のパイプラインは、私たちが望む変換を適用し、アプリケーションのすべての部分にブロードキャストの変更を放送します。フラックスは例です。

これを行うことにより、アプリケーションで発生するすべての相互作用をよりよく理解できます。

不変のデータ

変数データにより、コンテンツを追加または削除できるコンポーネントは、コンテンツを追加または削除できるため、場所を変更することを困難にします。状態をどこでも変更できるため、これは予測不可能性につながります。

不変のデータを使用することにより、アプリケーション状態の変化する位置を厳密に制御することにより、これを回避できます。不変のデータと変換を説明する関数を組み合わせることで、非常に強力なワークフローが得られ、不変のデータは、予期しない場所で状態を変更できないことで一方向の流れを実施するのに役立ちます。

集中状態

フロントエンド開発のもう1つの傾向は、集中化された「原子」を使用してすべての状態を救うことです。これは、コンポーネントに散らばる代わりに、すべての状態を大きな木に置くことを意味します。

一般的なアプリケーションでは、通常、グローバルアプリケーション状態（ユーザーコレクションなど）およびコンポーネント固有の状態（特定のコンポーネントの視認性状態など）があります。両方の州を1か所に保管することが有益かどうかは議論の余地があります。しかし、少なくともすべてのアプリケーション状態を1か所に保持することには大きな利点があります。つまり、アプリケーションのすべてのコンポーネントにわたって一貫した状態を提供します。

純粋なコンポーネント

もう1つの傾向は、純粋なコンポーネントを使用することです。これは、同じ入力が与えられた場合、コンポーネントが常に同じ出力をレンダリングすることを意味します。これらのコンポーネント内に副作用は発生しません。

これにより、予測が容易であるため、コンポーネントが以前よりも理解してテストしやすくなります。

elm

に戻ります

これらは、アプリケーションをより堅牢で予測と保守をより堅牢にする優れたモデルです。ただし、JavaScriptでそれらを正しく使用するには、間違った場所で何かをしないように注意する必要があります（たとえば、コンポーネント内の状態を変更する）。

elmは、これらのパターンの多くを最初から考慮したプログラミング言語です。何か間違ったことをすることを心配することなく、それらを非常に自然に採用し、使用することができます。

ELMでは、次の方法を使用してアプリケーションを構築します。

不変のデータ
説明dom
• の純粋なビュー 一方向のデータフロー
• 集中状態
• 集中データ変異の説明位置
• 制限された副作用
安全

エルムの大きな利点の1つは、それが提供するセキュリティです。値がnullである可能性を完全に回避することにより、アプリケーション内のすべての代替パスを処理することを強制します。

たとえば、

JavaScript（および他の多くの言語）では、以下を実行してランタイムエラーを取得できます。

これにより、NANはJavaScriptのNANを返します。これは、ランタイムエラーを避けるために対処する必要があります。

<code class="language-elm">greeting : String -> String
greeting name =
  "Hello" ++ name</code>

エルムで似たようなことを試してみると：

コンパイラはこれを拒否し、

が多分タイプを返すことを伝えます。たぶんタイプには値が含まれているかもしれないし、そうでないかもしれないし、値が何もない場合に対処する必要があります。

<code class="language-javascript">var list = []
list[1] * 2</code>

List.head listこれは、アプリケーションに多くの自信をもたらします。ランタイムエラーは、ELMアプリケーションではめったに見られません。

<code class="language-elm">list = []
(List.head list) * 2</code>

（次の部分は元のテキストに似ています。複製を避けるために少し調整してください）

（サンプルアプリケーション、ピースごとにそれを見てみましょう。記事の長さのために、ここでは省略されています。元のテキストはコード関数を完全に説明しており、ここでは繰り返されません。）

結論

ELMは、信頼できるアプリケーションを構築するための優れたモデルを採用するエキサイティングなプログラミング言語です。クリーンな構文があり、ランタイムエラーを回避するために多くのセキュリティ機能が組み込まれています。また、優れた静的タイプシステムもあります。これは、再構成プロセス中に非常に役立ち、型推論を使用するため、開発を妨げません。

機能的リアクティブを使用してプログラムされたアプリケーションは慣れているものとは異なるため、ELMアプリケーションの学習曲線を構築する方法を学ぶことは容易ではありませんが、それだけの価値があります。

（追加のリソース、よくある質問、記事の長さのために、ここで省略されています。元のテキストは関連情報を完全に説明しており、ここでは繰り返されません。）

以上がELMによる機能的な反応性プログラミング：紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。