elmでハローワールド

elmでハローワールドしよ。

elmインストール

下記のページから自分のパソコンにあったバイナリを入れる。

guide.elm-lang.org

elmプロジェクト作成

$ elm init

これでelmのプロジェクトが作成される。

.
├── elm.json
└── src

ローカルサーバー起動

$ elm reactor

これでローカルのサーバーが立ち上がる。localhost:8000にアクセスするとどんなもんか見れる。

パッケージインストール

パッケージのインストールは以下のコマンドで行える。パッケージはelm.jsonに記述されていくよ。

$ elm install elm/http
$ elm install elm/json

これ依存関係あった場合、知らせてくれるのね。親切。

I found it in your elm.json file, but in the "indirect" dependencies.
Should I move it into "direct" dependencies for more general use? [Y/n]: Y

HelloWorld表示

src配下にファイルを作ってハローワールドする。

import Html exposing (..)
// Htmlパッケージの全ての関数をimport

main =
    text "Hello world!"

これで、elm reactorして画面を確認。

画面上に表示されているのって、ディレクトリなんだね。で、そのディレクトリに今回作成したファイル名（画像でいえばhello_world.elm）があるからそれをクリックするとHello world!と表示された。