Tag Archives: Elm

SwiftでElmを作る

この記事は、LINE Advent Calendar 2016の 7日目の記事です

こんにちは、開発1センター・開発2室の 稲見 (@inamiy) です。 普段はiOSエンジニアとしてSwiftを書いていますが、最近はもっぱら関数型プログラミング全般に興味があります。

今日は、「SwiftでElmを作る」というテーマで、お話しさせていただきます。

Elmって何?

Web向けの静的型付け・関数型プログラミング言語です。詳しくは http://elm-lang.org をご参照ください。

簡単に言うと、「Haskell + React.js + Redux」です。コンパイル時に、JavaScriptに変換されます。

さっそく、簡単なボタンカウンターの例を見てみましょう。

import Html exposing (beginnerProgram, div, button, text) 
import Html.Events exposing (onClick)

-- `main`関数 = プログラムの始まり。 
-- 初期状態(model)に`0`をセット + 以下にあるview関数、update関数をセット。 
main = 
  beginnerProgram { model = 0, view = view, update = update }

-- `view`関数 = モデル(状態)からビュー(Virtual DOM)を生成。 
-- プログラムがメッセージを受け取る度に呼ばれる。 
-- ユーザー入力(onClick)等の度に、プログラムにメッセージが送られる。 
view model = 
  div [] 
    [ button [ onClick Decrement ] [ text "-" ] 
    , div [] [ text (toString model) ] 
    , button [ onClick Increment ] [ text "+" ] ]

-- `Msg` = メッセージ型。今回は2つのパターンだけ定義。 
type Msg = Increment | Decrement

-- `update`関数 = 状態遷移関数。 
-- 「メッセージ」と「現在の状態」を引数に、「新しい状態」を返す。 
-- プログラムがメッセージを受け取る度に呼ばれる。 
update msg model = 
  case msg of 
    Increment -> 
      model + 1

    Decrement ->
      model - 1