Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

$ 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の記事

おまけ

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

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away