Elm
ElmDay 1

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

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

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

タイトルは「2019年」となっていますが、もうだいたい2019年みたいなものなので気にしなくてもいいです。
どうしても気になる方は2019年の干支のヤギでも見て肩の力を抜いて生きていきましょう。
P_20181109_140421.jpg

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

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

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

その成長の具合を比較するために、ぜひElmはどんな人にオススメできないかをお読みください。

まず Elm guide を読む

なんかネットに転がってる「Elmに入門してみた」系の記事や、Elmに感動した人がElmを広めたい気持ちで作った入門コンテンツなどでElmを勉強するのはオススメしません。
もちろん、それまでElmを知らなかった方が興味を持つための最初の一歩として重要ですし、ハローワールドやTODリストだけ作って満足する人には大きな価値がありますが、
本記事の目的である「実際に Elm を使って実用的なアプリケーションを作りたい」を実現するためには多くの場合遠回りになります。

また、多くの方を陥れる落とし穴として、Elm tutorial (www.elm-tutorial.org/) と呼ばれるコンテンツがあります。

🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐絶対に Elm tutorial を読まないでください!🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐

検索でも上位に引っかかる上に公式っぽいURLで、しかも日本語訳まで用意されていますが、絶対に読まないでください!
これは実は非公式な上に古いし、公式ドキュメントの方がずっと内容が充実しています。
ここまで言っても読む意味分からん人がいるので再度注意します。

🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐絶対に Elm tutorial を読まないでください!🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐

ヤギだって 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

Twitter を活用する

やはり情報収集には twitter が便利です。
「Twitterでフォローすべき Elm のすごい人たち」っていうリストをここに公開したほうが便利だとは思いますが、
それをすると「え、わたし選ばれなかったの... うぇ〜ん |> _ <|」ってなっちゃう人がいるかもしれないのでやめておきます。

とりあえず僕のtwitterアカウントをフォローするなりストーキングするなりして、

  • どんなリツイートをしているか
  • どんな人にどういうリプライをしているか

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

P_20180908_161302_vHDR_Auto.jpg

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

Elm guide では elm-css というライブラリを使って CSS を書くことをオススメされていますが、日本ではあまり主流ではないように感じます。
elm-ui を使う人や、ふつうにCSSファイルを書いて読み込む人が多そうです。
僕はCSS modules をちょっと使ったやり方をいまのところ使っています。

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

まとめ

以上、今年1年のさくらちゃんの振り返り写真集でした!

さくらちゃんにご飯をあげる
さくらちゃんをもっと見る
他の記事を見る
P_20180703_181837_vHDR_Auto.jpg
ローアングルでせくしー


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