C++で書いたクラスをemscriptenを経由してVue.jsで利用する

この記事は @janus_wel さんの emscripten でドメイン層に型と速度を持ち込む に触発されたロマンを感じた筆者が、C++で書かれたクラスをemscriptenを通してVue.jsにバインドしてみた記事です。「なぜそもそもそんなこと面倒なことを？」と思われた方がいたら、元記事の「コンセプト」や「経緯」の部分を読んでもらえればと思います。「要するにロマンです」です。

概要

リポジトリ: edwardkenfox/vue-emscripten-todo
デモ: vue-emscripten-todo

• TodoクラスはC++で実装
  • 最近趣味でC++触り始めていたので自分で書いても良かったんですが、Todo.cppやビルド用のスクリプトは元の実装を拝借しました
• AppコンポーネントおよびTodoコンポーネントをVueで実装
  • Appコンポーネント（コンテナ）は複数のTodoコンポーネントを持つ
    
  • Todoコンポーネント（Vue）はTodoクラス（C++だったやつ）のインスタンスを持ち、Todoのドメイン知識はTodoクラスのインスタンスが管理する

ややこしいですね。でもロマンがあるからいいんです。

課題

TodoオブジェクトをVue.jsから利用する際に、Todoクラスが持ってるプロパティがリアクティブにならない（！）

• emscriptenを通して出力されたTodo.jsファイルの中身を見ていないのでなんとも言えないですが、Change Detection Caveats に書かれている内容に該当するんじゃないかと推測
• this.$set(todo, 'isDone', Boolean)もうまくいかず

まとめ

• C++で書いたクラスのプロパティがリアクティブにならない点は要調査
  • これが出来ないとそもとも全く使いものにならないｗ

• emscriptenやWebAssemblyなどの技術は、ブラウザゲームや3Dレンダリングが主な目的として利用されるだろうと想定していましたが、こういう感じでカジュアルに取り込むことができるなら、Webアプリケーションが利用することも出来なくはない、という印象でした

  • とはいえ、1KBのcppファイルが500KBのjsファイルになる時点で全然カジュアルではない

  ​