#author("2019-11-10T22:08:52+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アーキテクチャーの図 [#z9181212]
-Elmの関数型的側面の多分ていねいな解説 - Qiita https://qiita.com/A_kirisaki/items/8fa5563a035c8c4d977c
#html{{
<img src="https://program.sagasite.info/wiki/index.php?plugin=attach&pcmd=open&file=elm_MVU_cycle.jpg&refer=Elm_guide_The-Elm-Architecture" width="100%">
}}
~
-The Elm Architecture :: Elm Workshop https://sporto.github.io/elm-workshop/03-tea/01-intro.html
&ref(elm_diagram-tea.png);
~
-Handling User Input with the Elm Architecture | Manning https://freecontent.manning.com/handling-user-input-with-the-elm-architecture/
-2 Your First Elm Application - Elm in Action MEAP V11 https://livebook.manning.com/book/elm-in-action/chapter-2/v-11/139
&ref(handling-user-input_01.png);
~
-The Elm Architecture (TEA) animation - Lucamug - Medium https://medium.com/@l.mugnaini/the-elm-architecture-tea-animation-3efc555e8faf
&ref(elm_animation_600px.gif);
//----------------------------------------
*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
**Windowsで「elm-architecture-tutorial」を実行する方法 [#b7dc96a1]
とりあえず、上記コマンドが実行できるのか？
Windowsのコマンドプロンプトで「git」というコマンドを入力してみたら、gitのヘルプが出てきました。
これは、以前にgitをWindowsにインストールしていたからだと思います。
C:\>git
usage: git [--version] [--help] [-C <path>] [-c <name>=<value>]
[--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
[-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare]
[--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
<command> [<args>]
These are common Git commands used in various situations:
start a working area (see also: git help tutorial)
clone Clone a repository into a new directory
init Create an empty Git repository or reinitialize an existing one
work on the current change (see also: git help everyday)
add Add file contents to the index
mv Move or rename a file, a directory, or a symlink
reset Reset current HEAD to the specified state
rm Remove files from the working tree and from the index
examine the history and state (see also: git help revisions)
bisect Use binary search to find the commit that introduced a bug
grep Print lines matching a pattern
log Show commit logs
show Show various types of objects
status Show the working tree status
grow, mark and tweak your common history
branch List, create, or delete branches
checkout Switch branches or restore working tree files
commit Record changes to the repository
diff Show changes between commits, commit and working tree, etc
merge Join two or more development histories together
rebase Reapply commits on top of another base tip
tag Create, list, delete or verify a tag object signed with GPG
collaborate (see also: git help workflows)
fetch Download objects and refs from another repository
pull Fetch from and integrate with another repository or a local branch
push Update remote refs along with associated objects
'git help -a' and 'git help -g' list available subcommands and some
concept guides. See 'git help <command>' or 'git help <concept>'
to read about a specific subcommand or concept.
上記のヘルプを参考にして、Windowsにインストールされているgitのバージョンを確認してみます。
C:\>git --version
git version 2.21.0.windows.1
とりあえず、gitコマンドが使えるので、gitでelm-architecture-tutorialをインストールしてみます。
+適当に作業フォルダを作ります。（とりあえずCドライブの直下に「elm_test」とか）
+コマンドプロンプトを開いて、作業フォルダに移動します。
+コマンドプロンプトで以下のコマンドを入力します。
cd C:\elm_test
git clone https://github.com/evancz/elm-architecture-tutorial.git
cd elm-architecture-tutorial
elm reactor
すると、こんなメッセージが表示されていました。
C:\elm_test>git clone https://github.com/evancz/elm-architecture-tutorial.git
Cloning into 'elm-architecture-tutorial'...
remote: Enumerating objects: 684, done.
Receiving objects: 94% (643/684) 0 (delta 0), pack-reused 684
Receiving objects: 100% (684/684), 344.06 KiB | 795.00 KiB/s, done.
Resolving deltas: 100% (400/400), done.
C:\elm_test>cd elm-architecture-tutorial
C:\elm_test\elm-architecture-tutorial>elm reactor
Go to http://localhost:8000 to see your project dashboard.
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!
ブラウザで http://localhost:8000/ を開いたら、Elmアーキテクチャーのサンプルページが表示されました。
&ref(elm-architecture-tutorial_1.png);
次に、 http://localhost:8000/examples/ を開いたら、Elmの各パーツのサンプルページが表示されました。
&ref(elm-architecture-tutorial_2.png);
次に、 http://localhost:8000/examples/01-button.elm を開いたら、Elmのエラーメッセージが表示されました。
-- ELM VERSION MISMATCH ----------------------------------------------- elm.json
Your elm.json says this application needs a different version of Elm.
It requires 0.19.0, but you are using 0.19.1 right now.
WindowsにインストールしたElmは最新バージョンの「0.19.1」でしたがサンプルページを作成するために使われたElmは古い「0.19.0」とのこと。
設定されている「elm.json」を見てみます。
{
"type": "application",
"source-directories": [
"examples"
],
"elm-version": "0.19.0",
"dependencies": {
"direct": {
"elm/browser": "1.0.0",
"elm/core": "1.0.2",
"elm/html": "1.0.0",
"elm/http": "2.0.0",
"elm/json": "1.1.1",
"elm/random": "1.0.0",
"elm/time": "1.0.0",
"elm/url": "1.0.0"
},
"indirect": {
"elm/bytes": "1.0.3",
"elm/file": "1.0.1",
"elm/virtual-dom": "1.0.0"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}
確かに、「"elm-version": "0.19.0",」となっており、バージョンがずれていました。
「"elm-version": "0.19.0",」を「"elm-version": "0.19.1",」に変更して、Webページを再読み込みします。
すると、今度は別のエラーメッセージが表示されました。
-- UNEXPECTED FILE NAME --------------------------------------------------------
I am having trouble with this file name:
examples\01-button.elm
I found it in your C:\elm_test\elm-architecture-tutorial\examples\ directory
which is good, but I expect all of the files in there to use the following
module naming convention:
+--------------+-----------------------------------------------------------------+
| Module Name | File Path |
+--------------+-----------------------------------------------------------------+
| Main | C:\elm_test\elm-architecture-tutorial\examples\Main.elm |
| HomePage | C:\elm_test\elm-architecture-tutorial\examples\HomePage.elm |
| Http.Helpers | C:\elm_test\elm-architecture-tutorial\examples\Http\Helpers.elm |
+--------------+-----------------------------------------------------------------+
Notice that the names always start with capital letters! Can you make your file
use this naming convention?
Note: Having a strict naming convention like this makes it a lot easier to find
things in large projects. If you see a module imported, you know where to look
for the corresponding file every time!
なんか、ファイルが足りないというメッセージが出ましたが、Elmガイドを読み進めながら、エラーを解消できるデバッグ力を身につけたいと思います。
//----------------------------------------
*Elmガイドのサンプルコード実行環境 [#va789d38]
どうしてもうまく解消できない場合は、とりあえずElmをオンラインで実行できるツールを使いながら学習を進めてみたいと思います。
-Try Elm! https://elm-lang.org/try
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
