LoginSignup
3

More than 5 years have passed since last update.

Elm 0.17~0.18版 NativeModuleの書き方

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

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

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

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

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

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

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

例えば、デフォルトのelm-package.jsonrepositoryhttps://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からモジュールを利用するだけです!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3