◆ 複数セルで REPL 実行できるものを作った
◆ 補完もないし eval でできることに限られる
◆ JavaScript なら基本は devtools でいいと思う

Jupyter Notebook

Python のツールですが Jupyter Notebook というのがあります
エディタや IDE 系なのですが 一般的なそれらとはまたちょっと違った感じのツールです
イメージは REPL や devtools のコンソールを便利にしたようなものです

セルが並んでいて セルにコードを書いて実行できます
実行結果はセルのアウトプットとして表示されます
1 つのセルだけを使っていたら REPL と変わりません

大きな違いは セルを複数用意できて セルの状態を保存できる部分です
試しに動かしてみるだけの REPL とは違ってそれがそのまま何かを行うプログラムとして使えます

思った以上に使いやすかった

Python を書くエディタは VSCode しかなかったのですが なぜか VSCode で Python の Extension を入れるとメモリが無限に使われて しばらくすると 10GB を超えて物理メモリが足りなくなってきた頃に PC 全体が重くなったりします
Extension をオフにしてるとあまり使い勝手がよくないので Jupyter Notebook を使っていたのですが 思いの外便利でした
プラグインを入れたら補完もできますし 実際に実行した結果に応じて候補が出るので ブラウザの devtools で JavaScript を書いてるくらいの快適さです

JavaScript だと devtools があるので割と快適なのですが 他の言語って shell 上で REPL モードとして実行するのが基本です
それだと GUI 操作に比べていろいろ不便です
それまでは Python を実行してどうなるか確認するために python コマンドを使って REPL として使っていたので GUI で使えるのがすごく便利です

マルチセル

単に GUI になったり補完できるなら JavaScript を devtools で実行するのと似たようなものです
個人的に devtools より良かったと感じる部分はセルが複数あるところです
コードを入力中に 別のコード実行してみたいなと思うことはよくあります

shell 上だと別の shell で REPL 起動してそっちでやるか 今入力中のコードを Ctrl-C でキャンセルして先に試したいコードを実行してから また前のコードを打ち直します
別の shell だと入力中のはそのままでいいので楽ですが 状態が共有されないので今ある変数は使えません
キャンセルする場合は全体をクリップボードに保存するためにマウスで選択してコピーという作業が必要です

devtools だと 別のタブで devtools を開くか Ctrl-A > Ctrl-X で入力中のを切り取ってから 試した後に貼り付けて続きから入力します
shell の REPL よりはかなり楽になっていますが それでもこれがけっこう面倒です
Jupyter Notebook ではすぐ下にセルがあるのでそっちで実行してそのコードや結果を見ながらコードを書けます

ログを残しておきたいならセルを残しておいて 見終わっていらなければ上書きできるので コンソールのように全部のログが残って探してるのが見つけづらいこともほぼありません

再実行

また カーネルの再起動を行えば Python の変数など実行状態をクリアして再実行できます
コンソールだとリロードや再起動した後に「↑」キーを押して履歴探す必要があったり 順番に実行し直すのが不便です
それが Jupyter Notebook だとセルで管理されているので簡単にできます

コードを無理やり 1 行で書いてしまえない Python は特に REPL で再実行が手間だったので助かる機能です

セルの種類

セルにはコードとマークダウンの 2 種類があって マークダウン形式で見やすく説明を書けます
コード中のコメント機能で十分に思ってましたが Notebook というだけあってキレイにノートぽくまとめてる Jupyter Notebook のファイルもあって そういう使い方もありかなと思いました
物によってはドキュメントがマークダウンじゃなくて Jupyter Notebook のファイルというものもあります
Github でもマークダウンのように Jupyter Notebook のファイルもプレビュー表示されます

その他

他にも機能はいろいろあるようですが 使ってるのはこれくらいです

Jupyter Notebook の後継で Jupyter Lab というのもありますが こっちはもっと IDE のような見た目です
個人的にはセルが並んでるだけのシンプルな Jupyter Notebook の見た目が好きなので Lab の方は使わずずっと Notebook 使ってます

JavaScript を Jupyter Notebook 風に動かす

PHP とか JavaScript など他の言語も Jupyter Notebook で動かせたらいいのに と思ったのですが 見た感じ Python しかないようです
機能的に Python の compile / exec みたいな機能が言語に必要だったり Python ならではと思うところもいくつかありましたし 他の言語は難しいのかもしれません

ブラウザ JavaScript で自分が必要そうな機能だけなら作れそうだったので 勢いで作ってみました

jsnote DEMO
Gist

jsnote

セルを複数作れて それぞれまたはまとめて実行できます
Kernel の再起動で状態をリセットできます

iframe Kernel

Kernel にあたる実行空間は iframe でできてます
「再起動 = iframe を別の iframe に差し替え」 です
iframe 上の実行は同期的におこなわれるので while(true); みたいな無限ループを書くとフリーズします
止めることもできません
worker も考えたのですが やりたいことってだいたい DOM の操作になるので DOM が使えない worker 空間で実行してもあまり価値がないかなと思って iframe にしてます

eval

実行は iframe の window の eval を呼び出すだけです
eval の特性上最後に評価したものが返り値として取得できます

制限を受ける部分もあって const や let で宣言しても意味がありません
別セルじゃなく同じセルの次の文でも参照できません
Python や PHP 風に宣言なしで直接変数に代入する必要があります

print

console.log はコンソールに表示されるので出力は見れません
最後に評価したものはアウトプットとして出力できますが その他に print 機能はありません

補完

もちろん補完もありません
ただの textarea です
textarea を monaco にすれば JavaScript として補完はされますが すでに実行した結果を元に補完はできません
補完のために eval を使って Object.keys でプロパティリストを取得するなど いろいろ頑張ればある程度できそうですが そこまでする必要があるとも思わなかったので補完機能はなしです

使いみちは

いろいろ制限も多いので devtools と比べるとセルが複数ある 以上にメリットはないです
Jupyter Notebook の機能ってわりと単純なもので 基本機能は簡単に作れそうと思ってましたが 作ってみると結構頑張ってる部分もあるんだなーと思いました