Elmの歩き方（入門者向けブックマーク集）

今年からElmを始めた私が、自分用にブックマーク集を作りました。
Elmのコミュニティは日々拡大しているので、誰かの役に立つかもしれないと思い公開します。

Elmを習得するにあたって自分が実際に参考にした記事を集めました。
少し上級者向けだなと感じた記事や、作ってみた系の記事は除外しています。
気になったら普段通りに検索するなどしてください。

- [Elm - A delightful language for reliable webapps](https://elm-lang.org)



# どんな言語？

- [はじめに · An Introduction to Elm](https://guide.elm-lang.jp)
→ Elm の公式ガイドを、日本コミュニティの皆さんが日本語訳してくださいました。
　[Elmの開発者：Evan Czaplickiによるオリジナル版（英語）](https://guide.elm-lang.org)

- [わざわざ学ばなくてもいいプログラミング言語一位Elm - @ababup1192 | Qiita](https://qiita.com/ababup1192/items/4c39ff981642aded5d8e)

- [親切過ぎるエラーメッセージを届ける言語 Elm - @ababup1192 | Qiita](https://qiita.com/ababup1192/items/8dae437da47f25811658)

# 学習の進め方

- [2019年 Elmをはじめる人が最初に読むページ - @arowM | Qiita](https://qiita.com/arowM/items/5ec5853298fc880353b7)
→ 「ヤギがノイズだなぁ」くらいの人は、そのうち慣れると思うので我慢して読んでください。
　ちなみに、私はタヌキが好きです。

- [Elm 本書きました - ジンジャー研究室](http://jinjor-labo.hatenablog.com/entry/2019/02/26/112019)
→ 『基礎からわかるElm』の登場で、Elm入門のハードルは大きく下がりました。
　先へ進む前に、この本の内容をマスターすることをお勧めします。



# Elm の文法

## カスタム型

Elmのいちばん楽しいところだと思っています。
JavaScriptにもほしい。

- [カスタム型 · An Introduction to Elm](https://guide.elm-lang.jp/types/custom_types.html)
- [Elmカスタム型超入門 - @ababup1192 | Qiita](https://qiita.com/ababup1192/items/70199bff67dfc0e14e00)
- [値が制約を満たしていることを型で保証する - @arowM | Qiita](https://qiita.com/arowM/items/0106f2b66a6a446bad38)
- [「ADT, 直和・直積, State Machine」- @ymtszw | Qiita](https://qiita.com/ymtszw/items/dff02ad6350032688676)



## Maybe

Maybeは後回しにせず、最初に見かけたときにしっかり覚えておきたい。
エラーメッセージで指摘されることがあるので、その前に理解しておくと気楽です。

- [Maybe · An Introduction to Elm](https://guide.elm-lang.jp/error_handling/maybe.html)
→ 公式ガイドを読んで理解すれば、困ることはないと思っています。

- [わざわざ学んでみたらElmのMaybe型が楽しかった - @Yametaro | Qiita](https://qiita.com/Yametaro/items/7988b7dd2728cc2b9456)


- [Elmで入力状態を保持するときにMaybeを使うメリット - @arowM | Qiita](https://qiita.com/arowM/items/bedd54cbe584ebf3cea5)


# The Elm Architecture

- [Elm 0.19 の初期化方法 6 種類 - @jinjor | Qiita](https://qiita.com/jinjor/items/245959d2da710eda18fa)  
→ 特に Browser.sandbox と Browser.element の変化を意識すると、Elmアーキテクチャ全体の理解が早まると思います。



## elm/http

- [HTTP · An Introduction to Elm](https://guide.elm-lang.jp/effects/http.html)
→ 使うだけならば、どうということはないんです。

- [ElmでHttpをわかってしまおう - @ababup1192 | Qiita](https://qiita.com/ababup1192/items/b03fce202e1018bc4992)
→ この記事は初心者が追うには少し大きすぎる印象がありました。
　最初のうちは読み飛ばしていい記事だと思っています。
　でも、あとでここに戻ってくることになるかもしれません。
　私の場合は、複数のJSONを同時に取得したくなった時にこの記事を参考にしました。



## elm/json

Decoderについては、記事の本数が少ない印象があります。
「一度わかってしまえば怖くない」けれど、初心者にとっては壁。
ここを乗り越えると、Elm Packagesを自分で読み進める勇気が得られます。

- [JSON · An Introduction to Elm](https://guide.elm-lang.jp/effects/json.html)


- [ElmでJSON APIを叩く最低限 - @dyoshikawa | Qiita](https://qiita.com/dyoshikawa/items/a9ee32b84211f381f2c2)
→ @dyoshikawaさんの記事が出た時に「やっぱりここ苦労するよね」とホッとしました。笑
　Elmに慣れてきて改めて見直してみると、Http.requestの部分はHttp.getでも行けそうな気がします。

- [[Elm] Decoder a からいろいろ理解ってしまおう - @ymtszw | Qiita](https://qiita.com/ymtszw/items/1cabbdbda4273b4c1978)
→ @ymtszwさんの記事を必死に読んで、ようやくDecoderが怖くなくなりました。



## elm/time

他の言語と比べて、Elmは時間や日付の扱いが少し苦手な言語という印象があります。

- [Time · An Introduction to Elm](https://guide.elm-lang.jp/effects/time.html)


- [Elm TDDしながらelm/timeで日付の変換をする - @ababup1192 | Qiita](https://qiita.com/ababup1192/items/803bd2e66461c70bf7e7)
→ 実際には @ababup1192 さんの、この記事を見て実用的な書き方を習得しました。

elm/timeで足りない時は、justinmimbsさんのtime-extraで補いましょう。

- [elm/time の使い方 - チェシャ猫の消滅定理](https://ccvanishing.hateblo.jp/entry/2018/09/26/191231)
- [Elmで日付を扱うならとりあえずこれ、なパッケージたち。 - @tmKentauros | Qiita](https://qiita.com/tmKentauros/items/0680bb98e305e885196a)
- [Elmで日付を扱う0.19編 - @miyamo_madoka | Qiita](https://qiita.com/miyamo_madoka/items/ae83fe3a43eac432434e)



## JavaScriptとの相互運用

必要な時は使おう。

- [Elm と他のフレームワークを組み合わせる - @calmery | Qiita](https://qiita.com/calmery/items/d85e4755a4d0644c0610)



# Elm Packages

- [Elm Packages](https://package.elm-lang.org)  
→ 公式ガイドの次に重要なドキュメントのひとつがElm Packagesです。  
　JavaSctiptから入った人は型の表記に慣れるまで苦しいかと思いますが、そのうち慣れます。  
　がんばって！



## elm/svg

- [elm/svgを使ってみよう（SVGの基礎知識） - @y047aka | Qiita](https://qiita.com/y047aka/items/2732cf41656369b601bf)



## joakin/elm-canvas

- [elm-canvasでCanvas APIを使おう！ - @uzimaru0000 | Qiita](https://qiita.com/uzimaru0000/items/80bf1f04bf4faf219f21)



# 開発環境

- [Elmでの開発用テンプレート elm-starfighter を作った - @y047aka | Qiita](https://qiita.com/y047aka/items/4fc53447e0f2d5cbf6cd)  
→ 私の作ったElm開発用のテンプレートです。（V1 リリースに向け作業中）  
　Elm初心者に優しいテンプレートを目指しています。  
　使ってもらえると嬉しい。



ブックマーク集なので、気まぐれに更新していきたいと思います。