はじめての elm-lang

あらすじ

grunt, gulp, webpack ツールは違えど Javascript を bundle する事前準備で疲弊していることに変わりがない今日この頃ですが、elm-lang は何も考えなくても bundle してくれるので意外とアリかもしれないぞと思ったので練習します。

いい感じの動画があったのでそちらで練習しました。 もしそちらの動画を参考にする場合は使用されている Syntax が　0.18 では削除されていて動かない箇所があるので読み替える必要があります。

• [1..3] -> range 1 3
• Html.App.beginnerProgram -> Html.beginnerProgram
• type' -> type_

install

% brew install elm
% elm --version
0.18.0

hello world

% mkdir practice-elm && cd $_
% elm package install -y
% elm reactor

create exercise.elm

module Main exposing (..)

import Html

main =
  Html.text "Hello World"

確認

% open http://localhost:8000/exercise.elm

increment

create increment.elm

elm 0.18 から Html.App.beginnerProgram ではなく Html.beginnerProgram に変更されています

import Html exposing (..)
import Html.Events exposing (..)

main =
  Html.beginnerProgram { view = view, model = model, update = update }

--model
type alias Model =
  Int

model : Model
model =
  0

--update
type Msg
  = Inc
  | Dec

update : Msg -> Model -> Model
update msg model =
  case msg of
    Inc ->
      model + 1
    Dec ->
      model - 1

-- view
view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Dec ] [ text "-" ]
        , div [] [ text (toString model) ]
        , button [ onClick Inc ] [ text "+" ]
        ]

まとめ

近年のフロント側の技術の進歩は目覚ましく、いろいろ覚えることがたくさんあるので elm-lang に対して最初は良い印象はありませんでした。

virtual-dom を採用しているし、 redux の思想と共通するので一度 redux が絡むアプリを触っておくと違和感がないと思います。

So The Elm Architecture is easy in Elm, but it is useful in any front-end project. In fact, projects like Redux have been inspired by The Elm Architecture, so you may have already seen derivatives of this pattern.

あと webpack 不要なのが個人的には嬉しいです。とある週末に「ひさしぶりに家でプログラミング書くか」「以前書いた webpack.config.js をコピーして...」「あれーなんかいろいろ変わってる」「やっと直った」「もう寝ないと:0」みたいな経験するぐらいなら新しい言語触りたい。

参考にした動画

exercise.elm: https://www.youtube.com/watch?v=Rf2CkojtxFw

increment.elm: https://www.youtube.com/watch?v=vb7ZdjSblok