スキップしてメイン コンテンツに移動

js_of_ocaml の使い方

ラベル:

js_of_ocaml (jsoo) は Ocsigen が提供しているコンパイラである。その名の通り OCaml バイトコードから JavaScript コードを生成する。 これを使うことで OCaml で書いたプログラムを Web ブラウザや node.js で実行することができる。

インストール

単に OPAM を使えば良い:

$ opam install js_of_ocaml js_of_ocaml-ocamlbuild js_of_ocaml-ppx

バージョン 3.0 から OPAM パッケージが分割されたので、必要なライブラリやプリプロセッサは個別にインストールする必要がある。 とりあえず使うだけなら js_of_ocaml と js_of_ocaml-ppx の二つで十分。後述するように OCamlBuild でアプリケーションをビルドするなら js_of_ocaml-ocamlbuild も入れると良い。

これで js_of_ocaml コマンドがインストールされ、OCamlFind に js_of_ocaml 及びサブパッケージが登録される。

コンパイルの仕方

以下ソースファイル名は app.ml とし、ワーキングディレクトリにあるものとする。

手動でやる場合

一番安直な方法は、直接 js_of_ocaml コマンドを実行することである:

$ # バイトコードにコンパイルする。js_of_ocaml.ppx は JavaScript オブジェクトの作成や操作の構文糖衣を使う場合に必要
$ ocamlfind ocamlc -package js_of_ocaml,js_of_ocaml.ppx -linkpkg -o app.byte app.ml
$ # 得られたバイトコードを JavaScript にコンパイルする
$ js_of_ocaml -o app.js app.byte

OCamlBuild を使う場合

OCamlBuild を使う場合、.js 用のビルドルールを定義したディスパッチャが付属しているので myocamlbuild.ml でこれを使う:

let () = Ocamlbuild_plugin.dispatch Ocamlbuild_js_of_ocaml.dispatcher
$ # app.ml -> app.byte -> app.js までまとめてやってくれる
$ ocamlbuild -use-ocamlfind -plugin-tag "package(js_of_ocaml.ocamlbuild)" -tags "package(js_of_ocaml,js_of_ocaml.ppx)" app.js

もちろん app.byte を OCamlBuild で作って自分で js_of_ocaml に渡しても良い。 特に js_of_ocaml のオプションを細かく設定したい場合、_tags ファイルでは設定できない項目がある (e.g., --source-map-inline やリンクする .js ファイル) ので myocamlbuild.ml で OCamlBuild API をいじるよりは Makefile を書く方が手軽である。

OASIS を使う場合

屋下に屋を架して OASIS でビルドしている場合は、まず _oasis に .byte のビルド設定を書く:

...
Executable "example_app"
  BuildDepends: js_of_ocaml, js_of_ocaml.ppx
  BuildTools: ocamlbuild
  CompiledObject: byte
  Install: false
  MainIs: app.ml
  Path: .

続いて oasis setup で myocamlbuild.ml を自動生成し、その末尾 (OASIS_STOP マーカ以降) に以下のような設定を追記する。

...
(* OASIS_STOP *)
Ocamlbuild_plugin.dispatch
  begin fun hook ->
    dispatch_default hook;
    Ocamlbuild_js_of_ocaml.dispatcher ~oasis_executables:[ "app.byte" ] hook
  end

oasis_executables がミソで、ここに JavaScript にコンパイルしたいターゲットファイルの名前を書いておくと同名の .js ファイルをビルドするようになる。だいぶハック臭いがマニュアルにも書いてある仕様だから仕方がない。

あとは OASIS の手順でコマンドを叩けば良い:

$ ocaml setup.ml -configure && ocaml setup.ml -build

JBuilder を使う場合

知らん。最近流行ってるし誰か Qiita にでも記事書いて欲しい。

JavaScript の型付

js_of_ocaml パッケージは JavaScript とのバインディングである Js モジュールを提供しており、OCaml から JavaScript の値を利用したり、逆に JavaScript に OCaml の値を渡すことができる。

JavaScript は動的型付をする言語だから、OCaml コードから参照するためには関数や値に OCaml の型を与える必要がある。

プリミティブ

以下のように対応づけられる:

JavaScript OCaml JS -> OCaml OCaml -> JS Immediate
Boolean bool Js.t Js.to_bool Js.bool Js._true / Js._false
null 'a Js.opt N/A Js.some Js.null
undefined 'a Js.optdef N/A Js.def Js.undefined
Number int / float N/A N/A 0, -1, 42, 3.14, ...
String Js.js_string Js.t Js.to_string Js.string N/A
Symbol N/A N/A N/A N/A

プリミティブには例外が多いのだが、基本的に JavaScript の値は Js.t 型でラップされる。Boolean の場合 bool Js.t が対応するが、その他の JavaScript オブジェクトの場合はオブジェクト型 (e.g., < .. > Js.t) である。

JavaScript の null と undefined (厳密に言うと変数 undefined が持っている未定義値) は特別な一個の値だが、OCaml は null 安全なのでこの値を取り得る式にそれぞれ Js.opt / Js.optdef という option のような型を付ける。例えば真偽値あるいは null であるような変数の型は bool Js.t Js.opt だし、省略可能な文字列引数の型は Js.js_string Js.t Js.optdef である。即値としての null と undefined はそれぞれ Js.null と Js.undefined で参照できる。

Number は直接に int ないし float に対応づけられる。これは利便性のための妥協だと思う。ところで JavaScript の Number は内部的には倍精度浮動小数点数なので、OCaml の int (現代においては 63 ビット符号つき) を収められないことがあることに注意。

String の項に出てくる Js.js_string というのは次の項で述べるように (OCaml の) オブジェクト型である。名前に js_ という接頭辞がつくのは open Js したときに OCaml の string と混濁させないためだろう。

Symbol は ES2015 から導入された新たなプリミティブ型だが、js_of_ocaml は ES2015 をまだサポートしていないので型も用意されていない。自分で型を書けば使えるのでどうしても使いたければ御自由に。

オブジェクト

JavaScript オブジェクトの型は Js.t でラップされた OCaml オブジェクトの型に対応づけられる (忘れているかも知れないが OCaml はオブジェクト指向言語である。)

JavaScript のメソッドもプロパティも OCaml のメソッドとして表現する。メソッドの場合は戻り値の型を Js.meth でラップし、プロパティの場合は Js.prop / Js.readonly_prop / Js.writeonly_prop のいずれかでラップする。

具体例で見てみよう。以下のようなクラスが JavaScript で書かれていて、それを OCaml で書かれたアプリケーションから利用したいとする:

export default class Point2D {
  constructor(x, y) {
    this._x = x;
    this._y = y;
  }
  get x() { return this._x; }
  get y() { return this._y; }

  add(other) {
    return new Point2D(this.x + other.x, this.y + other.y);
  }

  sub(other) {
    return new Point2D(this.x - other.x, this.y - other.y);
  }

  // 二点間の距離を得る。引数 from は省略可能で、省略した場合原点からの距離を返す
  distance(from) {
    const p = !!from ? this.sub(from) : this;
    return Math.sqrt(p.x ** 2 + p.y ** 2);
  }
}

このクラスとそこから生成されるオブジェクトに OCaml の型を与える必要があるので、まず次のようなクラス型を定義する:

class type point2d = object
  method x : float Js.readonly_prop
  method y : float Js.readonly_prop
  method add : point2d Js.t -> point2d Js.t Js.meth
  method sub : point2d Js.t -> point2d Js.t Js.meht
  method distance : point2d Js.t Js.optdef -> float Js.meth
end

このクラス型定義と同時にオブジェクト型 point2d も自動で定義される (ややこしい話なので気にしなくて良いが、「クラス型」は OCaml クラスのシグネチャであってオブジェクトの型とは異なる。):

type point2d =
  < x : float Js.readonly
  ; y : float Js.readonly
  ; add : point2d Js.t -> point2d Js.t Js.meth
  ; sub : point2d Js.t -> point2d Js.t Js.meth
  ; distance : point2d Js.t Js.optdef -> float Js.meth
  >

これで JavaScript オブジェクトの型を point2d Js.t と表せるようになった。

なお OCaml は識別子のレターケースに意味がある言語で、メソッド名は小文字あるいはアンダースコア ('_') から始まらなければならない。大文字から始まるメソッドないしプロパティ (e.g. AMethod) は先頭にアンダースコアを付け加えて定義する (e.g., _AMethod。) JavaScript へのコンパイル時に元の名前に置き換えられる。

次はクラスの型だが、JavaScript においてクラスとはコンストラクタ関数そのものである。 コンストラクタは特別な型 'a Js.constr で表現される。型変数 'a は関数型で、その引数はコンストラクタ引数 (引数を取らない場合は unit)、結果の値は生成されるオブジェクトの型に対応する。 Point2D クラスのコンストラクタは2つの実数を引数に取るので、OCaml における型は (float -> float -> point2d Js.t) Js.constr となる。

これでオブジェクトとクラスの型が定義できた。次は JavaScript モジュールから Point2D クラスの実装をロードする方法を考えよう。

JavaScript のモジュール・システムは ES2015 まで標準化されていなかったので実行環境に合わせてコードを書く必要がある。ここではメジャな node.js 環境を仮定する。 ES2015 の構文糖衣で書かれた JavaScript クラスは babel でトランスパイルされるものとし、require / module.exports を使ってインポート / エクスポートを行う。

この例の場合 OCaml で書くのはライブラリでなくアプリケーションなのでエクスポートは考えなくて良いが、インポートのための require 関数のバインディングは書く必要がある。クラスを読み込む想定なので値域を狭めて 'a Js.constr を返す関数 import_class としよう:

let import_class module_ : 'a Js.constr =
  (* js_pure_expr は副作用のない JavaScript 式を評価して値を得る。誰も require に再代入しないと仮定 *)
  let require = Js.js_pure_expr "require" in
  let module_ = Js.string module_ in
  Js.Unsafe.(funcall require [| inject module_ |])

(* JavaScript の let point2d = require('./point2d.js'); 相当 *)
let point2d : (float -> float -> point2d Js.t) Js.constr = import_class "./point2d.js"

当然だが JavaScript 関数の呼出は型安全ではないことに注意。import_class 関数の型は string -> 'a Js.constr なので require に文字列以外の引数を渡すことは防げるが、戻り値の型にドキュメント以上の意味はない。文字列が妥当なモジュール識別子かつそのモジュールがクラスをエクスポートしていることを確認するのはプログラマの責任である。インポートしたものがクラスでなかったとしてもコンパイラにそれを知る術はない。

ともあれこれで point2d 変数に JavaScript の Point2D クラスを束縛できたはずである。ここまで手動でつけてきた型が間違っていなければ、あとは型安全な世界でプログラムが書ける。

JavaScript オブジェクトの操作には OCaml オブジェクトとは若干違う構文を使う。この構文は先述のコンパイル手順でそうしていたように、js_of_ocaml.ppx パッケージへの依存を OCamlFind に伝えることで利用できる。 オブジェクトの作成は new klass args... の代わりに new%js consturctor args...、メソッドの呼出し (JavaScript だと object.method(args...)) は object#method args... の代わりに object##method args... あるいは object##(method args...)、読み込み可能なプロパティへのアクセスは object##.property、また書込み可能なプロパティへの代入は object##.property := value である。

open Printf

let () =
  let p = new%js point2d 3. 4. in
  printf "x=%f, y=%f, distance from origin=%f\n" p##.x p##.y p##(distance Js.undefined);
  printf "x=%f, y=%f, distance from (1, 1)=%f\n" p##.x p##.y p##(distance (Js.def (new%js point2d 1. 1.)))

このように OCaml オブジェクトとほぼ同様に JavaScript オブジェクトを操作できて、しかも勝手に型がつく。OCaml は TypeScript や Scala と違って引数の型も推論するので、ライブラリを書いているのでもなければ型宣言する必要はほとんどない。

これで目的は達成したことだし一見落着だが、ところでしかし distance メソッドの呼出を見るとなんだか冗長である。 JavaScript は実行時に引数を調べて挙動を変えられるので引数の省略ができたわけだが、OCaml では引数の数は (オプショナル引数を除けば) 不変なので引数の不足時に渡される未定義値を明示的に渡さなければならないし、省略しなかった場合にも型を合わせるために Js.def を使って値をラップしなければならない。

この例はコードが少し冗長になるだけだからまだ良いが、例えば JavaScript 文字列の replace メソッドは第一引数に文字列あるいは RegExp、第二引数に文字列あるいは変換関数を取る。このメソッドに単一の型を付けるには型安全性を捨てるか、opaque な型とキャスト関数を定義して使わなければならない。

動的なアドホック多相性を持つ JavaScript メソッドの問題に上手く型をつける (これは駄洒落である) ために、js_of_ocaml は同一メソッドに別のシグネチャを持った別名を定義できる。つまり OCaml の型システムからは別のメソッドに見せかけて、実際は同じメソッドを呼び出すコードを出力するのである。 別名の定義方法は簡単で、本来のメソッド名にアンダースコアと任意の文字列を加えると、コンパイル時にアンダースコア以下は捨てられて本来のメソッド名になる。

この機能を使って distance メソッドの別名を定義すると次のようになる:

class type point2d = object
  method x : float Js.readonly_prop
  method y : float Js.readonly_prop
  method add : point2d Js.t -> point2d Js.t Js.meth
  method sub : point2d Js.t -> point2d Js.t Js.meht
  method distance : float Js.meth
  method distance_from : point2d Js.t -> float Js.meth
end

引数を省略するときは distance を使い、引数があるときは distance_from を使うようにする:

open Printf

let () =
  let p = new%js point2d 3. 4. in
  printf "x=%f, y=%f, distance from origin=%f\n" p##.x p##.y p##distance;
  printf "x=%f, y=%f, distance from (1, 1)=%f\n" p##.x p##.y p##(distance_from (new%js point2d 1. 1.))

JavaScript のメソッドは通常 lowerCamelCase で命名されるので、この規約が問題になることは少ないだろう。

メソッド型 / 関数型

JavaScript の関数やメソッドにコールバック関数を渡したいとき、OCaml の関数をそのまま渡すことはできない。OCaml の関数はカリー化されているが JavaScript の関数はそうではないし、また JavaScript の関数はメソッドとして bind された this を参照し得るのだから当然である。

そういうわけで OCaml の関数を JavaScript から呼べるようにラップする関数と、そのようなコールバック関数の型が提供されている。

JavaScript の関数は一般に (-'a, +'b) Js.meth_callback という型で表現される。ここで 'a は this の型、'b は関数型で引数と戻り値を表す。どういう訳か知らないが Js.t でラップしなくて良い。 this を参照しない関数であればその型は unit で良い。この場合は簡単のために 'a Js.callback = (unit, 'a) Js.meth_callback という別名が使える。 例えば Promise のコンストラクタが取る関数は (('res -> unit) Js.callback -> ('rej -> unit) Js.callback -> unit) Js.callback のように型付できる

OCaml の関数を Js.meth_callback 型や Js.callback 型に変換するにはそれぞれ Js.wrap_meth_callback と Js.wrap_callback を使う。Js.wrap_meth_callback に渡す関数は this を第一引数として受け取る。つまり Python や Perl 5 と同じ規約である。

参考文献

  • Js_of_ocaml: 公式ページ。マニュアルとか API ドキュメントとかデモアプリケーションとかベンチマーク結果とかがある。どうせ検索しても大して情報はないので諦めてマニュアルを読もう
  • ウェブブラウザで関数型プログラミング! js_of_ocaml: 数少ない日本語の js_of_ocaml 紹介記事。書かれたのが6年前と古いので js_of_ocaml の API が変わってたり構文糖衣が camlp4 だったりで適宜読み替えが要るが、未だに最も網羅的な内容だと思う
  • js_of_ocamlの新しいシンタックス: 現行の構文糖衣の紹介。上記の記事の差分として読むとほぼキャッチアップできる

コメント

コメントを投稿

このブログの人気の投稿

Perl 5 to 6 - コンテキスト

2011-02-27: コメント欄で既に改訂された仕様の指摘がありました ので一部補足しました。 id:uasi に感謝します。 これはMoritz Lenz氏のWebサイト Perlgeek.de で公開されているブログ記事 "Perl 5 to 6" Lesson 06 - Contexts の日本語訳です。 原文は Creative Commons Attribution 3.0 Germany に基づいて公開されています。 本エントリには Creative Commons Attribution 3.0 Unported を適用します。 Original text: Copyright© 2008-2010 Moritz Lenz Japanese translation: Copyright© 2011 SATOH Koichi NAME "Perl 5 to 6" Lesson 06 - コンテキスト SYNOPSIS my @a = <a b c> my $x = @a; say $x[2]; # c say (~2).WHAT # Str() say +@a; # 3 if @a < 10 { say "short array"; } DESCRIPTION 次のように書いたとき、 $x = @a Perl5では $x は @a より少ない情報—— @a の要素数だけ——しか持ちません。 すべての情報を保存しておくためには明示的にリファレンスを取る必要があります: $x = \@a Perl6ではこれらは反対になります: デフォルトでは何も失うことなく、スカラ変数は配列を単に格納します。 これは一般要素コンテキスト(Perl5で scalar と呼ばれていたもの)及びより特化された数値、整数、文字列コンテキストの導入によって可能となりました。無効コンテキストとリストコンテキストは変更されていません。 特別な構文でコンテキストを強制できます。 構文 コンテキスト ~stuff 文字列 ?stuff 真理値 +stuff ...
2 件のコメント
続きを読む

Perl 5 to 6 - ツイジル

これはMoritz Lenz氏のWebサイト Perlgeek.de で公開されているブログ記事 "Perl 5 to 6" Lesson 15 - Twigils の日本語訳です。 原文は Creative Commons Attribution 3.0 Germany に基づいて公開されています。 本エントリには Creative Commons Attribution 3.0 Unported を適用します。 Original text: Copyright© 2008-2010 Moritz Lenz Japanese translation: Copyright© 2011 SATOH Koichi NAME "Perl 5 to 6" Lesson 15 - ツイジル SYNOPSIS class Foo { has $.bar; has $!baz; } my @stuff = sort { $^b[1] <=> $^a[1]}, [1, 2], [0, 3], [4, 8]; my $block = { say "This is the named 'foo' parameter: $:foo" }; $block(:foo<bar>); say "This is file $?FILE on line $?LINE" say "A CGI script" if %*ENV.exists('DOCUMENT_ROOT'); DESCRIPTION いくつかの変数にはツイジルという第2のシジルがあります。これは基本的にはその変数が「普通」ではないということです。違いはいくつかあり、例えばスコープの違いなどです。 オブジェクトのパブリックな属性とプライベートな属性がそれぞれ . と ! というツイジルを持つことは既に紹介しました; それらは通常の変数ではなく self に結びつけられています。 ツイジル ^ はPerl5で例外的に扱われていたケースを一般化します。次のように書けます # 注意: Perl5のコードです sort ...
コメントを投稿
続きを読む

Perl 5 to 6 - サブルーチンとシグネチャ

これはMoritz Lenz氏のWebサイト Perlgeek.de で公開されているブログ記事 "Perl 5 to 6" Lesson 04 - Subroutines and Signatures の日本語訳です。 原文は Creative Commons Attribution 3.0 Germany に基づいて公開されています。 本エントリには Creative Commons Attribution 3.0 Unported を適用します。 Original text: Copyright© 2008-2010 Moritz Lenz Japanese translation: Copyright© 2011 SATOH Koichi NAME "Perl 5 to 6" Lesson 04 - サブルーチンとシグネチャ SYNOPSIS # シグネチャなしのサブルーチン——Perl5風 sub print_arguments { say "Arguments:"; for @_ { say "\t$_"; } } # 固定引数の型指定付きシグネチャ sub distance(Int $x1, Int $y1, Int $x2, Int $y2) { return sqrt ($x2-$x1)**2 + ($y2-$y1)**2; } say distance(3, 5, 0, 1); # デフォルト引数 sub logarithm($num, $base = 2.7183) { return log($num) / log($base) } say logarithm(4); # 第2引数はデフォルトを利用 say logarithm(4, 2); # 明示的な第2引数 # 名前付き引数 sub doit(:$when, :$what) { say "doing $what at $when"; } doit(what => 'stuff', when => 'once'); # ...
コメントを投稿
続きを読む

多分週刊チラシの裏 (Sep 28 - Oct 04, 2020)

Chrome Web Store が有料 Chrome 拡張の取扱を終了 Chrome Web Store で提供されている有料 Chrome 拡張及びアプリ内課金 API の両方が 2021 年 1 月いっぱいで廃止される。 開発者はそれまでに代替となるサードパーティの課金 API に移行し、購入済ライセンスの移行手段も用意する必要がある。 この決定の発表時点で新規の有料ないしアプリ内課金のある Chrome 拡張の新規登録は終了している。実際のところ 2020 年 3 月時点で既に「一時的に」停止されており、その措置が恒久化されただけとの由。 シェルスクリプティングには長いオプションを使え 「短いオプション (e.g., -x ) はコマンドライン上での略記である。スクリプトにおいては自分や将来の同僚のためにも長いオプション (e.g., ---do-something ) を与える方が理解が容易だろう」という主張。 異論の余地なく正論である。 CobWeb - COBOL to WebAssembly Compiler COBOL から WebAssembly へのコンパイラ。いやマジで。 Cloudflare が何を思ったか同社のサーバレス環境である Workers に COBOL 対応を追加した際 の成果物である。 COBOL から C へのトランスレータである GNU COBOL と C コードをコンパイルして WebAssembly を出力する Emscripten から成っており、他の言語に比べて軽量なバイナリを生成するとのこと。 「ウチではそんな風にはやらないんだ (“We don’t do that here”)」 昨今ソフトウェア開発のコミュニティでも Code of Conduct を用意するところが増えてきたが、コミュニティの文化を明文化するのは難しい。 長大な「べからず集」は息苦しいし、肯定的なガイドラインは時に抽象的で実効的に使えない。問題となるようなふるまいの動機が善意であった場合は特にそうだ。 仮に優れたガイドラインがあっても、それに基いて人を実際に咎めるのは骨が折れることである。初中やればコミュニティ内でも疎まれる。 話の分かる相手ならそれでもまだ説得する意義もあるが、Web 上の対話で当事者双方が納得し合っ...
コメントを投稿
続きを読む

Perl 5 to 6 - Perl5の演算子に対する変更

これはMoritz Lenz氏のWebサイト Perlgeek.de で公開されているブログ記事 "Perl 5 to 6" Lesson 11 - Changes to Perl 5 Operators の日本語訳です。 原文は Creative Commons Attribution 3.0 Germany に基づいて公開されています。 本エントリには Creative Commons Attribution 3.0 Unported を適用します。 Original text: Copyright© 2008-2010 Moritz Lenz Japanese translation: Copyright© 2011 SATOH Koichi NAME "Perl 5 to 6" Lesson 11 - Perl5の演算子に対する変更 SYNOPSIS # ビット演算子 5 +| 3; # 7 6 +^ 3 # 6 5 +& 3; # 1 "b" ~| "d" # 'f' # 文字列連結 'a' ~ 'b' # 'ab' # ファイルテスト if '/etc/passwd' ~~ :e { say "exists" } # 繰り返し 'a' x 3 # 'aaa' 'a' xx 3 # 'a', 'a', 'a' # 3項演算子 $a == $b ?? 2 * $a !! $b - $a # 連結比較 if 0 <= $angle < 2 * pi { ... } DESCRIPTION 数値演算子( + , - , / , * , ** , % )はすべて元のままです。 | 、 ^ 、 & はジャンクションの生成に使われるので、ビット演算子は構文が変更されました。 それらはデータプレフィクスを伴い、例えば ...
コメントを投稿
続きを読む