Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@k-motoyan

Elm 0.17~0.18版 NativeModuleの書き方

More than 3 years have passed since last update.
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からモジュールを利用するだけです!

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
k-motoyan
プログラミング楽しいよ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?