出遅れたけどElmプログラミングことはじめ
自分が使ってるManjaro Fluxbox 15.12(kernel 4.4.x)
では長らくnode.jsとnpmとElmやPureScriptの相性が
悪くて途中でインストールエラーでコケて入らない
状態だったのが、lts-boronになってエラーも解消されて
インストールできるようになったので記念カキコ。
Elm自体も0.18.0で大きく機構が変わったようなので
公式チュートリアルのサンプルコードが動くかどうか
不安だったけど(ΦωΦ)
スペルの入力ミスがなければあっけなく終わったので
これから試したいことをいろいろ実験できる。
ではインストールから備忘録としてまとめる。
[手順]
※前提条件
nodejs-lts-boronとnpmが入っていること。
1. npm でelmをインストール。
% sudo npm install -g elm
-g にするとシステム全体にインストール。
2. 勉強用のディレクトリを作成して移動。
% mkdir elm-project && cd elm-project
3. 早速、Main.elmを作成し公式チュートリアルのA Quick Sample
を写経(内容は数値を増減するカウンターを実装)。
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Html.beginnerProgram { model = 0, view = view, update = update }
type Msg = Increment | Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
view model =
div
[ button [ onClick Decrement ] [ text "-" ]
, div [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]
4. 保存してelm-makeでmain.htmlに出力するようにコンパイル実行。
% elm-make Main.elm --output=main.html
5. ここで4のコマンド実行時にファイル名を入力ミスw
% elm-make Main.el --output=main.html <-- 拡張子が.elだとEmacsだしw
しかし、直後にエラーを出さずに必要な依存ライブラリやパッケージの
ダウンロードが始まる。エラーにならないけど大丈夫?(ΦωΦ;)
ちと、不安になる。
Some new packages are needed. Here is the upgrade plan.
Install:
elm-lang/core 5.0.0
elm-lang/html 2.0.0
elm-lang/virtual-dom 2.0.2
Do you approve of this plan? [Y/n] y
Starting downloads...
● elm-lang/html 2.0.0
● elm-lang/virtual-dom 2.0.2
● elm-lang/core 5.0.0Packages configured successfully!
でも、必要なライブラリやパッケージのダウンロードが終わると、elm-makeさんに
「そんなファイルないよー」って言われる!(ΦωΦ)<ホウコクハサイゴナノネ
elm-make: Main.el: openFile: does not exist (No such file or directory)
Main.elmって入力したよねってのを確認してelm-makeコマンドから再スタート。
% elm-make Main.elm --output=main.html
ようやく本題に入れると思ったのも束の間、1行目のimportでHtmlがHymlにミスってる
エラーがwww(ΦωΦ;)
コマンドの入力ミスと違い、ファイルの内容はすぐに訂正が入る。
-- NAMING ERROR ------------------------------------------------------- Main.elm
Module `Html` does not expose `Hyml`
1| import Html exposing (Hyml, button, div, text)
183 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ご親切に、以下のつづりと間違えたんだよね?って指摘が入る。
(elm-makeたん、親切!(ΦωΦ))
Maybe you want one of the following?
Html
Detected errors in 1 module.
6. HymlをHtmlに修正して再度、elm-makeから再スタートw
今度はMain.elmのコンパイルが上手く行って、
main.htmlが作成されて出力された!
Success! Compiled 1 module.
Successfully generated main.html
7. elm-reactorを実行して内部サーバを起動し、下記URLにアクセス
して、マイナスとプラスボタンが作成されてて動作に問題かないか
を確認。
% elm-reactor
ブラウザで下記URLにアクセス。
http://localhost:8000/main.html
画像が小さ過ぎるな・・・(ΦωΦ;;
問題があるのは大きさだけのようなので・・・
※elm-reactorはCtrl + Cで停止できる。
[参考サイト]