最近フロントエンドを調べているとelm言語を聞くことが多いと思います。
ですが、新しい言語に挑戦して見るのは結構大変だと思います。

そこで、学習のレベル別に参考となるリンクを用意してみました。

elmは協力な型システムと小さな仕様によって、サンプルを真似てたらいつの間にか完成してるような言語です。

だから以下のリンクを参考にたくさんコピペすると上達も早いと思います。
皆さんの学習の手助けになれば幸いです。

まず試してみる

https://elm-lang.org/try
こちらは公式のブラウザからElmを体験できるSandboxです。
適当に数字とかいじってみるといいかもしれません。

チュートリアルを見てみる

https://guide.elm-lang.jp/
こちらは公式日本語チュートリアルです。

適当にコピペするのもいいですし、写経してみるのも学習になります。
パターンマッチあたりまでは理解しやすいので、そこまで読み進めてみるといいと思います。

様々な点でJavaScriptと異なるため慣れない点もあると思いますが、その一つ一つにも理由があるので、とりあえず次に進んでいくとスムーズに進みます。

ただ、型の恩恵やキーワード補完の恩恵を受けるためにローカルで作業するとまた違った感触になると思います。環境構築に関しては次で説明します。

チュートリアルで読んだ内容を実践してみましょう。
通常はローカルでテキストエディタを用いてソースコードを編集すると思います。

おすすめのエディタはVSCodeです。上記の拡張機能の説明の従って環境構築を行うと、簡単に快適な環境を作成できます。

チュートリアルだけじゃわからない箇所がある、もっとElmを知りたくなったら書籍を読んでみましょう。
こちらは昨年出た本ですが、Elmの最新版に対応しており、
この本を読むだけでElmに必要な知識がまんべんなく身に付きます。

Elmのデフォルトの機能だけでもSPA(アプリ内で複数ページを持つもの)は作成できますが、個人的には冗長な記述が多くて面倒です。代わりにフレームワークを使ってみてはどうでしょうか。

こちらは最近話題になっているSPA構築用のフレームワークです。
冗長な記述を減らしてより直感的にSPAを構築することができます。

もっとElmを知りたい場合は、こちらのリポジトリを見てはどうでしょうか
Awesome ~~というgithubのリポジトリは、大抵関連する優良なコンテンツを集めたリンク集になっています。

もっとElmユーザーが増えて、フロントエンドでStateを大事にする文化が栄えますように！！