jupyter notebook like な javascript online editor / Observable を試してみた。

jupyter notebook like な javascript online editor / Observable を試してみた。:

どういったものか

jupyter notebook のように、特定の行までを実行し状態を持っておくことが出来るので、重い処理をあらかじめ実行しておくことで、その先の処理のみにマシンパワーを集中させることが出来ます。

セルコーディングと言われているみたいですね。

トライ＆エラーでコードをガシガシ書きたい人に打ってつけのツールです。

本家サイト - https://beta.observablehq.com

Five-Minute Introduction - https://beta.observablehq.com/@mbostock/five-minute-introduction

ツール一覧

Observable 製の 個人的に好きなツールです。

• Package Dependencies - https://beta.observablehq.com/@mbostock/package-dependencies
  
  
  • npm module 名を入力すると、その依存ツール一覧が描画されます。
• Visualise Tensorflow.js Model Topology - https://beta.observablehq.com/@aman-tiwari/visualise-tensorflow-js-model-topology
  
  
  • tensorflow.js 向けモデルのURLを入力すると、そのグラフが描画されます。

各種リンク

Observable を始めるにあたって、見ておくと便利そうなリンクを張っておきます。

• Tutorial - https://beta.observablehq.com/collection/@observablehq/tutorial
  
  
  • ページ右下の?ボタンからこのページに飛べます。簡単なツール作成の紹介がされています。
• Inputs - https://beta.observablehq.com/@jashkenas/inputs
  
  
  • Observable では他の作者さんの部品をimportすることが出来ます。便利な入力フォームで、作成者はJashkenasさん！僕が尊敬するエンジニアの一人です！

どういったものに使えるか

ざっくり以下のケースで有用そうです。

• マークダウンを利用しての対話性のあるドキュメント作成
• 簡単なインタラクションを持つWebツール作成
• 重い処理を伴うもの、機械学習など

自分はまずはシンプルにtensorflow.jsを動かしてみました。
https://beta.observablehq.com/@ampcpmgp/tensorflow-js-fit-sample

jsのリロードが無い分ほんと快適です。

おわりに

お試しあれ！