Elm 0.17~0.18版 NativeModuleの書き方

ElmでNativeモジュールを扱う方法は公式に公開されていません。
（個人的な予想ですが、将来的にも公式に承認されることは無いと考えています。）
利用する時は自己責任の元に利用するようにして下さい。

Elm0.17~0.18では従来のElm.Nativeモジュールが提供されなくなったようです。

これに伴って従来のElm.Nativeにモジュールを追加していくような書き方が出来なくなり、よりシンプルにNativeModuleを定義出来るようになっています。

この投稿では、Elm0.17でのNativeModuleの書き方について見ていきます。

モジュールをセットするための変数

Elm0.17では、モジュールを拡張するためにあるルールにそって命名されたjavascriptの変数にモジュールをセットすることでElmからアクセス出来るようになっています。

あるルールというのは、elm-package.jsonのrepositoryに記載されたパスを元に決定されます。

例えば、デフォルトのelm-package.jsonのrepositoryはhttps://github.com/user/project.gitとなっています。

この時、モジュールをセットする変数は下記のようになります。

var _user$project$Native_[module]

変数名はアンダーバーから始まり、repositoryのパスuser/projectのパスセパレーターを$に置き換え、最後に$Native_[module]といった形式で変数を定義することでElmからアクセス出来るようになります。

モジュールの定義方法

モジュールの変数にたいして、即時実行関数を代入します。
モジュールの実装方法は前バージョンと異なり、Elm.Nativeモジュールを利用せず、シンプルに関数とプロパティを実装していくだけとなります。

以下にサンプルコードを記載します。

Native/Sample.js

var _user$project$Native_Sample = function() {
  var foo = 'foo';

  function add(a, b) {
    return a + b;
  }

  return {
    foo: foo,
    add: F2(add) // 関数は前バージョン同様、`Fn`という関数で評価したものをセットします
  }
}();

NativeModuleにElmの型を定義する

このあたりは前バージョンの方法と全く同じです。

先程定義したNative/Sample.jsを元にサンプルコードを記載します。

Sample.elm

module Sample exposing ( foo, add )


import Native.Sample


foo : String
foo = Native.Sample.foo


add : Int -> Int -> Int
add a b = Native.Sample.add a b

ここまで出来たら、あと自由にElmからモジュールを利用するだけです！