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

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 件のコメント
続きを読む

多分週刊チラシの裏 (Oct 19, 2020 - Feb 26, 2021)

週刊とは言ったが毎週刊とは言ってないという言い訳。 C++ のコンパイルを高速化する小技 ビルドシステムやツールを変更せずともコーディングだけで改善できるコンパイル時間短縮テクニック。 #include を減らす インライン化を明示的に避ける 関数オーバーロードの可視性を制限する 公開シンボルを減らす の 4 本。 歯医者で歯を治したら記憶能力を失った話 歯医者で簡単な治療を受けた日から後、記憶が 90 分しか保持できなくなった英国の軍人の話。まるで「博士の愛した数式」だが実話である。 DRPK で売られていた Sim City っぽいゲームのリバースエンジニアリング 平壌市内のアプリストア (物理) で売られていた Sim City 風ゲームがインストールに失敗してライセンス認証で止まってしまったのでなんとか動かせないものかとリバースエンジニアリングしてみた話。 日本にあっては DPRK のデジタル事情というと 3G セルラーが現役とか国内 Web サイトのリストがポスター一枚に収まるとか何故かコンピュータ将棋の古豪とかの断片的な情報が伝え聞かれる程度だが、近頃は Android タブレットでゲームなどもできるらしい。 国内のインフラ及びエコシステム事情に合わせて元々フリーミアム + アプリ内課金モデルだったものが買い切り 5,000 KPW (< 1 USD) になっているなど、我々が失った自由が我々よりも不自由な (はずだと我々が信じている) 国に残存しているのは皮肉だろうか。 typosquatting は単なる typo じゃ済まない typo を狙って人気のあるドメインやソフトウェアに類似した名前をつける手法 (typosquatting) は人を辟易させるのみならずセキュリティの脅威である。 IQT が 2017 年から 2020 年にかけて Python ライブラリの中央リポジトリである PyPI において行った調査で、メジャーなライブラリに名前を似せたマルウェアが 40 個確認されたとのこと。 その内 16 個が単純なスペルミス狙い (e.g., “urlib3” vs. “urllib3”) で、26 個は正当なパッケージと混同するような名前 (e.g., “nmap-python” vs. “pytho...
コメントを投稿
続きを読む

多分週刊チラシの裏 (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 上の対話で当事者双方が納得し合っ...
コメントを投稿
続きを読む

Mac から iPhone のカメラを起動して写真を直接取り込める

Via: The Verge ID セルフィーや (物理) 書籍のページスキャンなど携帯電話のカメラを使って写真を取り込むことは日常的な所作になっているが、写真の使い途が何かの申し込み用 Web フォームなどで iPhone より Mac の方が操作し易いときなどは億劫だ。Mac 組込の FaceTime カメラは 720p とか 1080p しかなくて非力すぎ、かといって iPhone で一旦撮影したものを Photos から探して AirDrop するのも面倒である。 実は macOS Mojave / iOS 12 以降には Continuity Camera という機能がある。これを使うと Apple 製の Mac アプリケーションから iPhone / iPad のカメラを起動して、余計な中間コピーを残すことなく写真を Mac に転送できる。 使い方は簡単で、対応している Mac アプリケーションのコンテキストメニューに “Import (or Insert) from iPhone (or iPad)” という項目がある。“Take Photo” だと一枚、“Scan Documents” だと複数の写真を (歪み補正しつつ) 連続で撮影して転送できる。 対応 Mac アプリケーションは Finder のほか iWork (Keynote, Numbers, Pages), Mail, Messages, Notes, TextEdit となっている、のだが実は Preview でも使える。同様にコンテキストメニューあるいは “File” メニューから起動できる。
コメントを投稿
続きを読む

開発環境の構築に asdf が便利なので anyenv から移行した

プロジェクト毎に異なるバージョンの言語処理系やツールを管理するために、pyenv や nodenv など *env の利用はほとんど必須となっている。 これらはほとんど一貫したコマンド体系を提供しており、同じ要領で様々な環境構築ができる非常に便利なソフトウェアだが、それを使うことで別の問題が出てくる: *env 自身の管理である。 無数の *env をインストールし、シェルを設定し、場合によりプラグインを導入し、アップデートに追従するのは非常に面倒な作業だ。 幸いなことにこれをワンストップで解決してくれるソリューションとして anyenv がある。これは各種 *env のパッケージマネージャというべきもので、一度 anyenv をインストールすれば複数の *env を簡単にインストールして利用できる。さらに anyenv-update プラグインを導入すればアップデートまでコマンド一発で完了する。素晴らしい。 そういうわけでもう長いこと anyenv を使ってきた。それで十分だった。 ——のだが、 ここにもう一つ、対抗馬となるツールがある。 asdf である。anyenv に対する asdf の優位性は大きく2つある: 一貫性と多様性だ。 一貫性 “Manage multiple runtime versions with a single CLI tool” という触れ込み通り、asdf は様々な言語やツールの管理について一貫したインタフェースを提供している。対して anyenv は *env をインストールするのみで、各 *env はそれぞれ個別のインタフェースを持っている。 基本的なコマンド体系は元祖である rbenv から大きく外れないにしても、例えば jenv のように単体で処理系を導入する機能を持たないものもある。それらの差異はユーザが把握し対応する必要がある。 多様性 asdf はプラグインシステムを持っている。というより asdf 本体はインタフェースを規定するだけで、環境構築の実務はすべてプラグイン任せである。 そのプラグインの数は本稿を書いている時点でおよそ 300 を数える。これは言語処理系ばかりでなく jq などのユーティリティや MySQL のようなミドルウェアも含むが、いずれにしても膨大なツールが asdf を使えば...
コメントを投稿
続きを読む