高品質なウェブフロントエンドを作るための言語 Elm の有用性が徐々に広まり、今年も採用事例が増えました。
利用者数が増えることは良いことではありますが、一方で悪気なく誤解を招く情報が生まれてしまう機会も増えてきます。
そこで、本記事はこれからElmをはじめる人やはじめて間もない人1が遠回りしないで Elm をモノにできるように、Elm を学ぶ上で落とし穴となる注意事項とその回避方法をまとめます。
なお、本記事で対象にするのは「実際に Elm を使って実用的なアプリケーションを作りたい」と考えている方です。
Elm をマウンティングのために使いたいマウンティングゴリラの方や、「プログラミング言語全部完全マスターした」と言うためにハローワールドやTODOアプリだけ書いて満足したい方は、別にそういう生き方も否定はしませんが本記事の対象外です。
そういう手っ取り早く形あるものを作ること自体に最大の価値を置いている方がこの記事を読むと「なんだよ抽象的な話ばっかりで中身のない記事だなぁ」と時間を無駄にしてしまいます。
では、ここで2024年の干支のヤギをご覧ください。
間違った動機ではじめない
どんなに正しいやり方で Elm を使っても、そもそも Elm が活かされる領域で使わなければ徒労に終わってしまいます。
この記事のちょうど1年前に書かれたElmはどんな人にオススメできないかを読んで、Elm に何を期待しても良く、何を期待してはいけないかを知ってください。
Elm の根幹部分の思想ですから、もちろん当時の内容がそのまま今も変わらず生き続けています。
さくらちゃんは1年前よりもちょっと大きく成長して生き続けています。
そろそろ2歳です。
その成長の具合を比較するために、ぜひ「Elmはどんな人にオススメできないか」をお読みください。
そしてこの記事から1年後の予期せぬ結末は「ヤギと振り返る恥ずかしいコード -- 次のレベルに上がるために」をお読みください。
仮想環境はいらない
Webフロントエンドに慣れていない人の中には、今までの自分の常識にしたがって「Elm 仮想環境」と調べ始める方がいます。いりません。
いかなる技術にもメリットとデメリットがあるものです。状況を適切に分析して適切な使い方をしましょう。
Dockerなどの仮想環境を使う動機は、他の人とほぼ同じ環境を手元に用意できることや、手元の環境を汚さずに環境構築できることです。特にlibcなどの低レベルなライブラリーに依存したコードを書く場合、手元のOSと不整合が起きたりするため大変重宝します。
しかし、あなたが学ぼうとしているものはElmです。ElmはWebフロントエンドの開発言語です。内部でC言語のライブラリーを呼び出したりすることもありません。elm コマンドさえインストールしてあれば、あとは elm install some/package のように実行するだけですべてのライブラリーが利用可能になります。
また、 elm コマンド自体も npm でインストールできます。
Webフロントエンドに慣れていない方は初耳かもしれませんが、 npm を使えば依存するライブラリーやバイナリーをプロジェクトごとにローカルインストールすることができます。インストールしたものはすべてバージョンを含めて記録されるので、他のメンバーと同じバージョンで依存ツールや依存ライブラリーをそろえることができます。
しかも、現代のWebフロントエンド開発において npm は不可欠なツールですから、学習コストに対して十分な見返りを求められます。
Elmのローカルインストールについてはelm-app-templateの解説記事が役に立つかもしれません。
わざわざOSレベルの知識が必要なDockerなどを使って環境構築しなくても、ただただ npm をインストールした環境で npm i elm を実行するだけでいいのです。仮想環境を用意するなんてコストに見合いません。
まず Elm guide を読む
なんかネットに転がってる「Elmに入門してみた」系の記事や、Elmに感動した人がElmを広めたい気持ちで作った入門コンテンツなどでElmを勉強するのはオススメしません。
もちろん、それまでElmを知らなかった方が興味を持つための最初の一歩として重要ですし、ハローワールドやTODリストだけ作って満足する人には大きな価値がありますが、
本記事の目的である「実際に Elm を使って実用的なアプリケーションを作りたい」を実現するためには多くの場合遠回りになります。
そういった記事はなぜこの世に生まれるのでしょうか？
多くの場合は「オレはElm書ける」とドヤってマウント取りたい方が、手っ取り早くドヤるためにネット上の粗製濫造された「入門記事」を読むからです。
そういった粗製濫造された記事は自分の環境でしか確認していない具体的な手順を書いたものですから、当然そのままやっても環境構築から失敗します。
それに腹を立てて「マジでクソみてぇな記事だな」と文句を付け、ドヤったりマウントとったり一発あてたいと思って「オレが正しい情報を書いてやるよ」と自己虚栄心からまたうんこの絞りカスみたいな「入門記事」を粗製濫造するのです。
また、多くの方を陥れる落とし穴として、Elm tutorial (www.elm-tutorial.org/) と呼ばれるコンテンツがありました。
（今ではドメインが失効しましたが、gitbooksとしてゴキブリのようにしぶとく生きてます。近づかないようにしましょう。お願いだから読まないで。ほんと。マジで。）
ヤギだって Elm tutorial を読むようなことはしません (文字を読めないから)
代わりに公式ドキュメントを読みましょう！
Elm 作者の Evan は、Elm の学習障壁を低くするために多くの時間を使っています。
「高品質なウェブアプリケーションを作る」という目的が常に最初にあって、そこからフレームワーク、そのフレームワークに適した言語として Elm があるのですから、当然学習のためのコンテンツにも力を入れているのです。
そんな Evan が自分で書いた公式ドキュメントである Elm guide は、言語の基礎からはじまってモジュールの構成をどう切ったら良いのかであったり、Elm という1つの言語に限らず使える汎用な知恵まで学べる至高のドキュメントです。中には「説明が足りなくてむずかしい」と思う方もいるかもしれません。そういうときは後述するElm-jpのdiscordで「ここがわからないんです」と素直に聞いてみましょう。たくさんの優しいサポートを受けられるはずです。
なんと、英語が苦手な方のために日本語訳の翻訳プロジェクトも進んでいます。
Elm に精通した有志が複数人で翻訳・レビューをしているため、質の高さは折り紙付きです。
もちろん私もごりごりレビューしています。
さらには「原文に忠実な直訳ではなく、Elm 初心者が日本語で読んで意味がわかりやすいこと」を第一にしているため、
日本語としても自然な上に、原文に足りない説明を適宜 Elm に精通した人間が補っています。
ここまで用意されているのに、まだ別のよくわからんコンテンツを見るんですか？
Elm 0.19 ではじめる
特別なこだわりがなければ、これから始める方は Elm 0.19 で十分なはずです。
公式パッケージサイトでは Elm 0.18 用のライブラリは検索できませんし、公式ドキュメント(Elm guide)もすでに 0.19 用に刷新されています。
Elm-jp を活用する
さて、Elm guide の翻訳プロジェクトは、実は Elm-jp というコミュニティ内で発足しました。
Elm-jp は主に discord という slack っぽいチャットツール上で活動しています。
招待リンク から簡単に参加できます。
私のようにクッソ優秀な上に初心者にもやさしい人がたくさんいるあたたか〜いコミュニティですし、別に参加したら何か義務が生じるわけではないので、好きなときにひらいて質問でも世間話でもすればいいんです。
Elm guide を読んでいて「ここがわからないな〜」と思ったら、Qiitaのよくわからん初心者が書いた変な記事を読むのではなく、Elm-jp の discord で聞いたら良いんです。
もちろん、プログラマーは自分で調べる力も必要ですが、聞くことも調べることの一部です。
優秀な人間1に無料で聞く機会があるのにそれを活かさないのは優秀なプログラマーなんでしょうか。
世界レベルで優秀な方もいて、やさしくて、あったかくて、世界一かわいいヤギにも会えるのに、参加しないなんてもったいないです。
おやつを前にしたヤギさんのように恥も外聞も捨てて素直になればいいんです！
何か作ってみる
Elm guide でも言及されていますが、実際に自分で何か作ってみましょう。
Elm は高品質なウェブアプリケーションを作成するための言語なのに、高品質なウェブアプリケーションを作成しないなんて本末転倒です。
またこれは少しハードルが高く感じるかもしれないので必須ではありませんが、簡単なものでいいので自分でライブラリを作って公式パッケージに公開してみましょう。
本当の意味で Elm のエコシステムやメンテナンスしやすいコードの書き方について学べます。
ヤギさんのうんぽろはころころ乾燥している上に腐敗しにくいため、
ヤギさんが雑草を食べてうんぽろになり、うんぽろが肥料となってまた雑草が生えてくる究極のエコシステムが形成されています。
elm-spa-example を参考にしない
多くの方が最初にelm-spa-exampleというものを参考にしたがり、Elmに失望して去っていきます。
Elmで何かアプリケーションを作るとき、まず最初に考えるべきは「本当にルーティングを伴うSPAである必要があるのか」です。
アプリケーションの要件としてUX的にも絶対にルーティングが必要ですか？
多くの場合はルーティングがなくてもどうにもなります。
また最初はルーティングなしで作りはじめて、あとでルーティングを追加することも簡単です。
Elmには親切で頼れるコンパイラーがあるからです。
プログラミング経験がある方なら、いきなり複雑なプログラムを書くのではなく、小さく単純で理解しやすいプログラムを動作確認しながら書くことの重要性をご存知のはずです。
そもそも「関数型プログラミング」というものはそういうプログラミングスタイルを容易にするものでもあります。
その後どうしもルーティングが必要になったとしても、elm-spa-exampleは適切ではありません。
まずはSPAを使わないelm-todomvcに目を通すべきです。
それで足りなければ、公式パッケージサイトのソースをクローンして始めることです。
Twitter を活用する
やはり情報収集には twitter が便利です。
「Twitterでフォローすべき Elm のすごい人たち」っていうリストをここに公開したほうが便利だとは思いますが、
それをすると「え、わたし選ばれなかったの... うぇ〜ん |> _ <|」ってなっちゃう人がいるかもしれないのでやめておきます。
この魑魅魍魎蠢く娑婆世界には、名前だけいろんなところで見るものの、実態は虚栄心ばかり肥大化していて人格が最悪な方などもいるものです。
付き合う人間の選び方にはお気をつけください。
とりあえずさくらちゃんのtwitterアカウントをフォローするなりストーキングするなりして、
- どんなリツイートをしているか
- どんな人にどういうリプライをしているか
- 誰とは意図的に関わらないようにしているか
を見れば、おのずと
あ、この人はElmや「関数型」の権威っぽい雰囲気出したりZenで初心者向けの記事を量産してるけど
自信満々にマウントとりながら間違ったことを主張しているのを他の人によく指摘されてる。
Elmのライブラリーとかも1つも公開してない。よく見たらなぜか初心者向けの記事ばっかじゃん。
高度な技術的記事がほとんど見当たらない。
この人が書いた記事とかは内容が怪しいから読まないほうが良いかも
とか
「あ、この人はフォロワー少ないけど技術力ある人っぽい」
といったことが分かってくるはずです。
そうやって気になる方をフォローしていくことで、Elmの情報のみならず、最新のヤギに関する情報も得られます。
(付録) CSS のあつかいについて
Elm guide では elm-css というライブラリを使って CSS を書くことをオススメされていますが、「これ」という決め手があるわけではありません。
elm-ui を使う人や、ふつうにCSSファイルを書いて読み込む人も多いようです。
僕はCSS modules をちょっと使ったやり方をいまのところ使っています。
これは特に「これ」といった最強メソッドがあるわけではないので、ご自身の価値観に合わせて選択してください。
また、CSS自体に不慣れな方のために現代開発者のためのCSS基礎技術という記事も書きました。
ぜひご参照ください。
日本語書籍
日本語の書籍も2冊出版されています。一方はさくらちゃんが翻訳しました。
公式ドキュメントだけでも十分な情報はありますが、以下の差別化ポイントに惹かれる方は購入を検討されても良いかもしれません。
プログラミングElmフライングゲットやぎぃ https://t.co/zupboH1Xgl pic.twitter.com/tSxhjA9cYf
— みんな大好き🐐ヤギのさくらちゃん🎯 (@arowM_) February 20, 2021
お、さくらちゃんに何かとどいてる...
— 🐐ヤギ魔法少女さくらちゃん（Kadzuya Okmoto） (@arowM_) February 21, 2019
...
...
...
レビューに参加させていただいた「基礎からわかるElm」でした！https://t.co/etdcZ8YS9O
食べないでください！#さくらちゃん日記 pic.twitter.com/bzLzQsclwg
本書は以下の点などで、高品質な日本語翻訳まであって分かりやすいと評判の公式ドキュメントと差別化を図ってます。
— 🐐ヤギ魔法少女さくらちゃん（Kadzuya Okmoto） (@arowM_) February 21, 2019
* ネット上に散らばっている知見を精査したもの
* 濫用されて消された「コンポーネントパターン」のナウいやり方
* Elmの歴史的経緯
* 型についてより詳しくhttps://t.co/etdcZ8YS9O
まとめ
以上、かつてのさくらちゃんの振り返り写真集でした！
さくらちゃんの写真集を手に入れる
さくらちゃんをもっと見る
他の記事を見る
ローアングルでせくしー