PR：この記事にはアフィリエイトリンクが含まれます。
Elm本を探すと、Elm Architectureの概説で終わるのか、通信や画面遷移まで手を動かして学べるのかが気になりますよね。3冊は扱う範囲に幅があり、掲載コードのElmバージョンも異なります。
Elmは静的型付けを備えたフロントエンド向け言語です。画面の状態と更新処理を整理しやすく、コードが複雑になったときも流れを追いやすい。ここに魅力があります。
日本語で基礎から実践へ進むなら『プログラミングElm』が第一候補。写真閲覧アプリを作りながら学びたい人には『Elm in Action』、全体像を短くつかみたい人には『Web Applications with Elm』が合います。
Elm本の早見表
3冊の扱う内容やページ数、Elmの対応バージョンを一覧にしました。書名だけでは見えにくい学習範囲も、並べてみるとつかみやすいですね。
| 書籍 | 主な内容 | ページ数・Elm版 | 希望小売価格 |
|---|---|---|---|
 Elm in Action | 写真アプリ、型、テスト、通信、JavaScript連携 | 344ページ・0.19.0 | $59.99 USD |
 プログラミングElm | 型、Elm Architecture、JSON・HTTP、WebSocket、SPA | 384ページ・0.19 | 3,278円（税込） |
 Web Applications with Elm | Elmの基礎、ライブラリ、Elm Architecture、サンプルアプリ | 208ページ・0.18 | $29.99 USD |
価格は希望小売価格を目安にしてください。実売価格は時期や販売店で変わります。海外書籍は為替や送料も加わるため、購入時の金額が表示価格と異なることがあります。
日本語の読みやすさを優先する人には『プログラミングElm』、制作課題に取り組みながら完成まで進みたい人には『Elm in Action』が有力です。短さを重視する場合は、対応バージョンも見ておきましょう。
Elmという設計
Elmの学びどころは文法にとどまりません。Modelは画面の状態、Msgは起きた出来事、updateは状態の更新、viewは画面表示を担当します。この4つを軸に設計するのが基本です。
検索画面なら、入力中の文字列や検索結果をModelに置きます。文字の入力や検索ボタンの押下をMsgとして受け取り、updateが新しい状態を返す。処理の筋道が見えてきます。
画面表示と状態更新を分けることで、機能を加えたときの影響を追いやすくなります。どの操作が画面を変えたのか分からなくなりがちなフロントエンド開発では、うれしい点ですよね。
更新の流れ
利用者の操作をMsgで受け、updateでModelを変え、viewが画面を描き直す。入力から表示までの道筋がつながるので、初めて読む人にも追いやすい構造です。
通信処理も状態の変化と結び付けて整理できます。検索開始、読み込み中、成功、失敗を別々の状態として表せば、それぞれの場面で何を画面に出すかがはっきりします。
テストでは、あるModelとMsgに対してupdateがどの状態を返すかを確かめます。画面全体を操作しなくても更新規則を確認でき、間違いに気づきやすくなります。
実アプリには、この流れの理解に加えてHTTPやJSON、ルーティング、JavaScript連携の知識も必要です。そうした機能を扱う本なら、Elm Architectureをアプリ全体へ広げる過程を追えます。
Elm in Action
『Elm in Action』は写真閲覧アプリを育てながら学ぶ紙書籍です。344ページで、Elmや関数型プログラミングの経験がないWeb開発者を対象にしています。
小さなアプリから始め、型やテストへ進み、サーバー通信やJavaScript連携を加えていきます。最後はルーティングを含むSPAを作るため、Elm Architectureが実際の画面でどう働くかまで学べます。
付属ソースコードのElmバージョンは0.19.0です。発行は2020年4月。現在の環境でコードを試すときは、パッケージやコードのバージョンを確かめながら進めると戸惑いを減らせます。
希望小売価格は$59.99 USDで、実売価格は時期や販売店によって変わります。テストや通信を含む制作課題に取り組み、一冊で経験を広げたい人におすすめです。
プログラミングElm
『プログラミングElm』は、日本語で基礎から実践へ進める384ページの紙書籍です。判型はB5変判。Elm Architectureに加え、JSON・HTTP、WebSocket、テスト、SPA構築まで扱います。
既存のJavaScript資産との統合やPortsも取り上げています。Elmだけで完結しない開発環境を想定しやすいのが持ち味です。既存のフロントエンドへElmをどう加えるか知りたい人にも合います。
扱うバージョンはElm 0.19です。原著の第3刷では依存関係とコード例がElm 0.19.1向けに更新されています。掲載コードを試す際は、手元の環境と依存関係を合わせると学習が止まりにくくなります。
希望小売価格は税込3,278円。実売価格は時期や販売店で変わります。英語を読む負担なく、通信やJavaScript連携まで日本語で学びたい人にはこの本がおすすめです。
短く読む英語本
『Web Applications with Elm』は208ページの英語書籍です。Elmの基礎、開発環境、ライブラリ、Elm Architecture、サンプルアプリを扱い、JavaScript経験のある初心者を対象にしています。
対応バージョンはElm 0.18です。ほかの2冊より古い版のため、現在の環境でコードを試す場合は構文やライブラリの違いを確かめながら読むことになります。
希望小売価格は$29.99 USDで、実売価格は時期や販売店で変わります。Elmの考え方を短く学びたい人には候補になります。ただし、現行環境でコードを動かしながら学びたい人には優先度が下がります。
結論
迷ったら『プログラミングElm』を第一候補にしてください。日本語でElm Architectureを学び、HTTPやWebSocket、テスト、SPA、JavaScript連携へ進めるため、初学者が実践までたどり着きやすい構成です。
アプリを段階的に作り切りたい人には『Elm in Action』がおすすめです。掲載コードはElm 0.19.0。現在の環境との差を確かめながら学べるかも判断材料になります。
『Web Applications with Elm』は短さや価格を重視する場合の入門候補です。ただし対応バージョンはElm 0.18。日本語で基礎から進むなら『プログラミングElm』、制作課題を通じて学ぶなら『Elm in Action』をおすすめします。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
