Help us understand the problem. What is going on with this article?

2021年 Elmをはじめる人が最初に読むページ

高品質なウェブフロントエンドを作るための言語 Elm の有用性が徐々に広まり、今年も採用事例が増えました。
利用者数が増えることは良いことではありますが、一方で悪気なく誤解を招く情報が生まれてしまう機会も増えてきます。

そこで、本記事はこれからElmをはじめる人やはじめて間もない人1が遠回りしないで Elm をモノにできるように、Elm を学ぶ上で落とし穴となる注意事項とその回避方法をまとめます。
なお、本記事で対象にするのは「実際に Elm を使って実用的なアプリケーションを作りたい」と考えている方です。
Elm をマウンティングのために使いたいマウンティングゴリラの方や、「プログラミング言語全部完全マスターした」と言うためにハローワールドやTODOアプリだけ書いて満足したい方は、別にそういう生き方も否定はしませんが本記事の対象外です。
そういう手っ取り早く形あるものを作ること自体に最大の価値を置いている方がこの記事を読むと「なんだよ抽象的な話ばっかりで中身のない記事だなぁ」と時間を無駄にしてしまいます。

では、ここで2021年の干支のヤギをご覧ください。
P_20181109_140421.jpg

間違った動機ではじめない

どんなに正しいやり方で Elm を使っても、そもそも Elm が活かされる領域で使わなければ徒労に終わってしまいます。
この記事のちょうど1年前に書かれたElmはどんな人にオススメできないかを読んで、Elm に何を期待しても良く、何を期待してはいけないかを知ってください。
Elm の根幹部分の思想ですから、もちろん当時の内容がそのまま今も変わらず生き続けています。

さくらちゃんは1年前よりもちょっと大きく成長して生き続けています。
そろそろ2歳です。
P_20181024_142638_vHDR_Auto.jpg

その成長の具合を比較するために、ぜひ「Elmはどんな人にオススメできないか」をお読みください。
そしてこの記事から1年後の予期せぬ結末は「ヤギと振り返る恥ずかしいコード -- 次のレベルに上がるために」をお読みください。

まず Elm guide を読む

なんかネットに転がってる「Elmに入門してみた」系の記事や、Elmに感動した人がElmを広めたい気持ちで作った入門コンテンツなどでElmを勉強するのはオススメしません。
もちろん、それまでElmを知らなかった方が興味を持つための最初の一歩として重要ですし、ハローワールドやTODリストだけ作って満足する人には大きな価値がありますが、
本記事の目的である「実際に Elm を使って実用的なアプリケーションを作りたい」を実現するためには多くの場合遠回りになります。
そういった記事はなぜこの世に生まれるのでしょうか?
多くの場合は「オレはElm書ける」とドヤってマウント取りたい方が、手っ取り早くドヤるためにネット上の粗製濫造された「入門記事」を読むからです。
そういった粗製濫造された記事は自分の環境でしか確認していない具体的な手順を書いたものですから、当然そのままやっても環境構築から失敗します。
それに腹を立てて「マジでクソみてぇな記事だな」と文句を付け、ドヤったりマウントとったり一発あてたいと思って「オレが正しい情報を書いてやるよ」と自己虚栄心からまたうんこの絞りカスみたいな「入門記事」を粗製濫造するのです。

また、多くの方を陥れる落とし穴として、Elm tutorial (www.elm-tutorial.org/) と呼ばれるコンテンツがありました。
(今ではドメインが失効して消滅してくれたのでもう心配ありません!)

ヤギだって Elm tutorial を読むようなことはしません (文字を読めないから)
P_20181023_152753_vHDR_Auto.jpg

代わりに公式ドキュメントを読みましょう!
Elm 作者の Evan は、Elm の学習障壁を低くするために多くの時間を使っています。
「高品質なウェブアプリケーションを作る」という目的が常に最初にあって、そこからフレームワーク、そのフレームワークに適した言語として Elm があるのですから、当然学習のためのコンテンツにも力を入れているのです。

そんな Evan が自分で書いた公式ドキュメントである Elm guide は、言語の基礎からはじまってモジュールの構成をどう切ったら良いのかであったり、Elm という1つの言語に限らず使える汎用な知恵まで学べる至高のドキュメントです。

なんと、英語が苦手な方のために日本語訳の翻訳プロジェクトも進んでいます。
Elm に精通した有志が複数人で翻訳・レビューをしているため、質の高さは折り紙付きです。
もちろん私もごりごりレビューしています。
さらには「原文に忠実な直訳ではなく、Elm 初心者が日本語で読んで意味がわかりやすいこと」を第一にしているため、
日本語としても自然な上に、原文に足りない説明を適宜 Elm に精通した人間が補っています。

ここまで用意されているのに、まだ別のよくわからんコンテンツを見るんですか?
P_20181112_135658_vHDR_Auto.jpg

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に無料で聞く機会があるのにそれを活かさないのは優秀なプログラマーなんでしょうか。

世界レベルで優秀な方もいて、やさしくて、あったかくて、世界一かわいいヤギにも会えるのに、参加しないなんてもったいないです。
おやつを前にしたヤギさんのように恥も外聞も捨てて素直になればいいんです!
P_20180820_155320_vHDR_Auto.jpg

何か作ってみる

Elm guide でも言及されていますが、実際に自分で何か作ってみましょう。
Elm は高品質なウェブアプリケーションを作成するための言語なのに、高品質なウェブアプリケーションを作成しないなんて本末転倒です。

またこれは少しハードルが高く感じるかもしれないので必須ではありませんが、簡単なものでいいので自分でライブラリを作って公式パッケージに公開してみましょう。
本当の意味で Elm のエコシステムやメンテナンスしやすいコードの書き方について学べます。

ヤギさんのうんぽろはころころ乾燥している上に腐敗しにくいため、
ヤギさんが雑草を食べてうんぽろになり、うんぽろが肥料となってまた雑草が生えてくる究極のエコシステムが形成されています。

P_20180903_182603_vHDR_Auto.jpg

elm-spa-examplesを参考にしない

多くの方が最初にelm-spa-exampleというものを参考にしたがり、Elmに失望して去っていきます。
Elmで何かアプリケーションを作るとき、まず最初に考えるべきは「本当にルーティングを伴うSPAである必要があるのか」です。
アプリケーションの要件としてUX的にも絶対にルーティングが必要ですか?
多くの場合はルーティングがなくてもどうにもなります。
また最初はルーティングなしで作りはじめて、あとでルーティングを追加することも簡単です。
Elmには親切で頼れるコンパイラーがあるからです。
プログラミング経験がある方なら、いきなり複雑なプログラムを書くのではなく、小さく単純で理解しやすいプログラムを動作確認しながら書くことの重要性をご存知のはずです。
そもそも「関数型プログラミング」というものはそういうプログラミングスタイルを容易にするものでもあります。

その後どうしもルーティングが必要になったとしても、elm-spa-examplesは適切ではありません。
まずはelm-todomvcに目を通すべきです。
それで足りなければ、公式パッケージサイトのソースをクローンして始めることです。

Twitter を活用する

やはり情報収集には twitter が便利です。
「Twitterでフォローすべき Elm のすごい人たち」っていうリストをここに公開したほうが便利だとは思いますが、
それをすると「え、わたし選ばれなかったの... うぇ〜ん |> _ <|」ってなっちゃう人がいるかもしれないのでやめておきます。
この魑魅魍魎蠢く娑婆世界には、名前だけいろんなところで見るものの、実態は虚栄心ばかり肥大化していて人格が最悪な方などもいるものです。
付き合う人間の選び方にはお気をつけください。

とりあえずさくらちゃんのtwitterアカウントをフォローするなりストーキングするなりして、

  • どんなリツイートをしているか
  • どんな人にどういうリプライをしているか
  • 誰とは意図的に関わらないようにしているか

を見れば、おのずと「あ、こいつはフォロワーやツイートは多いけどあんまりよくなさそう」「あ、この人はフォロワー少ないけど技術力ある人っぽい」というのが分かってくるはずです。
そうやって気になる方をフォローしていくことで、Elmの情報のみならず、最新のヤギに関する情報も得られます。

P_20180908_161302_vHDR_Auto.jpg

(付録) CSS のあつかいについて

Elm guide では elm-css というライブラリを使って CSS を書くことをオススメされていますが、「これ」という決め手があるわけではありません。
elm-ui を使う人や、ふつうにCSSファイルを書いて読み込む人も多いようです。
僕はCSS modules をちょっと使ったやり方をいまのところ使っています。

これは特に「これ」といった最強メソッドがあるわけではないので、ご自身の価値観に合わせて選択してください。

また、CSS自体に不慣れな方のために現代開発者のためのCSS基礎技術という記事も書きました。
ぜひご参照ください。

日本語書籍

日本語の書籍も出版されました。
公式ドキュメントだけでも十分な情報はありますが、以下の差別化ポイントに惹かれる方は購入を検討されても良いかもしれません。


まとめ

以上、かつてのさくらちゃんの振り返り写真集でした!

さくらちゃんの写真集を手に入れる
さくらちゃんをもっと見る
他の記事を見る
P_20180703_181837_vHDR_Auto.jpg
ローアングルでせくしー


  1. またはヤギなどのその他の生き物 

arowM
ヤギさんとして自由に生きてるよ さくらちゃんはアーティストだから世の理不尽には頭突きしちゃうよ フリーランスUXハッカー・プログラマー(Elm, Haskell)・技術翻訳・ヤギ語翻訳 ARoW代表 http://arow.info /気吹堂(出版)代表/UZUZ CXO http://github.com/arow
https://arow.info
arow-oss
もともと法人だったけど潰しちゃったよ c.f., https://qiita.com/arowM/items/9eddd10d531154cbc065
https://arow.info
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away