Elm_guide_The-Elm-Architecture
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ ...
#norelated
#contents
//----------------------------------------
* The Elm Architecture [#q853754a]
-The Elm Architecture · An Introduction to Elm https://gu...
>The Elm Architecture は、ウェブアプリケーションを構築す...
モジュール性やコードの再利用性、テストのしやすさなどに優...
>The Elm Architecture はElmでは「簡単」ですが、どんなフロ...
実のところReduxのようなプロジェクトはThe Elm Architecture...
もしまだ実際のプロジェクトでElmを使うことができないとして...
Reactなど他のJSフレームワークを使う場合でも、Elmアーキテ...
//----------------------------------------
*基本的なパターン [#r1eb5b89]
>どんなElmプログラムも、次の３つの要素に明確に分割するこ...
-Model — アプリケーションの状態
-Update — 状態を更新する方法
-View — HTMLとして状態を閲覧する方法
言い方を変えれば、Elmのコード片は、この３つのいずれかに必...
もしくは、この３つに関わるライブラリーなどに属しているは...
+状態
+状態の更新
+状態の表示
この３つの仕組みがあれば、理論上はアプリを作ることができ...
これがElmアーキテクチャーの考え方、ということでしょうか？
どういうことなのか？さらにElmのガイドを読み進めてみましょ...
**Elmアーキテクチャーの図 [#z9181212]
-Elmの関数型的側面の多分ていねいな解説 - Qiita https://qi...
#html{{
<img src="https://program.sagasite.info/wiki/index.php?pl...
}}
~
-The Elm Architecture :: Elm Workshop https://sporto.gith...
&ref(elm_diagram-tea.png);
~
-Handling User Input with the Elm Architecture | Manning ...
-2 Your First Elm Application - Elm in Action MEAP V11 ht...
&ref(handling-user-input_01.png);
~
-The Elm Architecture (TEA) animation - Lucamug - Medium ...
&ref(elm_animation_600px.gif);
//----------------------------------------
*elm-architecture-tutorial [#x918cfd8]
>本書を読み進めるためにあたって
先ほどの節では、Elmの式に慣れるためにelm replを使いました。
この章からは、自分自身のElmファイルを作るように切り替えて...
オンラインエディタでも構いませんが、もしElmのインストール...
ということで、示されたリンク先を見てみると、「elm-archite...
-GitHub - evancz/elm-architecture-tutorial: How to create...
>''Run The Examples''
After you install, run the following commands in your ter...
git clone https://github.com/evancz/elm-architecture-tut...
cd elm-architecture-tutorial
elm reactor
Now go to http://localhost:8000/ and start looking at the...
「elm-architecture-tutorial」というのが、よく分からないの...
-elm-architecture-tutorial - Google 検索 https://www.goog...
**Windowsで「elm-architecture-tutorial」を実行する方法 [#...
とりあえず、上記コマンドが実行できるのか？
Windowsのコマンドプロンプトで「git」というコマンドを入力...
これは、以前にgitをWindowsにインストールしていたからだと...
C:\>git
usage: git [--version] [--help] [-C <path>] [-c <name>=<...
[--exec-path[=<path>]] [--html-path] [--man-p...
[-p | --paginate | -P | --no-pager] [--no-rep...
[--git-dir=<path>] [--work-tree=<path>] [--na...
<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 reinitia...
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 s...
reset Reset current HEAD to the specified state
rm Remove files from the working tree and fro...
examine the history and state (see also: git help revisi...
bisect Use binary search to find the commit that ...
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 fi...
commit Record changes to the repository
diff Show changes between commits, commit and w...
merge Join two or more development histories tog...
rebase Reapply commits on top of another base tip
tag Create, list, delete or verify a tag objec...
collaborate (see also: git help workflows)
fetch Download objects and refs from another rep...
pull Fetch from and integrate with another repo...
push Update remote refs along with associated o...
'git help -a' and 'git help -g' list available subcomman...
concept guides. See 'git help <command>' or 'git help <c...
to read about a specific subcommand or concept.
上記のヘルプを参考にして、Windowsにインストールされている...
C:\>git --version
git version 2.21.0.windows.1
とりあえず、gitコマンドが使えるので、gitでelm-architectur...
+適当に作業フォルダを作ります。（とりあえずCドライブの直...
+コマンドプロンプトを開いて、作業フォルダに移動します。
+コマンドプロンプトで以下のコマンドを入力します。
cd C:\elm_test
git clone https://github.com/evancz/elm-architecture-tut...
cd elm-architecture-tutorial
elm reactor
すると、こんなメッセージが表示されていました。
C:\elm_test>git clone https://github.com/evancz/elm-arch...
Cloning into 'elm-architecture-tutorial'...
remote: Enumerating objects: 684, done.
Receiving objects: 94% (643/684) 0 (delta 0), pack-re...
Receiving objects: 100% (684/684), 344.06 KiB | 795.00 K...
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 th...
When you edit an Elm file, just refresh the correspondin...
ブラウザで 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 VERSION MISMATCH --------------------------------...
Your elm.json says this application needs a different ve...
It requires 0.19.0, but you are using 0.19.1 right now.
WindowsにインストールしたElmは最新バージョンの「0.19.1」...
設定されている「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",...
すると、今度は別のエラーメッセージが表示されました。
-- 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...
which is good, but I expect all of the files in there to...
module naming convention:
+--------------+------------------------------------...
| Module Name | File Path ...
+--------------+------------------------------------...
| Main | C:\elm_test\elm-architecture-tutori...
| HomePage | C:\elm_test\elm-architecture-tutori...
| Http.Helpers | C:\elm_test\elm-architecture-tutori...
+--------------+------------------------------------...
Notice that the names always start with capital letters!...
use this naming convention?
Note: Having a strict naming convention like this makes ...
things in large projects. If you see a module imported, ...
for the corresponding file every time!
なんか、ファイルが足りないというメッセージが出ましたが、E...
//----------------------------------------
*Elmガイドのサンプルコード実行環境 [#va789d38]
どうしてもうまく解消できない場合は、とりあえずElmをオンラ...
-Try Elm! https://elm-lang.org/try
終了行:
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ ...
#norelated
#contents
//----------------------------------------
* The Elm Architecture [#q853754a]
-The Elm Architecture · An Introduction to Elm https://gu...
>The Elm Architecture は、ウェブアプリケーションを構築す...
モジュール性やコードの再利用性、テストのしやすさなどに優...
>The Elm Architecture はElmでは「簡単」ですが、どんなフロ...
実のところReduxのようなプロジェクトはThe Elm Architecture...
もしまだ実際のプロジェクトでElmを使うことができないとして...
Reactなど他のJSフレームワークを使う場合でも、Elmアーキテ...
//----------------------------------------
*基本的なパターン [#r1eb5b89]
>どんなElmプログラムも、次の３つの要素に明確に分割するこ...
-Model — アプリケーションの状態
-Update — 状態を更新する方法
-View — HTMLとして状態を閲覧する方法
言い方を変えれば、Elmのコード片は、この３つのいずれかに必...
もしくは、この３つに関わるライブラリーなどに属しているは...
+状態
+状態の更新
+状態の表示
この３つの仕組みがあれば、理論上はアプリを作ることができ...
これがElmアーキテクチャーの考え方、ということでしょうか？
どういうことなのか？さらにElmのガイドを読み進めてみましょ...
**Elmアーキテクチャーの図 [#z9181212]
-Elmの関数型的側面の多分ていねいな解説 - Qiita https://qi...
#html{{
<img src="https://program.sagasite.info/wiki/index.php?pl...
}}
~
-The Elm Architecture :: Elm Workshop https://sporto.gith...
&ref(elm_diagram-tea.png);
~
-Handling User Input with the Elm Architecture | Manning ...
-2 Your First Elm Application - Elm in Action MEAP V11 ht...
&ref(handling-user-input_01.png);
~
-The Elm Architecture (TEA) animation - Lucamug - Medium ...
&ref(elm_animation_600px.gif);
//----------------------------------------
*elm-architecture-tutorial [#x918cfd8]
>本書を読み進めるためにあたって
先ほどの節では、Elmの式に慣れるためにelm replを使いました。
この章からは、自分自身のElmファイルを作るように切り替えて...
オンラインエディタでも構いませんが、もしElmのインストール...
ということで、示されたリンク先を見てみると、「elm-archite...
-GitHub - evancz/elm-architecture-tutorial: How to create...
>''Run The Examples''
After you install, run the following commands in your ter...
git clone https://github.com/evancz/elm-architecture-tut...
cd elm-architecture-tutorial
elm reactor
Now go to http://localhost:8000/ and start looking at the...
「elm-architecture-tutorial」というのが、よく分からないの...
-elm-architecture-tutorial - Google 検索 https://www.goog...
**Windowsで「elm-architecture-tutorial」を実行する方法 [#...
とりあえず、上記コマンドが実行できるのか？
Windowsのコマンドプロンプトで「git」というコマンドを入力...
これは、以前にgitをWindowsにインストールしていたからだと...
C:\>git
usage: git [--version] [--help] [-C <path>] [-c <name>=<...
[--exec-path[=<path>]] [--html-path] [--man-p...
[-p | --paginate | -P | --no-pager] [--no-rep...
[--git-dir=<path>] [--work-tree=<path>] [--na...
<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 reinitia...
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 s...
reset Reset current HEAD to the specified state
rm Remove files from the working tree and fro...
examine the history and state (see also: git help revisi...
bisect Use binary search to find the commit that ...
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 fi...
commit Record changes to the repository
diff Show changes between commits, commit and w...
merge Join two or more development histories tog...
rebase Reapply commits on top of another base tip
tag Create, list, delete or verify a tag objec...
collaborate (see also: git help workflows)
fetch Download objects and refs from another rep...
pull Fetch from and integrate with another repo...
push Update remote refs along with associated o...
'git help -a' and 'git help -g' list available subcomman...
concept guides. See 'git help <command>' or 'git help <c...
to read about a specific subcommand or concept.
上記のヘルプを参考にして、Windowsにインストールされている...
C:\>git --version
git version 2.21.0.windows.1
とりあえず、gitコマンドが使えるので、gitでelm-architectur...
+適当に作業フォルダを作ります。（とりあえずCドライブの直...
+コマンドプロンプトを開いて、作業フォルダに移動します。
+コマンドプロンプトで以下のコマンドを入力します。
cd C:\elm_test
git clone https://github.com/evancz/elm-architecture-tut...
cd elm-architecture-tutorial
elm reactor
すると、こんなメッセージが表示されていました。
C:\elm_test>git clone https://github.com/evancz/elm-arch...
Cloning into 'elm-architecture-tutorial'...
remote: Enumerating objects: 684, done.
Receiving objects: 94% (643/684) 0 (delta 0), pack-re...
Receiving objects: 100% (684/684), 344.06 KiB | 795.00 K...
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 th...
When you edit an Elm file, just refresh the correspondin...
ブラウザで 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 VERSION MISMATCH --------------------------------...
Your elm.json says this application needs a different ve...
It requires 0.19.0, but you are using 0.19.1 right now.
WindowsにインストールしたElmは最新バージョンの「0.19.1」...
設定されている「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",...
すると、今度は別のエラーメッセージが表示されました。
-- 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...
which is good, but I expect all of the files in there to...
module naming convention:
+--------------+------------------------------------...
| Module Name | File Path ...
+--------------+------------------------------------...
| Main | C:\elm_test\elm-architecture-tutori...
| HomePage | C:\elm_test\elm-architecture-tutori...
| Http.Helpers | C:\elm_test\elm-architecture-tutori...
+--------------+------------------------------------...
Notice that the names always start with capital letters!...
use this naming convention?
Note: Having a strict naming convention like this makes ...
things in large projects. If you see a module imported, ...
for the corresponding file every time!
なんか、ファイルが足りないというメッセージが出ましたが、E...
//----------------------------------------
*Elmガイドのサンプルコード実行環境 [#va789d38]
どうしてもうまく解消できない場合は、とりあえずElmをオンラ...
-Try Elm! https://elm-lang.org/try
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
