The Elm Architecture

The Elm Architecture は、ウェブアプリケーションを構築するためのシンプルなパターンです。モジュール性やコードの再利用性、テストのしやすさなどに優れています。つまり、複雑なアプリケーションを作るときでも、安心してリファクタリングしたり機能を追加できるようにしてくれるのです。

このアーキテクチャは、Elmの歴史の中から自然に生まれてきました。誰かがこれを「発明した」というより、コードの中にこの基本的なパターンが常にあることを初期のElmプログラマが発見したということです。チームで開発している人たちも、The Elm Architecture は新人開発者の教育に特に適していると考えています。The Elm Architecture に従えば、それだけでコードはより良く設計されるようになります。このように、気がついたらおばけみたいにすっと現れていたパターンなのです。

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

基本的なパターン

どんなElmプログラムも、次の３つの要素に明確に分割することができるでしょう。

• Model — アプリケーションの状態
• Update — 状態を更新する方法
• View — HTMLとして状態を閲覧する方法

このパターンはとても信頼性が高いので、私はいつも次のような骨組みから始めて、プロジェクトごとの振る舞いに応じて詳細を埋めていくようにしています。

import Html exposing (..)


-- MODEL

type alias Model = { ... }


-- UPDATE

type Msg = Reset | ...

update : Msg -> Model -> Model
update msg model =
  case msg of
    Reset -> ...
    ...


-- VIEW

view : Model -> Html Msg
view model =
  ...

まさしくこれが The Elm Architecture の本質なのです！　ここからは、面白いロジックでこの骨組みをだんだんと埋めていくことで、説明を進めていきましょう。

The Elm Architecture + ユーザ入力

ウェブアプリケーションではユーザからの入力を扱う必要があるでしょう。この節では、次のような内容について、The Elm Architecture に慣れるようにしていきます。

• ボタン
• テキストフィールド
• チェックボックス
• ラジオボタン
• そのほか

いくつかの例を見ながら徐々に知識を深めていきますので、それではこの順番で進めていきましょう！

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

先ほどの節では、Elmの式に慣れるためにelm replを使いました。この章からは、自分自身のElmファイルを作るように切り替えていきます。オンラインエディタでも構いませんが、もしElmのインストールを済ませたなら、これらの簡単な指示に従うことで、あなたのコンピュータ上ですべての作業をすることもできます！