elmを勉強したい人が本当に必要な勉強手順

### 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コマンドが使えます。

```bash
$ 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のサンプルを見つけて打ち込んで

```bash
$ elm 01hello.elm 
There is no 01hello.elm command.

Run `elm` with no arguments to get more hints.

```
などとしてみたがそんなコマンドないと怒られます。helpとにらめっこしたところ`elm init`でしょう。スクリプト組んで気軽に実行する感じではなく、プロジェクトディレクトリを作ってく系なんですかね。そんなわけでやってみます。

```bash
$ elm init
```

elm.jsonとsrcディレクトリが作られました

```
$ tree -F
.
├── elm.json
└── src/
```

elm.jsonがpackage.jsonみたいなものかな。公式によるとここでreactorなるものを立ち上げてブラウザでプロジェクト管理できるみたいですね。IDEにあたるところを言語自前で用意してくれてるのかな

```bash
$ elm reactor
```
と打ち込んでブラウザで`localhost:8000`にアクセスするとこのような画面がでます。

![elm reactor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16962/f78235f0-2f4d-f2d2-e264-d17f5bc6c6e5.png)


ここでsrcを作成してmakeすると一通りファイルが作られるんですね。

```elm:Main.elm
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として作成して

```bash
$ 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ができる用になると信じて、見なかった事にしよう。

https://github.com/bryanjenningz/25-elm-examples

ここのサンプルを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の記事

- [2020年 Elmはどんな人にオススメできないか](https://qiita.com/arowM/items/dfb38d1c5f3dfde8b8bf)
  - ヤギが飼える家に住んでるなんて素晴らしいですね
  - 社畜として犬小屋に飼われてる身とはなにもかもが違います
- [Elmをはじめる人が最初に読むページ](https://qiita.com/arowM/items/5ec5853298fc880353b7)
  - ヤギしか入ってこない
  - エモい話だけで技術情報が皆無

- ワイのElmデビュー[【前編】](https://qiita.com/Yametaro/items/eb6fd45fe6324906a71a)[【前編】](https://qiita.com/Yametaro/items/360c7e1e4fa2c6d7b7b4)
  - 文章は面白いしちゃんと実装があるんだけど、いきなりelmコード書いてる
  - どうやったらhtmlになってブラウザに表示できるかわからない
  - これからelm始める人向けに書いたんじゃなくて、ワイがelmはじめた時の日記やで、ってことか

- [Elmで体験する関数型言語の面白さ](https://qiita.com/pxfnc/items/542e0f6705182a9f93ad)
  - 記事の内容は一番真面目っぽいですが、やっぱりいきなりElmコードを書いていて、準備が書いてありません。ここで書いたコードを実行するのにはどうすればいいのでしょうか？

なので「[Haskell本](https://amzn.to/3hwVkA1)読んで面白そうと思ったら、フロントでelmっていうのがあるのでやってみよう」という人に向けた記事がないなと思ったので書いたわけです。参考記事の１つめには「「関数型言語」が好きだからという理由で「フロントエンドも関数型で書きたい」と思ってElmを選ぶのはオススメしません」とあるので、まあ趣味で手を出す程度にしとくのがいいのかもしれません。

# おまけ

elmコマンドのサイズって30MB近くあるのね。Linux Elm 0.19.1。
lddみてもldリンクなしだし、libstdとかに頼らず全部自力でやってるのか、なるほど・・・

# 参考文献
- guid.elm-lang.org https://guide.elm-lang.org/install/elm.html
- elm README https://github.com/elm/compiler/blob/master/installers/linux/README.md
- 25 elm examples https://github.com/bryanjenningz/25-elm-examples/blob/master/01-hello-world.elm