著者：井上 健太
はじめに
Elmは主にweb開発等の対話型アプリケーションに使用される純粋関数型言語の1つで、シンプルさ、簡単さがその特徴になっています。さらに公式のチュートリアルが分かりやすく作られているため、web開発や関数型言語の初心者にオススメの言語です。
本記事では、そのElmを見ながらwebアプリや関数型言語の特徴をまとめていきます。
webアプリの仕組み
ElmではThe Elm Architectureと呼ばれるモジュールを使って簡単にwebアプリを作ることができます。 これを詳しく見ていきましょう。
まず、webアプリの基本的な仕組みであるBrowser.sandboxを見ていきます。
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = init, update = update, view = view }
Browser.sandboxはinit, update,
modelの3要素からなり、それぞれ任意の型Model, Msgに対し、以下のような型を持っています。
init : Model
update : Msg -> Model -> Model
view : Model -> HTML Msg
このことからupdateはMsgとModelからModelを返し、viewはModelからHTML Msgを返すことがわかります。
つまり、webアプリの仕組みとしては以下の図になります。
initがシステムの初期値です。
viewは上の矢印で、システムからModel型の値を受け取り返り値のHTML MsgからHTMLをブラウザに表示します。
updateは下の矢印で、ブラウザからの入力であるMsg型の値を受け取り、元々持っていたModel型の値を新しい値に更新します。
例はElmの公式チュートリアルにもあるように、ボタンを押すと数字が増えるwebアプリを見るのがわかりやすいでしょう。
-- INIT
type alias Model = Int
init : Model
init = 0
-- UPDATE
type Msg = Increment | Reset
update : Msg -> Model -> Model
update msg model =
case msg of
Increment -> model + 1
Reset -> 0
-- VIEW
view : Model -> Html Msg
view model =
div []
[ div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
, button [ onClick Reset ] [text "reset" ]
]
この例だとModelがInt型の値で、初期値initは0を与えておきます。viewがこの値を受け取って、ブラウザに値の表示とIncrementかResetを返すボタンを表示しています。
updateはブラウザからIncrementかResetのどちらが押されたかという情報を受け取って、Modelの値を更新する関数になっています。
Elmを使ってわかること
Elmは純粋関数型言語であるので、全ての関数はその引数のみに依存します。
すなわち上のinit, update, viewは全て独立した関数であり、webアプリはこの3つの独立した機構から構成されていることが分かります。
このように関数型言語ならば、複雑なプログラムも型と関数によって大枠に分解して考えることができます。これこそが関数型プログラミングの大きなメリットの1つになっています。
まとめ
純粋関数型言語Elmを用いてwebアプリの仕組みと関数型言語を用いるメリットについてまとめました。