このエントリは「Processing Advent Calendar 2020」14日目の記事になります。
…えーと、本題の「p5.js」の話にたどり着くまでが長くなりそうなので、先にサマリだけまとめておきます。
- JavaScriptでJupyter Notebookのようなことができる「Observable」というWebサービスがあります。
- Observableでは、p5.jsのスケッチを動かしたり、共有したり、公開したりできます。
- 既にp5.js用のテンプレートを作られていた方がいたので、forkでちょっとだけ内容を変えて、いくつかスケッチを書いてみました。
- 少しクセがありますが、特に「学習」「教育」のような用途では、Observableでp5.jsを動かすという選択肢もアリだと思いました。
もしご興味を持って頂けそうでしたら、続きをどうぞ。
ことの経緯
僕は普段、企業ITについての原稿を書くことを主な仕事にしているのですが、特にここ1～2年で「AIのビジネス活用～」とか「企業のデジタルトランスフォーメーションにおけるデータサイエンティストの役割～」みたいなテーマの仕事を請けることが増えてきました。
そのテーマに関連した取材の中で「やっぱ、今どきのデータサイエンス系エンジニアは、PythonでJupyter Notebookっしょ！」みたいな話を聞くことが何回かあり、「Jupyter Notebookってそんなにええんか？」と気になっていました（僕自身はエンジニアではなく、単なるライターなので、技術の詳細や現場のトレンドなんかについては、聞き伝てで雰囲気を察することしかできません）。
ちょっと調べてみたところ、「Jupyter Notebook」は「Project Jupyter」というオープンソースプロジェクトの一部であり、既に日本語の情報もネットで多く発信されていることがわかりました。僕もひとまず「初心者にオススメ」とされている「Anaconda Navigator」のIndividual Editionをインストールして、Jupyter Notebookをかる～くいじってみたりしていました。
●Anaconda | Individual Edition
「Jupyter Notebook」とは何ぞや？
「Jupyter Notebook」は、簡単に言うと「Pythonをはじめとする、さまざまなプログラミング言語のインタラクティブな実行環境を含むドキュメントを作成、共有できるソフトウェア」です……って、全然簡単じゃないな。
Jupyter Notebookのような環境をひと言で表す言い方って、あるんですかね？ プログラマー系の人に対してならば「出力の相互参照が可能なREPL環境＋Wiki」みたいな表現で、イメージを伝えられそうなのですが、そうでない人に伝えようとするとかなり難しい……。
詳しい方には怒られるのを承知で、雰囲気で言ってしまうと「Excelみたいなシートのセルに小さなプログラムが書けて、それぞれのセルの内容を互いに参照して計算ができたり、どこかのセルの内容を書き換えるとそれがすぐに計算結果に反映できたりする。セルにはプログラム以外に、テキストなども入れられ、『ここはどういう意図の処理か』とか『結果をどう考察したか』みたいなノートを、プログラムと一緒にドキュメント化して、共有したり、保存したりしておけるソフト」という感じでしょうか。うーん、ダメだな。まぁ、本題とはあまり関係ない部分なので、諦めて先に進みます。
Jupyter Notebookで使う言語としては「Python」がメジャーなのですが、それ以外にも「Julia」や「R」、さらに有志のコミュニティにより多数のカーネル（Jupyterで特定の言語を使えるようにするためのコア機能）が開発されています。
僕も最初のうちは、勉強がてらPythonで試していたのですが、そのうち「JavaScriptで使えれば、もっと便利なのに」と思い始めます。Jupyter NotebookのJavaScriptカーネルとしては「Ijavascript」というのがあり、node.jsの環境にインストールすることで、Jupyter Notebook上でJavaScriptを使うことができるようになります。
↑ Ijavascriptを入れたJupyter Notebook
ここまでくると、p5erとしては「JavaScriptが使えるんだったら、p5.jsのスケッチもJupyter Notebookで動かせるんじゃね？」と思ってしまうのは当然の帰結。ただ、技術的な知識とスキルが足りない僕には、この先の進め方が分かりません。2～3日ほど英語のドキュメントなども読みながら悪戦苦闘してみたのですが、結局うまくいかず、一度は諦めることにします。
JSでJupyterライクなことができる「Observable」に出会う
「Jupyter Notebookでp5.jsのスケッチを動かす」ことをいったん諦めたあとも、気が向いた時にいろいろ調べていたのですが、ある日たまたま、JavaScriptをベースにJupyterライクなノート環境を使えるWebサービス「Observable」を見つけます。
このサービス、SVGでデータビジュアライゼーションができるJavaScriptライブラリとして著名な「D3.js」の開発者であるMike Bostock氏がファウンダーとなっています。Observableでは、主にD3.jsによるデータビジュアライゼーションを、Jupyter風のユーザーインターフェースで行い、公開したり、チームで共有したりできるようになっています。
Observableは、個人ユーザーであれば無料で利用できます。特定のチーム内でノートを共有したい場合には、ノートを作成、編集するユーザーにのみ、9ドル／月（年間契約時）の課金が必要です（※2022/11/25追記：現在はプライシングが変わり、無料版では公開ノートのみ作成できるようです。有料プランは12ドル／月からになっています）。
Observableには、大変豊富なチュートリアルコンテンツがあるので、順に読んでいけば、できることが大体分かります。ただ、基本は英語なので、時間がないという場合には、とりあえず以下のものだけでも目を通してみて下さい。日本語のリソースはまだ少ないようですが、チュートリアルを日本語化してくださっているノートもあり、使い始めるにあたって非常に参考になります。
●Tutorial (日本語) / shimizu / Observable
●Five-Minute Introduction / Observable
●Observable’s not JavaScript / Observable
日本語である程度まとまった情報を読みたいという方には、Amazonで売られているこちらのKindle書籍も良いと思います。こちら、今年の技術書典で販売予定だったものだそうです。前半にObservableの使い方、後半にObservable＋D3.jsによるデータビジュアライゼーションの実践例についてまとめられています。
●ばぶでもわかるおぶざばぶる: D3.jsとObservableではじめるデータビジュアライゼーション（Amazon）
先ほど、「Observableは、主にD3.jsによるデータビジュアライゼーションに使える」と書いたのですが、実はD3.jsに限らず、npmで公開されているJavaScriptライブラリをインポートして、ノート内で使うことができる仕組みがあります。つまり、p5.jsもインポートできてしまうのです。
Observableでp5.jsのスケッチを動かす（ようやく）
少し調べてみたら、既に「Observableでp5.jsを動かすためのテンプレート」を公開して下さっている方がいました。
●p5.js sketch on Observable: Template / Jeremy Douglass / Observable
こちらをforkした上で、ちょっと書き換えて、いくつかスケッチを作ってみました。
●p5.jsをObservableで動かすテンプレート / kashibat / Observable
●Mandelbrot set w/p5.js / kashibat / Observable
●p5.jsでダミーデータをプロット / kashibat / Observable
そうそう、これよ！ こういうのがやりたかったのよ！
Observableでp5.jsするときに知っておいたほうがいいこと
過去に作ったいくつかのスケッチを、Observableで動くように書き換えていて感じたことがあります。これらは主に、Observable自体のアーキテクチャに関連するものです。
・原則として「インスタンスモード」で書く必要がある
公式の「p5.js Web Editor」や「OpenProcessing」などでスケッチを公開する場合、基本的には「グローバルモード」でコードを書いている人が大半だと思います。Observableのノートにスケッチを入れる場合は、原則として「インスタンスモード」で書くことになりますので、その点で若干敷居が高く感じられるかもしれません。
●Global and instance mode · processing/p5.js Wiki
普段グローバルモードでしか書いていない人でも、もしスケッチの中で「createGraphics」を使った経験があれば、インスタンスモードに書き換えるのは比較的簡単だと思います。createGraphicsで作ったインスタンスにp5.jsのAPIで描画なり、操作なりをしたいときに「インスタンス名.rect(x, y, w, h);」のような感じで書いていたと思いますが、アレを本体でもやるだけのことですので。
・「関数型」の作法がある程度分からないと先々詰みそう
前の項でサンプルとしてあげたような極めてシンプルなスケッチであれば、単純にインスタンスモードで書いていけば動かせるのですが、Observable上のp5.jsで少し複雑なことをしたいと思い始めると、いわゆる「関数型プログラミング」の作法が分かっていないと、早々に詰んでしまうケースが多そうです。
たとえば、Observableの素のセルでは「class」を使ったオブジェクトの定義ができません（これは「Observableではclassが使えない」という意味ではなく、例えば、p5.jsのスケッチ本体を書いたセル内に、ブロックとしてclass定義とインスタンス生成を行う文を含めてしまうような書き方をすれば、動くことは動きます）。複数のセルが互いに参照しあって一意の出力を得るというObservableのアーキテクチャを生かそうと思うと、いわゆる「オブジェクト指向型」の書き方は相性が悪いようです。（あと、promiseとかasync/awaitとかyieldとかgeneratorとかの「非同期処理」に関する知識があると有利そう）
上記のようなクセがあるものの、Observableには
・対話型のJavaScript実行環境として使いやすいUI
・「データ」「ロジック」「出力」の全要素を、注釈的なテキストと一緒にまとめ、保存や公開ができる
・セル単位で閲覧者が「コメント」をつけられる機能がある
というユニークな特長もあり、特にJavaScriptやp5.jsの学習、教育といった場面では使いどころがあるのではないかと思います。
あと、既にある程度p5.jsが使える人なら、あえてこれから、かなり作法の異なるD3.jsの使い方を一から覚えずとも、既存のスキルでデータビジュアライゼーションに入門できてしまうというのも、Observableのフトコロが深いところです。
もっと言えば、p5.js、D3.js以外のライブラリも取り込めてしまうので、あえて「データビジュアライゼーション」にこだわらず、Observableを「クリエイティブコーディング」のプラットフォームとして捉えることもできそうです。実際に、こんなノートを公開されている方がいらっしゃいました。
●Observable & creative coding – Lionel Radisson
このノートを見ると、工夫とスキル次第で、いろいろと面白い使い方ができそうで、ワクワクしますね。僕も、Observableについては、引き続きいろいろ試してみたいと思っています。
そんなわけで「Processing Advent Calendar 2020」は、まだまだ続きます。みなさま、良い年末年始をお過ごしください。
JSでJupyterぽいことができる「Observable」でp5.jsを使う はコメントを受け付けていません