Jupyter Notebookのようなもの（あくまで個人の感想です）をメモ帳・ブラウザ・gitで実現する

> [アプリをインストールせずに、オフラインでMarkdownをhtmlに変換してみる](https://qiita.com/shellyln/items/8d6b619c458c1770d18d)

前回、 上記記事を書きましたが、これを発展させて [Jupyter Notebook](http://jupyter.org/) のような、プログラムを実行しながら可視化してノートを書けるものを作りました。

* [Ménneu Markdown Notebook](https://github.com/shellyln/menneu-md-notebook)

リポジトリからhtmlとjsファイルをダウンロードしてローカルで実行する形式ですが、デモサイトを以下に用意しています。
すぐに確認したい方はどうぞ。
サイト内のドロップダウンリストから「JS Notebook (Markdown)」を選択して、「👀View」ボタンをクリックしてください。
https://shellyln.github.io/menneu/playground.html

> ※デモサイトでは、ユーザー入力のJavaScriptは実行されないようになっています。


# 実行イメージ
![Untitled1.png](https://qiita-image-store.s3.amazonaws.com/0/185253/594da364-866e-28ca-2e48-4f1ef414ab25.png)
![Untitled2.png](https://qiita-image-store.s3.amazonaws.com/0/185253/587bb399-d1d0-4b1a-b167-f51bf40070e0.png)
(中略)
![Untitled3.png](https://qiita-image-store.s3.amazonaws.com/0/185253/4c144364-8846-0ef1-8a25-6886c835c2a9.png)
![Untitled4.png](https://qiita-image-store.s3.amazonaws.com/0/185253/b402c23c-a472-e518-a9aa-b8243f00b91f.png)

# 編集イメージ
タイトルにメモ帳と書きましたが、流石に見辛いので[Mery](https://www.haijin-boys.com/software/mery)を使用しました。
~~（メモ帳でも無理ではないです、知らんけど）~~


#### 記法について
基本はマークダウンですが、`%%%( ... )`でLispのスクリプトを展開します。
また、Lispのスクリプト内では、[LSX](https://github.com/shellyln/liyad#what-is-lsx)の記法により、DOMツリーが表現できます。
LSXの名前からお察しかもしれませんが、これはJSXの代替記法となっており、標準のhtmlタグ以外に、コンポーネントを処理できます。
下のイメージ内の`Math`、`Chart`、`Notebook`、`Js`、`Lisp`がコンポーネントです。

* **注意**: LSXが有効なのは `%%%( ... )` のブロック内です。  
  コードブロックのLisp（`%%%(Notebook """Lisp ... """)`）では利用できません。

![Untitled5.png](https://qiita-image-store.s3.amazonaws.com/0/185253/7c8b7782-e34d-43e0-00c2-816aa5a5c320.png)
![Untitled6.png](https://qiita-image-store.s3.amazonaws.com/0/185253/41dd5ba8-3be6-a93e-d06b-a356f02aaa06.png)
> ※ 実物のコードはリポジトリ、またはデモサイトから参照ください。

マークダウンのコードブロックを`Js`・`Lisp`で囲むことで、コードを実行したうえでhtml化します。

```md
%%%(Notebook """Js@{(module "foo")}
```javascript
const x = 12345;

module.exports = function() {
    return x;
}

return x;
&#96;&#96;&#96;   <--- バッククォート × 3 です。
""")
```

上記のコードブロックは、`Js`の属性として `module: "foo"` が渡されています。
このブロックで、`CommonJS`形式でエクスポートした値・関数などは、他のブロックから `require('foo')` でインポートできます。
`Lisp`ブロックでも同様にインポート・エクスポートの記述ができます。
さらに JavaScript間、Lisp間だけでなく、両者の間で相互のインポート・エクスポートが可能です。

エクスポートされた値は、コードブロック外のLispコードでも`require`が可能となっています。
この機能を使用して、コードブロック内の結果を表やグラフとして可視化しています。

# 保存

gitリポジトリにコミットすれば、履歴管理も完璧です。

# 長所

* ダウンロードして、メモ帳で開くだけなので編集が手軽。
* 所詮テキストでしかないので、コピペが楽。

# 欠点

* 所詮テキストでしかないので、実行結果をキャッシュしておけない。  
  htmlを開くたびに再計算されるので、もし、非常に長時間掛かる処理があると無理がある。
* 可視化の方法が、今のところ[Chart.js](https://www.chartjs.org/)のグラフとMarkdown・htmlの表しかない。
* コードブロック内のコードはデバッグできない。


# 追記 (20118/10/7)
各Markdownエディタの `lisp` ハイライト対応があまりに酷いので、 コードブロックの言語に `js` と書くことができるようにしました。
VSCodeではなぜか、割ときれいにハイライトされます。(Bracketsではいまいち)
混乱するのでお勧めはしません。

```md

%%%(Notebook """Lisp@{(module "boo")}
```js                          <--- Lispのブロックですが、ここに「lisp」ではなく「js」と書けます
($concat "abc" "def")

($defun fac (n)
    ($if (== n 0)
        1
        (* n ($self (- n 1))) ) )

($defun multipy (x y)
    (* x y) )

(multipy 4 (fac 3))
&#96;&#96;&#96;                <--- バッククォート × 3 です。
""")

```


# CDNから利用できるようになりました (2018/10/16更新)
以下のhtmlでリポジトリからファイルをダウンロードせずにお試しできます。

```html:Notebook.html
<!DOCTYPE html><head><meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.0"></script>
</head><body><script type="text/markdown">

# JS Notebook

%%%(script (@ (src "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML") (crossorigin "anonymous") (async)))
</script>
<script src="https://cdn.jsdelivr.net/npm/menneu-md-notebook@0.0.2/articles/js/notebook.js"></script>
<script src="https://cdn.jsdelivr.net/npm/menneu-md-notebook@0.0.2/articles/js/menneu.min.js" onload="start({title: 'My Notebook 1'})"></script>
</body>
```