プログラミング★さがして！

Program ＞ JavaScript ＞ AltJS ＞ Elm ＞ Elmガイド ＞ Elmアーキテクチャー

The Elm Architecture †

The Elm Architecture は、ウェブアプリケーションを構築するためのシンプルなパターンです。
モジュール性やコードの再利用性、テストのしやすさなどに優れています。

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

Reactなど他のJSフレームワークを使う場合でも、Elmアーキテクチャーの考え方は役立てることができます。

↑

基本的なパターン †

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

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

言い方を変えれば、Elmのコード片は、この３つのいずれかに必ず当てはまるってことですね？
もしくは、この３つに関わるライブラリーなどに属しているはず、と。

  1. 状態
  2. 状態の更新
  3. 状態の表示

この３つの仕組みがあれば、理論上はアプリを作ることができる。
これがElmアーキテクチャーの考え方、ということでしょうか？
どういうことなのか？さらにElmのガイドを読み進めてみましょう。

↑

elm-architecture-tutorial †

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

ということで、示されたリンク先を見てみると、「elm-architecture-tutorial」というページになっていました。

Run The Examples
After you install, run the following commands in your terminal to download this repo and start a server that compiles Elm for you:

git clone https://github.com/evancz/elm-architecture-tutorial.git
cd elm-architecture-tutorial
elm reactor

Now go to http://localhost:8000/ and start looking at the examples/ directory. When you edit an Elm file, just refresh the corresponding page in your browser and it will recompile!

「elm-architecture-tutorial」というのが、よく分からないので、検索してみましょう。

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS