やわらかテック

興味のあること。業務を通して得られた発見。個人的に試してみたことをアウトプットしています🍵

トップ > Elm > Elm Architectureに感銘を受けた

Elm Architectureに感銘を受けた

Elm 体験談

最近、Elmを学びはじめました。
Elmの存在は元から認知していて、Haskellに似た文法を持つ関数型言語にカテゴリーされる言語だそうで、そんな言語でフロントエンドが作れるとのこと...で非常に興味がありました。また、個人でアプリケーションを作るにあたってフロントエンドの開発は避けて通ることが難しいです。現時点で一番の選択肢として考えられるのはReact.jsですが、業務で散々書いたので個人的にはもういいかなと感じています。何か新しいことをやりたいなぁ...と思っていたので、Elmを選択しました。

ellie-app.com

一週間ほどElmを学んで簡単なTodoアプリまで作ることができたので、今の所感をまとめておこうと思います。

Elm Archtectureが美しい

Elmの公式チュートリアルを進めている中で「The Elm Architecture」の章には感銘を受けました。
下図のようにElmでは画面での操作など(eg: クリック)をメッセージ(Msg)として受け取り、受け取ったメッセージの内容によってアプリケーションの状態(図では表記がありませんがModel)を変化させて、新たな状態を画面に反映するというやりとりが繰り返し行われています。

The Elm Architecture · An Introduction to Elm

このアーキテクチャがシンプルなのに非常にパワフルで、もはや美しさを感じました。
Todoアプリを作る過程で、他の方が書いたTodoアプリをいくつか参考にさせて頂いたのですが、多少の違いはあれど、どのアプリケーションもElm Architectureに従った構成となっているため、Elm Architectureを理解してれば、コードを読み進めることが全く苦ではありませんでした。

カウンタの作成より

type Msg = Increment | Decrement

-- 受け取ったメッセージによってmodel(int)を更新するのみ
update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

ボタン · An Introduction to Elm

覚えることが少ない

「The Elm Architecture」では以下3つのコンセプトが紹介されています。
このコンセプトさえ理解していれば、コードを書き進めることができるそうです。少なくとも僕はElmを全く書いたことがない上、フロントエンドはあまり得意ではありませんが、簡単なTodoアプリを作ることができました。

  • Model — アプリケーションの状態
  • View — 状態を HTML に変換する方法
  • Update — メッセージを使って状態を更新する方法

覚えることの少なさには本当に驚きました。
React.jsで同じTodoアプリを作ろうと思ったら関数コンポーネントが...useStateが...と覚えることが多く、自分のような気楽にフロントエンドを作りたい人間にとってElmは良い選択肢であると実感しました。
ただ、副作用を扱う処理(eg: 外部APIを呼び出す)を書く場合はまた別の知識が必要なようなので、改めて知識を入れていこうと思います。

文法とフォーマッタ

過去にHaskellを学んでいたので、文法に違和感を感じた箇所は特にありませんでした。
個人的に慣れないなと感じたのはフォーマッタです。型エイリアスを利用してTodoをレコードを使って宣言すると以下のようになります。

type alias Todo =
  { title : String
  , description : String
  , estimate : Int
  }

最初は強い違和感を感じていたのですが、書いているうちにだんだんと気にならなくなりました。

-- こうじゃないんかい -- 
type alias Todo = {
  title : String,
  description : String,
  estimate : Int
}

追記: 2023/05/19

なんで、こういうフォーマッタなのかまでは深堀っていなかったのですが、ABAB↑↓BAさんにTwitterで情報を共有して頂きました。たびたび、ありがとうございます。差分が分かりやすいようにとのことでした。

最後に

Elm面白いです。何より関数型言語で楽しくフロントエンドが作れるというのが個人的にアツい。
過去にHaskellやOcamlを学びましたが、なかなかHaskellでコードを書くような機会を作り出すことができず学習して終わりの状態となってしまっていました。
ただ、個人開発で避けては通れないフロントエンドの開発にElmを採用することで、合理的に関数型言語を書くことができます。まだ知識が全然足りていないので本格的にElmに取り組んでみたいと思います。

今回のTodoアプリの作成においてABAB↑↓BAさんにリファクタリングを中心にサポートいただきました。本当にありがとうございます。先駆者の方に意見を頂けて非常に勉強になりました。