Gunosy Tech Blog

Gunosy Tech Blogは株式会社Gunosyのエンジニアが知見を共有する技術ブログです。

Elm ファーストインプレッション

こんにちは、広告技術部のくらさわです!
この記事は Gunosy Advent Calendar 2018、16日目の記事です。
昨日の記事は山本さんの Gradleモジュール分割とレイヤードアーキテクチャ でした。

はじめに

年末です。
年末なので今年の締め的な記事を書くのがいいのかもと思ったのですが、そんな守りに入るよりも、年末でも、いや年末だからこそ新しいことを始めて新年へのスタートダッシュをキメてやろうと思い、Elmを触ってみた感想を書きます。 (書くネタがなかった)

Elm とは

f:id:k_7016:20181216152724p:plain

というわけでElmの説明から。
公式ガイド日本語版で以下のように説明されております。

Elm は JavaScript にコンパイルできる関数型プログラミング言語です。 ウェブサイトやウェブアプリケーションを作るツールという面では React のようなプロジェクトだと言えます。 Elm はシンプルであること、簡単に使えること、高品質であることを大切にしています。

https://guide.elm-lang.jp/ より

また以下のようにも書かれております。

Elm に対して様子見の立場である方も、Elm をちょっと試してみて実際に何かプロジェクトで使ってみると JavaScript や React のコードがいままでよりもうまく書けるようになっているはずです。 Elm で得られた知見はいろんなところで簡単に役立てることができます。

ワクワクしますね!

ぼくの Elm の始め方

Qiita の Elm Advent Calendar の初日の記事がを参考にさせていただきました。
2019年 Elmをはじめる人が最初に読むページ この記事で Elm guide を読むといいと書いてあったのでそれをざっと読んではじめました。
(この記事読ませていただく前に、Elm Tutorial の方を読んで「あれ、情報古いなあ」っていうの一回やりました。)

ぼくにとっての Pros / Cons

まずざっと触ってみた感想としての Pros/Cons を挙げてそのあとで詳細について書いていこうと思います。
(ここであげるのはあくまでも「現在の僕にとっての」なので悪しからず。 また、Cons の方はただ僕がハマっただけな感あります。)

前提として今回は、普段行なっているちょっとした作業を手助けするツール、簡単にいうと 画面からJSONを入力したら、編集して返すツールを作成しました。

(ちなみに私のチームには、改善 Day という制度があるのでそれを使いました。
tech.gunosy.io

Pros

  • 環境構築が簡単
  • The Elm Architecture がシンプル
  • エラーメッセージが丁寧でわかりやすい
  • JavasSriptとの連携もできる

Cons (というかはまった箇所)

  • 型が決まらないJSONを扱いずらい
  • 文法に慣れが必要

Pros

環境構築が簡単

簡単でした。
react とか使おうとすると必要になる webpack 用意して、babel使ってとか、開発環境用に devserver 準備してーとかやる必要がありません。

  1. elm をインストール
  2. $ elm reactor # サーバが立ち上がる

だけでだいたい動かすところまでいけます。
ここを読めばだいたいできます。 https://guide.elm-lang.jp/install.html

ちなみにエディタはAtomを使いました。
elm-format のプラグインがよくできていて助かりました。 後は language-elmだけ入れていました。

The Elm Architecture がシンプル

React + Redux を使ったことはあるのでそちらとの比較になりますが大分シンプルだなと思いました。
Redux は Elm にインスパイアされたというのもよくわかりました。
Redux だと書くこと増えるなって感じますが Elm だとあんまりそんな感じはしないですね。

一番簡単な例だとこいつでしょうか https://guide.elm-lang.jp/architecture/buttons.html
公式サンプルのカウンターです。

redux でいうところの Store としての Model の定義。
Action は Msg として表現。ActionCreatorはいりません。
Reducer と対応する Update。
だいたいReactのJSXが担当する部分のView も素のELmでそのまま書きます。
StoreとConnect する部分は特に気にする必要なし。

また、Reduxだと副作用を Middleware で扱ったりすると思いますがElmは Cmd といもので扱います。
副作用の処理は The Elm Architecture では自然と分離されるのであまり気にする必要が無くなります。
こちらの記事を紹介させていただきます。
Elmで副作用を扱う仕組みCmdがとっても良い理由

ちなみに、The Elm Architecture は TEAと略されたりするらしいです。

エラーメッセージが丁寧でわかりやすい

まだElm の書き方に慣れていなくて、なんとなく書くと結構エラー出るんですが、エラーメッセージが親切なのでどう直せばいいかすぐわかったりします。
これはありがたかったですね。
こちらの記事で親切さが説明されておりましたので紹介させていただきます。
親切過ぎるエラーメッセージを届ける言語 Elm

JavasSriptとの連携もできる

Cons の 「型が決まらないJSONを扱いずらい」 の部分で詳細を書くのですが、一部処理がElmで扱いずらいなという時にJS側で処理することが簡単に行えました。
詳細は 公式の JavaScriptとの相互運用 に譲りますが 簡単なサンプル書いたので置いておきます。 - Elm側: https://github.com/n-kurasawa/json-converter/blob/master/src/Main.elm - JS側: https://github.com/n-kurasawa/json-converter/blob/master/index.html

このおかげで既存のアプリケーションのJSを一部Elmになんてことも、「技術的」には可能そうです。

Cons (というかはまった箇所)

型が決まらないJSONを扱いずらい

そもそも、ElmのJSONのDecodeに取っ付きずらさを感じたりもしたのですが、受け取るJSONのプロパティが動的だったりして型が決まらないとさらに扱いずらいなと。

ElmのJSONのDecodeですごい勉強になった記事はこちら[Elm] Decoder a からいろいろ理解ってしまおう

ざっくりいうとJSの世界からElmの世界に持ってくるときに、ちゃんと型をつける為に色々してあげる必要があるよっていうことですね。

そして、動的にプロパティが変わるJSONを扱うのがまた難しかったんですが、僕がやりたかったことが既に記事なっておりました。(僕は途中で諦めてJS側で処理しました。 JSON.parse って簡単。)
ElmとJSONの話

簡単にいうと、基本的に、扱うJSONごとに Decoder を定義する必要があるけど、なんでもDecode できるDecoderを定義するのは僕には難しかったって感じです。

文法に慣れが必要

これはどんな言語でもそうなのですが、僕が関数型の言語に慣れていないこともあり、他の言語よりとっつきにくさがありました。
まあ、慣れの問題 + 新しいことは楽しいので特に問題というわけでもないですが。
気持ち的には思ってたよりJSとは全く別の言語だったなという感じですね。

まとめ

まだ全然、調査不足、コード量不足なので、すぐに業務に導入とかそういう話はできないですが、自分一人でなら結構使って行きたいかもっていう感想を得ました。
あとは、CSS周り、テスト周りを調べられていないのでその辺も触ってみないとなという感じです。

また、いくつかElmアドベントカレンダーから記事を紹介させていただきましたが、なんと今年のElmアドベントカレンダーは3つ目まであり、勢いを感じました。
(気づいたら参考にさせていただいた記事紹介みたいな記事になっていました。)