The Elm Architecture

The Elm Architecture は、ウェブアプリケーションやゲームのような、対話的なプログラムを設計するためのパターンです。

このアーキテクチャは、Elmの歴史の中から自然に生まれてきました。誰かがこれを「発明した」というより、コードの中にこの基本的なパターンが常にあることを初期のElmプログラマが発見したということです。示し合わせたわけでもないのに、誰でもコードをよりよく設計できるパターンが現れてくるなんて、なんだかちょっと不気味ですね！

そして、The Elm Architecture はElmでは簡単ですが、どんなフロントエンドプロジェクトにおいても便利なものです。実のところReduxのようなプロジェクトはThe Elm Architecture に着想を得て作られたものなので、このパターンの派生をすでに見たことがある人もいるかもしれません。もしまだ実際のプロジェクトでElmを使うことができないとしても、Elmを使いこのパターンを修得することで得るものは多いでしょう。

基本的なパターン

Elm のプログラムが動く仕組みを図にすると、こんな風になります。

Elm が画面に表示するためのHTMLを出力し、コンピュータは画面の中で起きたこと、例えば「ボタンがクリックされたよ！」というようなメッセージを Elm へ送り返します。

さて、Elm プログラムの中では何が起きているのでしょうか？ Elm では、プログラムは必ず3つのパーツに分解できます。

• Model — アプリケーションの状態
• View — 状態を HTML に変換する方法
• Update — メッセージを使って状態を更新する方法

この3つのコンセプトこそ、The Elm Architecture の核心なのです。

次の節からは、ボタンやテキストフィールドといったユーザー入力を例にして、The Elm Architecture の使い方を見ていきます。これらの例を見れば、The Elm Architecture のコンセプトをしっかりと理解できるはずです！

本書を読み進めるためにあたって

この章に出てくる例は、どれもオンラインエディタで閲覧、編集することができます。

エディタの画面では、左上にヒントが表示されています。

なにかわからないことがあったときは、忘れずにヒントを見てみましょう！