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ディレクトリが作られました
$ tree -F
.
├── elm.json
└── src/
elm.jsonがpackage.jsonみたいなものかな。公式によるとここでreactorなるものを立ち上げてブラウザでプロジェクト管理できるみたいですね。IDEにあたるところを言語自前で用意してくれてるのかな
$ elm reactor
と打ち込んでブラウザでlocalhost:8000にアクセスするとこのような画面がでます。
ここでsrcを作成してmakeすると一通りファイルが作られるんですね。
module Main exposing (main)
import Html exposing (Html, text)
main: Html msg
main =
text "Hello, World!"
https://github.com/bryanjenningz/25-elm-examples/blob/master/01-hello-world.elm より
これをsrc/Main.elmとして作成して
$ elm make src/Main.elm
Success! Compiled 1 module.
Main ───> 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
ブラウザのractorを見てみるとindex.htmlへのリンクができてるのでクリックしてみると
Hello, World!と表示される。
ついつい好奇心でvi index.htmlとかすると深淵を覗いてしまう事になる。所謂runtime相当する部分が埋め込まれた4000行超もの巨大ファイルが出来ている。きっと設定とか学習していけばminimizeされたjsファイルに分割された綺麗なhtmlができる用になると信じて、見なかった事にしよう。
ここのサンプルを01から順番にやっていけばある程度把握できる。
exaple02はこれに型を宣言するだけみたい。03,04でdivダグにclass属性を就けられるようになった。
02 アクセスカウンター実装
05 counterから急に難易度があがった気がする。sandboxはReActのStateみたいなもの？Incrementはただのmsgの識別子で、update msg modelでは受け取ったmsgがIncrementかどうか判断してmodelのインクリメントを行っている。これで画面表示が更新されるという事は、ReactiveなViewテンプレートになっているんだね。便利。
公式ドキュメント
https://guide.elm-lang.org/core_language.html
こっちは最初にelm replで簡単な文法を説明した上で、FormやButtonなどコンポーネントごとに説明していて、これはこれで良い勉強になりそう。
お気持ち表明
「これでフロントエンドの"パッケージマネージャー地獄"地獄と、AltJS言語全部型情報がいい加減問題から解放されたら嬉しいな」と初版のときには書いたのですが、まあものの見事にReact/Vue + typescriptが不動の地位を確立した感じがありますね。「IT系ってなんか格好いい」と思ってるような意識高い系()(中身薄い系)に純粋関数型言語は難しそうだし、今後も主流になるのは無理なのかな。私は別に純粋関数型でやりたいわけじゃなくて、型システムがまともな言語が使いたいだけ。だからKotlinJSでもRustでWASMでもなんでもいいんだけど、フロントSPAのノウハウがこれだけReact中心に積み重ねられていくと、やっぱり業務ではReact/Vueあたりを選ばざるを得ないよね、という諦めに近い境地にいます。
この記事を書いた動機
elm始めようと思って下記の記事を読んだけど始め方がまったくわからなかった。
Qiitaの記事
-
- ヤギが飼える家に住んでるなんて素晴らしいですね
- 社畜として犬小屋に飼われてる身とはなにもかもが違います
-
- ヤギしか入ってこない
- エモい話だけで技術情報が皆無
-
- 文章は面白いしちゃんと実装があるんだけど、いきなりelmコード書いてる
- どうやったらhtmlになってブラウザに表示できるかわからない
- これからelm始める人向けに書いたんじゃなくて、ワイがelmはじめた時の日記やで、ってことか
-
- 記事の内容は一番真面目っぽいですが、やっぱりいきなりElmコードを書いていて、準備が書いてありません。ここで書いたコードを実行するのにはどうすればいいのでしょうか？
なので「Haskell本読んで面白そうと思ったら、フロントでelmっていうのがあるのでやってみよう」という人に向けた記事がないなと思ったので書いたわけです。参考記事の１つめには「「関数型言語」が好きだからという理由で「フロントエンドも関数型で書きたい」と思ってElmを選ぶのはオススメしません」とあるので、まあ趣味で手を出す程度にしとくのがいいのかもしれません。
おまけ
elmコマンドのサイズって30MB近くあるのね。Linux Elm 0.19.1。
lddみてもldリンクなしだし、libstdとかに頼らず全部自力でやってるのか、なるほど・・・