elmのサンプルコードを自分なりに解釈する

elmとは

elmはJavaScriptへコンパイルする関数型言語です（新しいフロントエンドのフレームワークっぽい言語）。公式ページにてElm has a very strong emphasis on simplicity, ease-of-use, and quality tooling.と記載されているように、「シンプルさ、使いやすさ」を重視しているようです。

公式ページは以下のことが記載しています。

• Elmの関数型言語でのプログラミング手法を提供
• Elmアーキテクチャを用いた相互作用性のアプリケーションの作り方
• あらゆる言語のプログラミングに一般化する原則とパターンを提供

参考：elm公式ページ

elmのインストール

以下URLからインストールしましょう。
https://guide.elm-lang.org/install.html

elmの基本

公式ページにもあるサンプルで基本をマスターしましょう。
サンプルは至ってシンプルなコードで、ボタンクリックしたら数字が増えたり減ったりするコードです。（以下コード）

elmのシンプルなコードだと以下の手順を頭に入れてコードを記述してみてください。

①elmの必要なパッケージをインポートする。
②mainにinit,update,viewを定義する。
③init(初期設定), update(更新), view(見た目)に機能を持たせる。

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

main =
  Browser.sandbox { init = init, update = update, view = view }

-- MODEL

type alias Model = Int

init : Model
init =
  0

-- UPDATE

type Msg = Increment | Decrement

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

    Decrement ->
      model - 1

-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

前提として、elmプログラムで必要なパッケージを事前に読み込んでおきます。

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

このサンプルプログラムでいうとBrowser,Html,Html.Eventsを読み込んでいます。

• Browser .. Elmプログラムがブラウザで実行できるようにするパッケージ
  • 参考：elm/browser
• Html .. HTMLをレンダリングできるようにするパッケージ
• Html.Event .. イベントハンドラを実行できるようにするパッケージ
  • 参考：elm/html

次にそれぞれの機能を見ていきましょう。
(main,init,update,view)

各要素の機能

main

main関数ではこのプログラムで最初に実行される関数です。
といっても、ここで定義される要素を定義したみたいなもんですね。
今回はBrowser.sandboxを用いて、HTTP などを使わない簡単なプログラムを作ります。
Browser.〇〇みたいなモジュールはほかにもあるので、以下を参考に見てください。
参考：Elm 0.19 の初期化方法 6 種類

main = Browser.sandbox { init = init, update = update, view = view }

Model(init)

〇Modelは、アプリケーションの状態を定義します。
→今回のプログラムではカウンタを作るには、最低でも増えたり減ったりする数字を記録する箱みたいなものを用意。
→モデルが完成したら、初期値を定義します（今回はinit = 0）。

-- MODEL
type alias Model = Int

init : Model
init = 0

update

updateはModelをどのように更新するかを定義します。
下記コードでは、Modelの初期値が＋1するか－１するかを実装しています。
→カウンタをインクリメントやデクリメント可能にさせる機能をデータとして持たせる(type Msg = Increment | Decrement)
Incrementメッセージを受け取ったらモデルをインクリメントし、Decrementメッセージを受け取ったらデクリメントします。

-- UPDATE

type Msg = Increment | Decrement

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

    Decrement ->
      model - 1

view

viewはHTMLのタグ等をどのようにレンダリングさせるかを定義します。
先ほど定義したModel,MsgやHTMLのイベント(onClick)を下記のように記述します(Pug感が漂う感じですね)。

-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

まとめ

サンプルプログラムで色々説明しましたが、ざっとこんな感じです。
①elmの必要なパッケージをインポートする。
②mainにinit,update,viewを定義する。
③init(初期設定), update(更新), view(見た目)に機能を持たせる。

Elmでいろんなアプリ作ってみたい。。。
以上です。

参考記事

elmのサンプルプログラム説明