Elmスクリプトをサッと実行する #Elm

Elmを書いていて、どんな結果が表示されるのかすばやく見てみたい！と思われたことはないでしょうか。

Elmにはビルトインの高機能なREPLが備わっていますし、elm reactorコマンドやEllieのようなオンラインIDEもありますので、開発するうえで困ることはほとんどないかもしれません。わたしはコマンドラインツールが好きなので、ターミナルから同じようにElmを試せる選択肢もあると楽しいかも？と思いついてしまいました。

GitHubを検索してみるとrun-elmというパッケージがすでに公開されていますが、elmコマンドがサブコマンドをサポートしていなかった頃から更新されていない様子で、Elm 0.19のコンパイラではうまく動いてくれないようです。

というわけで、自分で作ってみることにしました。

elm-renderのご紹介です。

使い方

インストール

最初に、実行したいElmファイルを管理するプロジェクトを作りましょう。elm-renderはnpmパッケージですので、npmからインストールしてnpxで実行するのが便利です。

$ mkdir elm-render-test
$ cd elm-render-test
$ npm init -y
$ npm install elm-render --save

Elmを書く

今回はこんな内容にしてみました。

module Example exposing (main)

import Html

main =
  let
    today =
      14

    christmas =
      24
  in
  Html.h1 []
    [ Html.text <|
        "クリスマスまであと" ++ String.fromInt (christmas - today) ++ "日！"
    ]

実行する

$ npx elm-render Example.elm
<h1>クリスマスまであと10日！</h1>

うまくいきました

elmコマンドをグローバルインストールしていることを前提としていますが、もしnode_modules以下などの別のパスを指定したいときは--elm-binaryオプションで変更できます。

$ npx elm-render --elm-binary=/path/to/your/elm Example.elm

しくみ

RE:DOMというDOM操作ライブラリと、Node.jsでRE:DOMを使えるようにするNO:DOMというパッケージを使って、Elmが出力するJavaScriptをレンダリングして表示しています。

RE:DOMとElmの組み合わせは、SSRにも応用できそうで夢が広がりますね！

できないこと・今後の課題

思い付きを急いで形にしただけなので、パッと思い付くだけでもこんなに制限があります。

elm/core、elm/html以外のパッケージは使えない
複数のElmモジュールに対応しておらず、実行できるのはmainを公開しているモジュールだけ
テスト、エラーハンドリングが適当

改善点やすてきな使い道を考えついた方はぜひ教えてください！