ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

行ってきたぜ!Elmハンズオン!! #elm_tokyo #257

毎日技術日誌

＃行ってきたぜ! 定期試験も昨日で終わり、晴れやかな気持ちでこちらのハンズオンに行ってまいりました。

elm-tokyo.connpass.com

Elmの文法一通り学んだらあとは課題の簡易チャットアプリ作ってみようみたいな感じでした。

ご注意

この記事はElmはおろか、JSすら満足に扱えないくらいのスキルの人間が書いています。

誤りがあったらそっと教えてくれるとうれしいです。

JSのフレームワークについて言及してますが、その辺も経験豊富なわけではないので、ツッコミ歓迎です。

やってみてどうだったか

Elmを語れるほどよくわかってるわけではないのですが、Elmってなんぞと言う話。

http://elm-lang.org/

こちらが公式サイト。

A delightful language for reliable webapps.だそうです。

Webアプリケーションを作ることに特化したプログラミング言語です。

俗に言う関数型言語のような文法をしています。

とは言ったものの私は関数型言語の経験は全くないです。(あと、Elm公式では関数型言語とは一言も言ってないらしく、あくまでA delightful language for reliable webappsということで、Webのためのめっちゃ楽しい言語と言う立ち位置みたいです。導入のハードルを下げるためだとか)

文法とかはまぁ公式ドキュメントを読んでもらうとして。

やってみた感じの感想は、文法を削ってなるべくシンプルな言語仕様にしてやることで、学習コストを下げてるのかな〜という感じでした。実際とっつきにくさを感じたのは最初だけで、コード見ながらドキュメント行ったり来たりを数回してるとなんとなくわかるようになっていく感じがします。

あと、静的型付で、immutableです。個人的には静的型付け言語が大好きなので、(というか動的型付けが嫌い)嬉しいですね。というか、Elmやってみようと思ったのもここが要因として大きいかも。

そして、Elm Architectureというのが言語として定義されていて、これのために言語仕様が作られている(?)ので、流派とかそういうのにとらわれずにかける言語だなと個人的に感じました。

ちなみにReduxはこのElm Architectureに影響されて作られました。

Reduxを書いた経験はあるのですが、リファクタリングをしようと思うと複数の箇所を忘れずに書き換えないとすぐに壊れてしまうな〜という印象を受けました。しかもエラーがわからない。その点Elmはコンパイルの時点でエラーを吐いてくれるのでリファクタリングが怖くない&高速にできる印象を受けました。Elm Architectureを無理やりJSで実装したものがReduxなのでは…という気がしてきた…。こんなこと言ったらいろんな人から怒られそう…。

今回のハンズオンでは通信などに関しては一切扱わなかったので、その辺がどんな感じなのかはこれから試してみてと言う感じですが、このへんのドキュメント

HTTP · An Introduction to Elm

JSON · An Introduction to Elm

見る限り、APIからのレスポンスを定義しておいて、その型に合わせてDecodeして〜みたいなことができるっぽいですね。

これは幸せですわ…。

雑感

いやこれ使えるようになったら強くね？って普通に思いました。(語彙力が低くてごめん)

JSにもflowとかTypeScriptとかあるけど型付は任意だし、型定義ファイルないとそれを作る or Anyでやり過ごすみたいな選択をする羽目になって、だんだんと崩壊していっちゃった…みたいなことにもならないしめっちゃいい気がする。

あとはもっと大きいプロダクトを作ってみないことには、欠点は見えてこない感じはあるけど、今日の講師陣の会社では、本番のプロダクトですでにElmを採用していて、特に大きな問題にはなってないみたいな実績もあるし(参考: 新サービスUniposに新言語elmを導入しました！ - Fringeneer's Tech blog )もっと流行ってほしいな！と思いました。

懸念になりそうなこととしては、やっぱり情報が少ない(特に日本語)し、人口が圧倒的に少ないのでライブラリ等の絶対量では劣るだろうし、その辺がどれくらい響いてくるのかなあと感じました。あと、ReactだとJSXを使ってHTMLっぽくViewを作ることができるのですが、Elmではそのようなものはなく以下のような感じになってしまいます。

<div class="content">
  <h1>Hello world!</h1>
  <p>This is HTML!</p>
</div>

これをElmのコードで書くと

div [ class "content" ]
    [ h1 []
        [ text "Hello world!" ]
    , p []
        [ text "This is HTML!" ]
    ]

こうなる。いやこれ分かりづらくねぇか？と個人的にはめっちゃ思ったのですが、Elmmerの人たちは特にそんな様子もなかったので、ただ単にElmの文法に慣れてないだけかもしれないです。あとHTMLからElmの文法への変換はHTML to Elmというツールがあるのでこれを使うといいらしいです。

とりあえず今日のイベントは楽しかったです。これからも継続的に使ってみようと思いました。

運営の皆様ありがとうございました。

雑談

とりあえず、研究室のサイトを僕はいま作り直すと言うことをやっているので、管理画面みたいなのでもElmで作ってみようかなと思いました。(ちょっとしたCMSみたいなのになる予定)

まぁまだサーバーサイドできてないんですけどね。

人生楽しい。Elmがんばってやっていきたい。

渋谷すごい

なんかガラス貼ってる途中みたいな感じになってた。