読者です 読者をやめる 読者になる 読者になる

haiju's 開発メモ

開発に必要な情報を自分用にメモ

出遅れたけど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.0

Packages 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

f:id:haiju:20161218162514p:plain

 画像が小さ過ぎるな・・・(ΦωΦ;;

問題があるのは大きさだけのようなので・・・

※elm-reactorはCtrl + Cで停止できる。

[参考サイト]

Install · An Introduction to Elm

www.parsonsmatt.org

github.com

qiita.com

qiita.com