14
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ElmAdvent Calendar 2016

Day 3

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からモジュールを利用するだけです!

14
3
0

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
  3. You can use dark theme
What you can do with signing up
14
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?