ElmのPortでJSを使う。

ElmとJavaScript(以下JS)がやり取りする方法には、PortとNativeモジュールとprogramWithFlagsの３つがあります。（違いについては最後に。）

Portの構文はよく忘れてコピペするので、Qiitaに書いておこうかなと思いました。

PortはElmに用意されているJSとやり取りする仕組みです。
Elmで以下のように名前と型だけの関数を用意し、Cmd/Subとして実行します。

port hello : String -> Cmd msg
port jsHello : (String -> msg) -> Sub msg

するとJS側で以下のように利用できます。

const elm = document.getElementById('elm');
const app = Elm.Test.embed(elm);   //Elmアプリケーションを起動

//ElmからJSへはsubscribe
app.ports.hello.subscribe(function(fromElm) {

  console.log(fromElm);
  //JSからElmへはsend
  app.ports.jsHello.send("Hi!");

});

//JSからElmへsend
app.ports.jsHello.send("Elm! hellooooo");

結構簡単です。

型の対応表

ElmとJSの型の対応表です。

Elm	Javascript
Bool	Bool
String	String
Int Float	Number
List	array
Arrays	array
Tuples	array(固定長、複数の型)
Records	object
Maybe (Nothing)	null
Maybe (Just 42)	42
Json.Encode.Value	JSON

Portの書き方。

Portを書いてみます。

port moduleに変更する

まず先頭行をmoduleからport moduleに変更します。（よく忘れてコンパイラに怒られる。）

port module Test exposing (..)

メモ：port moduleを使っているパッケージはElm Packageで公開できません。同時にJSのインストールも必要になるからです。

ElmからJSへCmdを出す

Elmから、外のJSを呼び出します。

Elm側

port 関数名 : 送る型 -> Cmd msg

port hello : String -> Cmd msg

portと書いて関数名と型を定義します。この時、型は送る型->Cmd msgとします。（msgは小文字で書かなければなりません。）

そしてこの関数をinit関数や、update関数で使います。

init = "" ! [hello "Hello!JS!"]

initに書くと、Elm初期化後すぐのタイミングでJSへ値を送ります。

JS側

JS側はports.定義した関数名.subscribeとして、関数を登録して受け取ります。(portsの「s」をよく忘れる)

var elm = document.getElementById('elm');
var app = Elm.Test.embed(elm);

//Elmから受け取る！
app.ports.hello.subscribe(function(str) {
  console.log(str);
});

これでElmから好きなタイミングでJSコードを呼び出すことが出来ました。

JSからElmに送る

次は反対にJS側からElmに値を渡して、Elmは受け取ります。

Elm側

port 関数名 ： (JSからやってくる型-> msg) -> Sub msg

port jsHello : (String -> msg) -> Sub msg

と書いて関数を定義します(msgは小文字)。

JSからやってくる値はElmではMsgになります。なのでMsg型を定義します。
そしてportで定義した関数を以下のように使います。

type Msg = GetHello Strign                     --Msgの定義

port jsHello : (String -> msg) -> Sub msg      --JS -> Elm のport

main = program {... , subscriptions = subscriptions} --subscriptions関数に使う。

subscriptions : Model -> Sub Msg
subscriptions model = jsHello GetHello         --例。

update msg model =
  case msg of
    GetHello str -> ...                        --JSからの値はMsgになる。

JS側

JS側は、app名.ports.関数名.send(送る値)でElmに送ります。

例

app.ports.jsHello.send("hellooooo"); //Elmへ送る

例えばJQueryを呼び出してみる。

最後にElmからJQueryを呼び出してみます。

この前ふとチャット画面のように自動で一番下までスクロールする機能が欲しくなりました。グーグルで検索してみると、JQueryのコードが出てきます。

$(スクロール対象のセレクタ).animate({"scrollTop": $(スクロール対象のセレクタ)[0].scrollHeight}, スクロール時間);

一行でスクロールの時間やアニメーションまで指定できるとはJQuery便利ですね。

portで呼び出してみます。

Elm

port scrollDown : () -> Cmd msg

update msg model =
    ...  -> ... ! [scrollDown ()]

consoleView =
    div [id "console"] [ ...]

js

const app = Elm.Main.embed(...);

app.ports.scrollDown.subscribe((_) => {

    $("#console").animate({"scrollTop": $("#console")[0].scrollHeight}, 5);

});

これで、画面に文字が追加されるたびにスクロールするようになりました。

このようにElmでPortを使えばJSの資産もすぐ使えます。

トラブルシューティング

Elmのスケジューラーとの兼ね合いだと思われるのですが、Elmを呼び出した後にDOMを取り出す処理を記述した所、取り出せないという事がありました。

const App = Elm.Main.embed(document.getElementById("main"));

document.getElementById('hoge').addEventListener("pointerdown" , (event) => {
        console.log(event);
    });

setTimeoutで囲むことで動きます。

setTimeout(function () {
    document.getElementById('hoge').addEventListener("pointerdown" , (event) => {
        console.log(event);
    });

}, 0);

PortとNativeモジュール

programWithFlagsはElmに初期値を渡す仕組みだとして、PortとNativeモジュールについて。

Nativeモジュールはapiのラップしたい、（またさらにElmパッケージとして公開したい時）に使うと思います。それでだいたい主要なWeb apiはライブラリとして公開されているので、「JSコード使いたい」と思ったときはだいたいPortで済むはずとなっています。

Nativeモジュールは非サポート（使い方を公開しない、apiがアナウンス無しで変わる）となっていて、公式側からのみ提供する方針になっています。またNativeを使ったパッケージは現在Elmパッケージから公開出来ないようになっています。

この理由は（自分の解釈でまとめると）、NativeモジュールはJSコードをElmランタイムに直接展開するので、ユーザーに開放してライブラリが増えていくとランタイムが壊れやすくなっていってしまう。ElmはJS以外（webassembly）も見ているのでJSをいろんなライブラリが、別にそれぞれラップしたコード使うみたいなことがないように必要最小限にしたい。といったあたりです。

しかしながらTestコード上など、Nativeの方が便利な場面、Portで冗長になる場面もあります。以下のリンクが参考になります。
参考：Elmを本番運用するためのツールあれこれ - Qiita
参考：Elm 0.17~0.18版 NativeModuleの書き方 - Qiita

Portで呼んだJSコードはElm化出来る/されるかもしれないので、あとで移行しやすいような関数名とか付けると、すこし良いかもしれません。

Nativeで副作用のある関数をラップするときは、副作用をElmに持ち込まないように、また使いやすいようにTask化すると良いかもしれません。

まとめ

• ElmとJSがやり取りする方法には、port構文とNativeモジュールとprogramWithFlagsの３つ。
• port簡単。基本的にはこいつを使う。JSとは疎結合でElmの純粋は保たれる。
• port moduleはElm Packageで公開できない。
• ElmのportでJS資産はすぐ使える。