#author("2019-11-10T03:47:36+00:00","default:sagasite","sagasite")
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ [[Elmガイド>Elm_guide]] ＞ Elmアーキテクチャー
#norelated
#contents
//----------------------------------------
* The Elm Architecture [#q853754a]
-The Elm Architecture · An Introduction to Elm https://guide.elm-lang.jp/architecture/
>The Elm Architecture は、ウェブアプリケーションを構築するためのシンプルなパターンです。
モジュール性やコードの再利用性、テストのしやすさなどに優れています。
>The Elm Architecture はElmでは「簡単」ですが、どんなフロントエンドプロジェクトにおいても便利なものです。
実のところReduxのようなプロジェクトはThe Elm Architecture に着想を得て作られたものなので、このパターンの派生をすでに見たことがある人もいるかもしれません。
もしまだ実際のプロジェクトでElmを使うことができないとしても、Elmを使いこのパターンを修得することで得るものは多いでしょう。
Reactなど他のJSフレームワークを使う場合でも、Elmアーキテクチャーの考え方は役立てることができます。
*基本的なパターン [#r1eb5b89]
>どんなElmプログラムも、次の３つの要素に明確に分割することができるでしょう。
-Model — アプリケーションの状態
-Update — 状態を更新する方法
-View — HTMLとして状態を閲覧する方法
言い方を変えれば、Elmのコード片は、この３つのいずれかに必ず当てはまるってことですね？
もしくは、この３つに関わるライブラリーなどに属しているはず、と。
+状態
+状態の更新
+状態の表示
この３つの仕組みがあれば、理論上はアプリを作ることができる。
これがElmアーキテクチャーの考え方、ということでしょうか？
どういうことなのか？さらにElmのガイドを読み進めてみましょう。
*elm-architecture-tutorial [#x918cfd8]
>本書を読み進めるためにあたって
先ほどの節では、Elmの式に慣れるためにelm replを使いました。
この章からは、自分自身のElmファイルを作るように切り替えていきます。
オンラインエディタでも構いませんが、もしElmのインストールを済ませたなら、これらの簡単な指示に従うことで、あなたのコンピュータ上ですべての作業をすることもできます！
ということで、示されたリンク先を見てみると、「elm-architecture-tutorial」というページになっていました。
-GitHub - evancz/elm-architecture-tutorial: How to create modular Elm code that scales nicely with your app https://github.com/evancz/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」というのが、よく分からないので、検索してみましょう。
-elm-architecture-tutorial - Google 検索 https://www.google.com/search?q=elm-architecture-tutorial
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
