初学者はElmとJavaScript(TypeScript)どちらから学ぶべきか

(私の周りで)定期的に話題に上がるので考えをまとめてみました。結論から言ってしまうと、どの言語にも少なからず壁と喜びがあり一長一短なため、**どちらから学んでも良い**となりました。強いて言うなら交互に学んで、どちらの良さ・悪さも学び取って、いつでも使い分けができるようになるのが良いと思います。この記事では、いくつかのトピックについて、それぞれの言語でどのような利点・欠点があるかを意見を述べていきたいと思います。

# 学ぶ目的

二つの言語を学ぶ上で何を目的にするかはとても重要です。なぜならElmはWebサイト・Webアプリケーションを作るための言語だからです。以下は公式ガイド(以下の文は[英語](https://guide.elm-lang.org/)、最新ではないですが[和訳](https://guide.elm-lang.jp/)もあります。)の序文の一部です。

> It helps you make websites and web apps.

もし、学ぶターゲットが、「IOTを動かしてみたい、機械学習をして見たい。」と言うモチベーションであれば、間違いなくJavaScript もしくは、Python, C言語などElmではない選択肢を提示するべきでしょう。そのため、この記事では、Webアプリケーションを作ろうとしている初学者にと言う前提で話は進んでいきます。

# 環境構築

結論から言うと、どちらも環境構築の難度は同じぐらいだと思います。

もし最速で計算処理を動かして見たいと言うニーズに対しては、Chromeのデベロッパーツールで動くJavaScriptが良いと思います。しかし、目的がWebアプリケーションを作ると言う目的であれば、さして重要な点ではないと思います。もし、npmなどを触らせずに学習を開始したい場合には、Web上で動く環境を提供するのが良いでしょう。なんとなく一つずつ上げておきます。

- Elm環境: [Ellie](https://ellie-app.com/new)
- JavaScript環境: [CodeSandbox](https://codesandbox.io/)

Web上で動く環境に無理が生じてきたり、デプロイしたくなったきた場合には、npmとエディタを使った本格的な環境が必要になってくると思います。今、私が思う楽な環境づくりの手法は、[Parcel](https://ja.parceljs.org/)を利用した方法です。Elmは、私が普段使っている環境を載せておきます。

- [Elm Parcel](https://github.com/ababup1192/elm-parcel)
- [JavaScript Parcel チュートリアル](https://parceljs.org/javascript.html)

# 情報収集

Elmは若く知名度が低い、JavaScriptは歴史があり知名度が高いため情報の多さは圧倒的にJavaScript有意な部分があります。落ちているコードを拾ってコピーペーストして、動かせると言う魅力は大きいと思います。しかし一方で、情報収集のしやすさは量の多さだけが全てではありません。まず、JavaScriptは情報の全てが新鮮で有益な情報であるとは限りません。歴史がある分、バッドプラクティス(ある時点でのベストプラクティスかもしれません)なコードや逆に新しい情報に振り回されることがあります。ある一つの方法を試すのに選択肢が多すぎると言うのは場合によっては、初学者に対するノイズになってしまい兼ねません。Elmの2つの大きな利点として、言語機能のシンプルさとThe Elm Architectureと言うWebアプリケーションを構築するためのフレームワークが一体になっており、なおかつそれを説明する公式ガイドがとても薄い点が挙げられます。実際に比較をして見ましょう。

- [MDN JavaScript 技術概説](https://developer.mozilla.org/ja/docs/Web/JavaScript/JavaScript_technologies_overview)
- [Elm Guide](https://guide.elm-lang.jp/)
- [Elm Syntax](https://elm-lang.org/docs/syntax)(文法のみを取り出したページ。かなり薄いです！)
- [Elm Examples](https://elm-lang.org/examples)

一件トピック数を並べるとElmの方が若干多く見えますが、実際には展開して見て一つ一つのページの長さを加味すると、かなりの差があります。ELmの情報が少ない分コミュニティがWeb上では活発に動いていますTwitterでの助言やDiscordでのサポートは厚いので是非ご活用ください。また、JavaScriptはフレームワークを含まない説明になるため、初学者がある程度の機能と品質を持ったアプリケーションを作るためにはかなりの敷居が高いように感じます。

勉強のやり方には、文法をしっかり学習してから作りたいものを作る場合と、ライブラリ等を触りながら実践で学ぶ方法があると思います。例えば、データのビジュアライズをたくさん試したいなどの場合は、JavaScriptで学ぶ方が得策だと思います(もちろんElmにもこの手のライブラリはありますが、手軽さと言う観点ではJavaScriptの方が良いと思います)。これから何度も記述しますが、学びやすさや本人のモチベーション、教え手の意図によって様々なシチュエーションが考えられるため、一概にどちらからやるべきかと言うことを言い切れないため状況を見ながらチューニングするのが一番だと思われます。

# 順序性

Elmを学んでいるとJavaScript(もしくはその知識)が必要となるシーンが少なからず存在します。1つはElmを実際に動かそうとするとき。1つはデフォルトで用意されていないイベントを扱おうとするとき。1つはJavaScriptのライブラリを呼び出そうとするとき。

1つ目は、公式ガイドによる[JavaScriptとの相互運用](https://guide.elm-lang.jp/interop/)のページです。これぐらいのスクリプトであれば、なんとなく意図を汲み取れますし、おまじないでも良いと思います。

```html 
 <script>
  var app = Elm.Main.init({
    node: document.getElementById('elm')
  });
  </script>
```

2つ目は、例えば、キーコードを取得するためにイベントオブジェクトから特定のフィールドを取り出す必要があります。このような仕様を知るためにMDNのドキュメント等を見る必要があり、その時にはJavaScriptのコードを読むスキルが求められます。このような状況は、案外早く来るかもしれないし、来ないかもしれません。3つ目のライブラリを呼び出す場合も[フラグ](https://guide.elm-lang.jp/interop/flags.html)であったり、[ポート](https://guide.elm-lang.jp/interop/ports.html)と呼ばれる機能においてJavaScriptのコードを記述する必要があります。

```elm
import Json.Decode as Json

onKeyUp : (Int -> msg) -> Attribute msg
onKeyUp tagger =
  on "keyup" (Json.map tagger keyCode)

-- ライブラリの中のコードです
keyCode : Json.Decoder Int
keyCode =
  Json.field "keyCode" Json.int
```

ご覧のように、ElmはJavaScriptと密接に関わる言語ではありますが、JavaScriptを一通り触れるようになるまで触ってはいけない言語とまでは行かないとも思います。強いて言えば必要になったタイミングで交互に学んでいくことが、よりElmもJavaScriptも理解できる本当の近道です。二つの言語を触ることで良い発見・悪い発見どちらも確認していくことが成長へとつながります。

# 品質

情報収集のトピックでも触れましたがElmは言語機能が少ない言語です。これはできることの幅を減らしすぎるものではなく、不必要な自由度を下げることによって品質の向上へとつなげるための機能の少なさでもあります。例えば、Elmでは*再代入可能な変数*という概念はありません。他には文という概念はなく全てが式であるため、式の集合である関数は*void*型になることはありませんし、冗長すぎる関数の量産を防ぐこともできます。JavaScriptは自由であるという見方もできますが、自由すぎる開発から品質の低さを省みて*const*を導入していく、*linter*の制限を強くしていくという学習よりも、最初から制約の強い環境で学ぶということの方が品質へのポテンシャルは高くなるケースがあると思います。制約が強すぎることで挫折者が増えるかもしれないという懸念があるかもしれませんが、[Elmのコンパイルエラーはとても親切なため](https://qiita.com/ababup1192/items/8dae437da47f25811658)過度に心配する必要がありません。[副作用もきっちり分けながら開発する手法](https://qiita.com/ababup1192/items/2b86ade96651716fc3a8)しか用意されていないため、テスタビリティが高いコードが書きやすくなります。

# 仕事

これはとても難しいトピックです。単に仕事口という点では特に日本では、Elmが書ける企業は限られてきます(私が観測する限りは、5~10社と言ったところです)。あなた、もしくは、教える対象の方が、明日今すぐにでも仕事を見つけなければならないという状況ならJavaScriptを選ぶことで生存率が上がると思います。しかし、長期という目線ではどうでしょうか。もし対象がエンジニアとして腰を据えて学習していくという話であれば、例えば品質を考えた技術を考える力を育てていくのは当たり前です(割と軽視されがちだと感じます)。また、繰り返しになりますがどちらか一方を選ぶものではなくElmとJavaScript(もしくは他の何かの言語)を交互に学んでいくことで着く力もあります。私の話にはなりますが社会人を始めてから2年間で最初はElmを利用したプロダクトは存在しなかったものの、いくつかの運用が便利になるツールを作り評価されたり、フロント・サーバともにElmの経験を生かした(既存のそれまでのコードと比較して)品質の高いコードを書く力が幸いなことに認められ入社当初と比べると信頼された大きく評価されたりする結果となりました。今では一部、Elmを利用したプロダクト開発も決定できるようになりました。何か1つの言語や手法にすがるのではなく、生産性を向上したり品質を高めるためにいろんなHowを選べる力が付くと良いと思います。

# まとめ

いくつかのトピックについて話しましたが、このトピックについて触れて欲しい。であったり、このトピックの内容は間違っているなどの意見がありましたら是非お知らせください。