iodide使ってみた

最近iodideというのを見つけたので少し使ってみた。

iodide

javascriptのjupyter notebookみたいなやつで、まだアルファ版。
似たようなサービスにObservableがあるが、Observableはjavascriptのみなのに対し、iodideは多言語対応を進めている点が異なる。

作者のブログにあるように、iodideはデータサイエンティストがレポーティングをする際、分析に使っているJupyter notebookやR-Studioを離れてpdf等の別媒体へアウトプットしなければならない点を解消する目的で始まったプロジェクトであるため、アルファ版である現時点でもpythonのデータ分析関連ライブラリ（numpyやpandas、scikit-learn、matplotlibなど）であればそこそこ動作する。 pythonの実装はpyodideといい、webassemblyを使ってブラウザでpythonが動くようにしたものとのこと。

iodideの特徴

JSMDというフォーマットのテキストを記載していくと、右上のウィンドウにHTMLが出来上がる。
javascript/pythonのコード、マークダウン、CSS、raw（HTMLに反映されないメモ書き）が書けるほか、web上のデータをURL指定で取得するfetch、js/python以外の言語用pluginを呼び出すpluginといった種類のセルを作れる。

トップページのサンプルノートを見るのが早い。

pyodideの特徴

• pythonの各種ライブラリを使う（サポートされているライブラリ）
• jsと同様の文法でDOM構築する

といったようなことができる。

from js import documentとすることでjsのdocument.getElementByIdみたいなことが一通りできるし、イベント関数にはdef some_event(evt):とかで定義したpythonの関数をそのまま入れられるので、ちょっとしたUI付きのドキュメントを作りたい場合は便利。

pyodideの簡単なサンプルノートも紹介されている。

UIが複雑ならjsで書いたほうがよさそう。その場合にはjsとpython間でデータやり取りが必要で、以下のようにやる。

js → py
from js import <param name>

py → js
var param = pyodide.pyimport("<param name>");

デバッグにあたってはjs同様、DeveloperToolsを開いてConsole出力を確認する。
pythonでprint関数を使うとconsoleに出力されることは確認した。

なお、右下のConsoleウィンドウに表示されるのはセル最終行のevalの結果のようで、標準出力ではないので注意。基本的にDeveloperToolsを使ったほうがよさそう。

セル実行時の標準エラー出力についてはConsoleウィンドウにもDevToolsの方にも出力されるが、HTMLのbuttonに付けたイベントの中で起きたエラーはDevToolsにしか出力されない点も注意。

このあたりは今後のアップデートで改善されていくと思う。

つくってみた：iris predictor

例によってiris分類をアプリにしてみた。

iris predictor

HTMLのテキストボックスに推論したい値を入力し、predictボタンを押すとscikit-learnのSVMで分類し、結果をHTMLに反映する。

試すときは、各ユーザがノートを開いたあとにブラウザ上で全セル実行する必要があるが、pythonのデータ分析部分の実装とjsによる可視化やUIの実装が1つのまとまったファイル（JSMD）でカジュアルに閲覧、実行できるというのは面白い体験だなと思った。

なお、どうやらpyodideにおけるscipyのimportにはかなり時間がかかっている。（自分の環境で、パッケージファイルのダウンロードに3.6minかかっていた。） scipyのパッケージサイズがバカでかい（60MB以上）のが原因のようだ。ローカル実行ならではの問題点かな。今後の改善に期待。

ちなみに：ReactやVueを動かす

意味があるかどうかはケースバイケースだけど、その気になればReactやVueも動く。
ともにfetchセルでjsファイルを呼び出して使う形になる。

    %% fetch
    
    // Vueの場合
    js: //cdn.jsdelivr.net/npm/vue/dist/vue.js
    
    // Reactの場合
    js: //unpkg.com/react@16/umd/react.development.js
    js: //unpkg.com/react-dom@16/umd/react-dom.development.js

ノートは、Vueならこんな感じ。
ただしVueの場合、Vue側のコードを修正した後は、一度マークダウンの方にも何らかの更新をかけてから改めてVueのコードを実行しないと反映されない。

Reactの場合も同じイメージだけど、やはりJSXを使いたくなるところ。 JSXはそのままでは使えないので、ドキュメントにあるように、pluginでjsxを有効にする。
ノートはこんな感じ。

おわりに

現時点では「使える」というより「興味深い」という段階だが、今後のアップデートによっては新しい種類のツールになる可能性を感じた。
今後もウォッチしていきたい。