elmって型安全にフロントのSPAがかけると聞いたんだけど、どこから手を付けていいかわからない。
まっさらな状態からelmでhelloworldしたものをブラウザで表示しましょう。
install
まずはinstallです。後述する記事を書いた人達はinstallなどの基礎は「わざわざ書くまでもないだろう」と思ったのでしょう。確かに公式にあります。が、ドキュメント量もそこそこありますし「これを全部読んでから始める」となると気軽に手を出せません。ここは流し見して必要なところを見つけます。
elmのinstall
https://guide.elm-lang.org/install/elm.html
エディターにsublime textとか書いてあるのは古そう（まだ使ってる人いる？)ので無視して、elmバイナリを入れます。OSに応じて指示に従ってください。筆者は筆者はlinuxなのでcurlコマンドで取得後解凍して、READMEは無視して~/binに配置してPATHを通しました。macはpkg,winはexeが墜ちてくるみたいですね。
これでelmコマンドが使えます。
$ elm
Hi, thank you for trying out Elm 0.19.1. I hope you like it!
-------------------------------------------------------------------------------
I highly recommend working through <https://guide.elm-lang.org> to get started.
It teaches many important concepts, including how to use `elm` in the terminal.
-------------------------------------------------------------------------------
The most common commands are:
elm repl
Open up an interactive programming session. Type in Elm expressions like
(2 + 2) or (String.length "test") and see if they equal four!
elm init
Start an Elm project. It creates a starter elm.json file and provides a
link explaining what to do from there.
elm reactor
Compile code with a click. It opens a file viewer in your browser, and
when you click on an Elm file, it compiles and you see the result.
There are a bunch of other commands as well though. Here is a full list:
elm repl --help
elm init --help
elm reactor --help
elm make --help
elm install --help
elm bump --help
elm diff --help
elm publish --help
Adding the --help flag gives a bunch of additional details about each one.
Be sure to ask on the Elm slack if you run into trouble! Folks are friendly and
happy to help out. They hang out there because it is fun, so be kind to get the
best results!
first step to run elm
とりあえずhelloworldのサンプルを見つけて打ち込んで
$ elm 01hello.elm
There is no 01hello.elm command.
Run `elm` with no arguments to get more hints.
などとしてみたがそんなコマンドないと怒られます。helpとにらめっこしたところelm initでしょう。そんなわけでやってみます。
$ elm init
elm.jsonとsrcディレクトリが作られました。ここでsrcにMain.elmをおいてelm buildするとindex.htmlが作られるようです。
$ tree
├── elm.json
├── elm-stuff
│ └── 0.19.1
│ ├── d.dat
│ ├── i.dat
│ ├── lock
│ ├── Main.elmi
│ ├── Main.elmo
│ └── o.dat
├── index.html
└── src
└── Main.elm
elm-stuffはとりあえず無視します。src/Main.elmに下記のように書きます。
https://github.com/bryanjenningz/25-elm-examples/blob/master/01-hello-world.elm
より抜粋
module Main exposing (main)
import Html exposing (text)
main =
text "Hello, World!"
ここで
$ elm src/Main.elm
するとindex.htmlができてるではないか。これで行ける。
exaple02はこれに型を宣言するだけみたい。03,04でdivダグにclass属性を就けられるようになった。
あーなんかここを順番にやっていけばいけるような気がする。
英語読むのたるいので適宜つまみ読みしながらです。抜け等あればご指摘お願いします。
02 アクセスカウンター実装
05 counterから急に難易度があがった気がする。sandboxはReActのStateみたいなもの？Icrementはただのmsgの識別子で、update msg modelでは受け取ったmsgがIncrementかどうか判断してmodelのインクリメントを行っている。これで画面表示が更新されるという子は、ReactiveなViewテンプレートになっているんだね。便利。
もうちょっと追記したいけど今日はここまで。この記事に追記するか別記事にするかはまた考えます。
これでフロントエンドのパッケージマネージャー地獄地獄と、AltJS言語全部型情報がいい加減問題から解放されたら嬉しいな。
（不定期更新なのでいつごろのどこまでつくるかのような目処は立っていません）
この記事を書いた動機
elm始めようと思って下記の記事を読んだけど始め方がまったくわからなかった。
Qiitaの記事
- 2020年 Elmはどんな人にオススメできないか
-
- ヤギしか入ってこない
- エモい話だけで技術情報が皆無
-
- 文章は面白いし実装があるんだけど、いきなりelmコード書いてる
- どうやったらhtmlになってブラウザに表示できるかわからない
-
- 記事の内容は一番真面目っぽいですが、やっぱりいきなりElmコードを書いていて、準備が書いてありません。ここで書いたコードを実行するのにはどうすればいいのでしょうか？
おまけ
elmコマンドのサイズって30MB近くあるのね。Linux Elm 0.19.1。
lddみてもldリンクなしだし、libstdとかに頼らず全部自力でやってるのか、なるほど・・・
