Webフロントエンドをデバッグしようとして、複雑な一連のイベントを処理するコードに巻き込まれたことは何回ありますか？

jQuery、Backbone.js、またはその他の一般的なJavaScriptフレームワークで構築された多くのコンポーネントを処理するUIのコードをリファクタリングしようとしたことがありますか？

これらのシナリオで最も苦痛なことの1つは、イベントの複数の不確定なシーケンスを追跡し、これらすべての動作を予測して修正しようとすることです。単に悪夢！

私は常に、Webフロントエンド開発のこの地獄のような側面から逃れる方法を探してきました。 Backbone.jsは、Webフロントエンドに長い間欠けていた構造を与えることで、この点でうまく機能しました。しかし、最も些細なことを行うために必要な冗長性を考えると、それほど優れているとは言えませんでした。

それから私は会った エルム 。

Elmは、Haskellプログラミング言語に基づいた静的に型付けされた関数型言語ですが、 よりシンプルな仕様 。コンパイラー（これもHaskellを使用して構築されています）はElmコードを解析し、JavaScriptにコンパイルします。

Elmは元々フロントエンド開発用に構築されましたが、ソフトウェアエンジニアは、サーバー側のプログラミングにも使用する方法を見つけました。

この記事では、ElmがWebフロントエンド開発の考え方をどのように変えることができるかについての概要と、この関数型プログラミング言語の基本について説明します。このチュートリアルでは、Elmを使用して簡単なショッピングカートのようなアプリケーションを開発します。

なぜエルム？

Elmには多くの利点があり、そのほとんどはクリーンなWebフロントエンドアーキテクチャを実現するのに非常に役立ちます。エルムは提供しています より優れたHTMLレンダリングパフォーマンスの利点 他の一般的なフレームワーク（React.jsでさえ）よりも。さらに、Elmを使用すると、開発者はコードを記述できます。コードは、実際には、JavaScriptなどの動的に型指定された言語を悩ますほとんどのランタイム例外を生成しません。

コンパイラーはタイプを自動的に推測し、わかりやすいエラーを発行して、開発者に認識させます 潜在的な問題 実行前。

NoRedInkには36,000行のElmがあり、1年以上生産された後も、ランタイム例外は1つも発生していません。 [ ソース ]

Elmを試すためだけに、既存のJavaScriptアプリケーション全体を変換する必要はありません。 JavaScriptとの優れた相互運用性により、既存のアプリケーションのごく一部を取得して、Elmで書き直すこともできます。

エルムも持っています 優れたドキュメント それはあなたにそれが提供しなければならないものの完全な説明を与えるだけでなく、あなたにウェブフロントエンドフォローを構築するための適切なガイドも与えます エルムアーキテクチャ -モジュール性、コードの再利用、およびテストに最適なもの。

簡単なカートを作ろう

Elmコードの非常に短いスニペットから始めましょう。

--で始まるテキストは Elmのコメント 。

ここでは、カートをアイテムのリストとして定義しています。ここで、すべてのアイテムは2つの値（対応する製品と数量）を持つレコードです。各製品は、名前と価格が記載されたレコードです。

カートに商品を追加するには、その商品がカートにすでに存在するかどうかを確認する必要があります。

もしそうなら、私たちは何もしません。それ以外の場合は、商品を新しいアイテムとしてカートに追加します。リストをフィルタリングし、各アイテムを商品と照合し、結果のフィルタリングされたリストが空であるかどうかを確認することにより、商品がカートにすでに存在するかどうかを確認します。

小計を計算するために、カート内のアイテムを繰り返し処理し、対応する製品の数量と価格を見つけて、すべてを合計します。

これはカートとその関連機能が得ることができるのと同じくらいミニマルです。このコードから始めて、段階的に改善し、完全なWebコンポーネント、またはElmの用語でプログラムにします。

プログラムのさまざまな識別子に型を追加することから始めましょう。 Elmはそれ自体で型を推測できますが、Elmとそのコンパイラを最大限に活用するには、型を明示的に示すことをお勧めします。

型注釈を使用すると、コンパイラーは、実行時例外が発生する可能性のある問題をキャッチできるようになりました。

しかし、エルムはそれだけではありません。 Elmアーキテクチャは、Webフロントエンドを構造化するための単純なパターンを通じて開発者をガイドし、ほとんどの開発者がすでに精通している概念を通じてそれを行います。

• モデル： モデルはプログラムの状態を保持します。
• 見る： ビューは、状態を視覚的に表したものです。
• 更新： 更新は、状態を変更する方法です。

あなたがあなたのコードの一部を扱っていると思うなら 更新 コントローラーとして、古き良きModel-View-Controller（MVC）パラダイムに非常によく似たものがあります。

Elmは純粋関数型プログラミング言語であるため、すべてのデータは不変です。つまり、モデルを変更することはできません。代わりに、前のモデルに基づいて新しいモデルを作成できます。これは、更新関数を介して行います。

なぜそんなに素晴らしいのですか？

不変のデータを使用すると、関数に副作用が発生することはなくなります。これにより、エルムのタイムトラベルデバッガーなど、可能性の世界が開かれます。これについては、後ほど説明します。

モデルの変更でビューの変更が必要になるたびにビューがレンダリングされ、モデル内の同じデータに対して常に同じ結果が得られます。純粋関数が常に同じ結果を返すのとほぼ同じ方法です。同じ入力引数。

主な機能から始める

先に進んで、カートアプリケーションのHTMLビューを実装しましょう。

Reactに精通している場合、これはきっと喜ばれることです。Elmには パッケージ HTML要素を定義するためだけに。これにより、外部のテンプレート言語に依存することなく、Elmを使用してビューを実装できます。

HTML要素のラッパーはHtmlで入手できます。パッケージ：

すべてのElmプログラムは、main関数を実行することから始まります。

ここで、main関数は、いくつかのモデル、ビュー、および更新関数を使用してElmプログラムを初期化します。いくつかの種類の製品とその価格を定義しました。簡単にするために、製品の数に制限はないと仮定しています。

シンプルなアップデート機能

更新機能は、私たちのアプリケーションが活気づくところです。

メッセージを受け取り、メッセージの内容に基づいて状態を更新します。これを、2つのパラメーター（メッセージと現在のモデル）を受け取り、新しいモデルを返す関数として定義します。

今のところ、メッセージがAdd productの場合、単一のケースを処理しています。ここで、addと呼びます。 cartのメソッドproductで。

Elmプログラムの複雑さが増すにつれて、更新機能も増します。

ビュー機能の実装

次に、カートのビューを定義します。

ビューは、モデルをHTML表現に変換する関数です。ただし、これは静的HTMLだけではありません。 HTMLジェネレーターは、さまざまなユーザーの操作やイベントに基づいて、アプリケーションにメッセージを返すことができます。

Htmlパッケージは、よく知られている名前の関数として、一般的に使用されるすべての要素のラッパーを提供します（たとえば、関数sectionは要素を生成します）。

style関数、Html.Attributesの一部パッケージは、sectionに渡すことができるオブジェクトを生成します結果の要素にスタイル属性を設定する関数。

再利用性を高めるために、ビューを個別の関数に分割することをお勧めします。

物事を単純にするために、CSSといくつかのレイアウト属性をビューコードに直接埋め込みました。ただし、を合理化するライブラリが存在します スタイリングのプロセス ElmコードからのHTML要素。

buttonに注意してくださいスニペットの終わり近くで、メッセージをどのように関連付けたかAdd productボタンのクリックイベントに。

Elmは、コールバック関数を実際のイベントにバインドするために必要なすべてのコードを生成し、関連するパラメーターを使用して更新関数を生成して呼び出す処理を行います。

最後に、ビューの最後のビットを実装する必要があります。

ここでは、カートの内容をレンダリングするビューの他の部分を定義しました。ビュー関数はメッセージを出力しませんが、戻り値の型Html Msgが必要です。ビューとしての資格を得る。

ビューにはカートの内容が一覧表示されるだけでなく、カートの内容に基づいて小計が計算されてレンダリングされます。

このElmプログラムの完全なコードを見つけることができます ここに 。

あなたがするなら Elmプログラムを今すぐ実行する 、次のようなものが表示されます。

それはどのように機能しますか？

私たちのプログラムは、mainからかなり空の状態で始まります機能-いくつかのハードコードされた製品が入った空のカート。

「カートに追加」ボタンがクリックされるたびに、メッセージが更新機能に送信され、更新機能はそれに応じてカートを更新し、新しいモデルを作成します。モデルが更新されるたびに、ビュー関数がElmによって呼び出され、HTMLツリーが再生成されます。

ElmはReactと同様の仮想DOMアプローチを使用しているため、UIの変更は必要な場合にのみ実行され、迅速なパフォーマンスが保証されます。

タイプチェッカーだけではありません

Elmは静的に型付けされていますが、コンパイラーは型だけでなく多くのことをチェックできます。

Msgに変更を加えましょう入力して、コンパイラがそれにどのように反応するかを確認します。

別の種類のメッセージを定義しました。カート内の商品の数量を変更するものです。ただし、更新関数でこのメッセージを処理せずにプログラムを再実行しようとすると、次のエラーが発生します。

より機能的なカートに向けて

前のセクションでは、数量値のタイプとして文字列を使用したことに注意してください。これは、値が文字列型の要素から取得されるためです。

新しい関数を追加しましょうchangeQty Cartへモジュール。モジュールAPIを変更せずに、必要に応じて後で変更できるように、モジュール内に実装を保持することをお勧めします。

関数がどのように使用されるかについて、いかなる仮定もするべきではありません。パラメータqtyを確信できます。 Intが含まれますしかし、値は何でもかまいません。したがって、値を確認し、 エラーを報告する 無効な場合。

updateも更新しますそれに応じて機能します：

文字列を変換しますquantity使用する前に、メッセージから数値へのパラメータ。文字列に無効な数値が含まれている場合は、エラーとして報告されます。

ここでは、エラーが発生したときにモデルを変更しません。または、ユーザーが確認できるように、ビューにメッセージとしてエラーを報告するようにモデルを更新することもできます。

タイプMaybe Stringを使用しますモデルのエラー属性。たぶん、Nothingを保持できる別のタイプですまたは特定のタイプの値。

ビュー機能を次のように更新した後：

あなたはこれを見るはずです：

数値以外の値（「1a」など）を入力しようとすると、上のスクリーンショットに示すようなエラーメッセージが表示されます。

パッケージの世界

エルムには独自のものがあります リポジトリ オープンソースパッケージの。 Elmのパッケージマネージャーを使用すると、このパッケージのプールを簡単に活用できます。リポジトリのサイズは、PythonやPHPなどの他の成熟したプログラミング言語に匹敵するものではありませんが、Elmコミュニティは毎日より多くのパッケージを実装するために懸命に取り組んでいます。

ビューに表示される価格の小数点以下の桁数に一貫性がないことに注意してください。

toStringの単純な使用を置き換えましょうリポジトリからより良いもので： 数字-エルム 。

formatを使用していますこちらのNumeralパッケージの関数。これにより、通常の通貨のフォーマット方法で数値がフォーマットされます。

自動ドキュメント生成

パッケージをElmリポジトリに公開すると、コード内のコメントに基づいてドキュメントが自動的に生成されます。カートモジュールのドキュメントを確認すると、実際の動作を確認できます。 ここに 。これらはすべて、このファイルにあるコメントから生成されました。 Cart.elm 。

フロントエンド用の真のデバッガー

最も明白な問題は、コンパイラ自体によって検出および報告されます。ただし、論理エラーから安全なアプリケーションはありません。

Elmのすべてのデータは不変であり、すべてが更新関数に渡されるメッセージを介して行われるため、Elmプログラムのフロー全体を一連のモデル変更として表すことができます。デバッガーにとって、Elmはターン制ストラテジーゲームのようなものです。これにより、デバッガーは、時間の移動など、いくつかの本当に驚くべき偉業を実行できます。プログラムの存続期間中に発生したさまざまなモデル変更間をジャンプすることにより、プログラムのフローを前後に移動できます。

デバッガーについて詳しく知ることができます ここに 。

バックエンドとの相互作用

だから、私たちは素敵なおもちゃを作りましたが、エルムは何か深刻なことに使用できますか？絶対に。

カートのフロントエンドを非同期のバックエンドに接続しましょう。それを面白くするために、特別なものを実装します。すべてのカートとその中身をリアルタイムで検査したいとします。実際には、このアプローチを使用して、オンラインショップやマーケットプレイスに追加のマーケティング/販売機能を導入したり、ユーザーに提案を行ったり、必要な在庫リソースを見積もったりすることができます。

そのため、カートをクライアント側に保存し、サーバーに各カートについてリアルタイムで通知します。

物事を単純にするために、Pythonを使用してバックエンドを実装します。バックエンドの完全なコードを見つけることができます ここに 。

これは、WebSocketを使用し、カートの内容をメモリ内で追跡するシンプルなWebサーバーです。簡単にするために、他のすべてのカートを同じページに表示します。これは、別のページに、または別のElmプログラムとして簡単に実装できます。今のところ、すべてのユーザーが他のユーザーのカートの概要を表示できます。

バックエンドを配置したら、Elmアプリを更新して、カートの更新をサーバーと送受信する必要があります。 JSONを使用してペイロードをエンコードします。これについては、Elmが優れたサポートを提供しています。

CartEncoder.elm

ElmデータモデルをJSON文字列表現に変換するエンコーダーを実装します。そのためには、 Json.Encodeライブラリ 。

ライブラリは、Elmオブジェクトを取得してJSONエンコードされた文字列に変換するいくつかの関数（string、int、float、objectなど）を提供します。

CartDecoder.elm

デコーダーの実装 すべてのElmデータにはタイプがあり、どのJSON値をどのタイプに変換する必要があるかを定義する必要があるため、少し注意が必要です。

Elmアプリケーションを更新しました

最終的なElmコードは少し長いので、見つけることができます ここに 。フロントエンドアプリケーションに加えられた変更の概要は次のとおりです。

オリジナルをラップしましたupdateカートが更新されるたびにカートの内容の変更をバックエンドに送信する関数を備えた関数：

ConsumerCarts Stringのメッセージタイプも追加しましたサーバーから更新を受信し、それに応じてローカルモデルを更新します。

ビューが更新され、consumersCartsViewを使用して他のカートの概要が表示されるようになりました関数。

他のカートへの変更をリッスンするためにバックエンドにサブスクライブするためのWebSocket接続が確立されました。

また、メイン機能も更新しました。現在、Html.programを使用しています追加のinitおよびsubscriptionsパラメーター。 initプログラムの初期モデルを指定し、subscriptionサブスクリプションのリストを指定します。

サブスクリプションは、特定のチャネルでの変更をリッスンし、それらのメッセージをupdateに転送するようにElmに指示する方法です。関数。

最後に、サーバーから受信したConsumerCartsメッセージをデコードする方法を処理しました。これにより、外部ソースから受け取ったデータがアプリケーションを壊さないことが保証されます。

フロントエンドを正気に保つ

エルムは違います。開発者は別の考え方をする必要があります。

JavaScriptや同様の言語の領域から来た人は誰でも、Elmのやり方を学ぼうとしていることに気付くでしょう。

しかし、最終的には、Elmは、他のフレームワーク（最も人気のあるフレームワークでさえ）がしばしば苦労する何かを提供します。つまり、巨大な冗長コードに巻き込まれることなく、堅牢なフロントエンドアプリケーションを構築する手段を提供します。

エルムはまた、多くの JavaScriptがもたらす困難 スマートコンパイラと強力なデバッガを組み合わせることによって。

Elmは、フロントエンドの開発者が長い間待ち望んでいたものです。動作を確認したので、自分で試してみて、構築することでメリットを享受してください。 次のWebプロジェクト エルムで。