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

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 の nullundefined (厳密に言うと変数 undefined が持っている未定義値) は特別な一個の値だが、OCaml は null 安全なのでこの値を取り得る式にそれぞれ Js.opt / Js.optdef という option のような型を付ける。例えば真偽値あるいは null であるような変数の型は bool Js.t Js.opt だし、省略可能な文字列引数の型は Js.js_string Js.t Js.optdef である。即値としての nullundefined はそれぞれ Js.nullJs.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_callbackJs.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の新しいシンタックス: 現行の構文糖衣の紹介。上記の記事の差分として読むとほぼキャッチアップできる

コメント

このブログの人気の投稿

部分継続チュートリアル

この文書についてこれはCommunity Scheme Wikiで公開されているcomposable-continuations-tutorial(2010年09月30日版)の日本語訳です。誤字脱字・誤訳などがありましたらコメントあるいはメールで御指摘いただけると幸いです。本訳は原文のライセンスに基づきCreative Commons Attribution-ShareAlike 2.0 Genericの下で公開されます。Original text: Copyright© 2006-2010 Community Scheme WikiJapanese translation: Copyright© 2011 SATOH Koichi本文部分継続(Composable continuation)は継続区間を具象化することで制御を逆転させるものです。 ウンザリするほど複雑な概念を表す長ったらしいジャーゴンのように聞こえますが、実際はそうではありません。今からそれを説明します。resetとshiftという2つのスペシャルフォームを導入するところから始めましょう[1]。 (reset expression)は特別な継続を作るなりスタックに目印を付けるなりしてからexpressionを評価します。簡単に言えば、expressionが評価されるとき、あとから参照できる評価中の情報が存在するということです。 実際にはshiftがこの情報を参照します。(shift variable expression)は目印のついた場所、つまりresetを使った場所にジャンプし、その場所からshiftを呼び出した場所までのプログラムの断片を保存します; これはプログラムの区間を「部分継続」として知られる組み合わせ可能な手続きに具象化し、この手続きにvariableを束縛してからexpressionを評価します。組み合わせ可能(Composable)という語はその手続きが呼び出し元に戻ってくるため、他の手続きと組み合わせられることから来ています。 Composable continuationの別名として例えば限定継続(Delimited continuation)や部分継続(Partial continuation)もありますが、ここでは一貫して「組み合わせ可能」という用語を使います(訳注: …

多分週刊チラシの裏 (Sep 14-20, 2020)

自分にとってのニュースは自らまとめるしかないと思い至ったので興味深かったものをまとめる。Moment.js 開発終了JavaScript における日時処理の定番であった Moment.js の開発がメンテナンスモードへの移行を宣言した。歴史のあるライブラリであり、オブジェクトが可変で flux アーキテクチャと相性が悪いとか、自前の国際化リソースが全部バンドルされているので昨今の Dead Code Elimination (a.k.a. Tree-Shaking) を伴うバンドラでもサイズが縮まらないといった問題が指摘されていた。 互換性を保ったまま問題を解決できる見込みがなく、非互換な新バージョンをリリースして移行の混乱を生むよりは設計段階で問題を解決している別ライブラリに移行せよとのこと。参考に個人的な見解を述べると、代替候補として挙げられている dayjs はお勧めしない。タイムゾーンのサポートなど多くの場合に必要な機能がプラグインで実現されており、それらプラグインは dayjs オブジェクトにメソッドを実行時に追加したり差し替えたりするので TypeScript や flow の型定義と一致しなくなるためである。結局利用するプラグインを適用したバージョンの型定義ファイルを自分で作る羽目になるのだ。dayjs に限らず TypeScript や flow はプラグイン機構を持った JavaScript ライブラリと相性が悪いので、オールインワンなモジュールを採用する方が良い。代替候補の中では最初に挙がっている Luxon が無難である。20年来の銀英伝ファンからみた今回の揉め事「銀河英雄伝説」という古いスペースオペラ小説を原作とするアニメについて以下のツイートが炎上した件: 銀河英雄伝説のリメイク。3期以降も続くのかな。もしそうなら、男女役割分業の描き方は変更せざるをえない気がする。旧アニメのままだと、さすがに時代にそぐわない。作品として大変に面白いのは踏まえたうえで。…なんてことを書いたら炎上するかな。 — Shotaro TSUDA (@brighthelmer) September 11, 2020どう読んでもただの感想だが、話題がジェンダーかつ発言者の津田正太郎教授の所属が「社会学部」ということで表現の自由戦士の標的にされたもの。「社会学者1が『…

多分週刊チラシの裏 (Sep 21-27, 2020)

Killed by MozillaMozilla がディスコンにした製品およびサービスのリスト。COVID-19 パンデミックで収入が激減し全社の四分の一にあたる従業員の解雇と収益を得られる製品への集中に踏み切った Mozilla Corp. の最初の犠牲はノートアプリ Firefox Notes とファイル送信サービス Firefox Send となった。過去には第三のモバイル OS を目指した Firefox OS とか Mac ネイティブな Gecko ベースブラウザ Camino など懐かしい名前も見られる。ちなみに元ネタは Google が終了したサービスをリストしている Killed by Google で、こちらは 2020 年 9 月 26 日現在 205 個の製品とサービスが挙がっている。Firefox 81.0 リリースノートMozilla Firefox 81.0 が Release チャンネルに公開された。最大の新機能はメディア再生のキーボードないしヘッドセットからの制御である。要はバックグランドで再生している YouTube タブを AirPods から一時停止できるようになった。Developer Tools における色覚異常シミュレーションの改善やブラウザ標準 audio/video 要素のアクセシビリティ改善なども含まれている。Facebook が自社プラットフォーム上での複数国による組織的政治工作を認識しながら放置していたFacebook が大量の偽アカウントを動員した政治工作を認識していながら、特に小国のそれに対して対策を放棄していたという内部告発。元 Facebook のデータ科学者である Sophie Zhang 氏の告発によれば、ホンジュラスで大統領派の工作が行われていることを氏が報告してから実際に対策が為されるまでに 9 ヶ月、アゼルバイジャンでの与党の工作を同様に報告してから組織的な調査が始まるまでに実に 1 年を要したという。本来この手の濫用に対応するはずの専任チームは濫用の圧倒的な割合を占めるスパム対応にかかりきりで、政治工作については対象が合衆国か西欧である場合を除いて積極的に行動せず、小国の民主主義は Zhang 氏の空き時間を利用した片手間の対応にかかっていたとのこと。Rust じゃダメな理由近年人気が出てい…