ep.48 UIT 俺得フロントエンド - Jupyter NotebookライクなJavaScriptライブエディタ『Asteroid』

  • HANATANI Takuma(@potato4d)
  • spring-raining
2020/06/05 に公開976 views

このエピソードについて

Asteroidについて

https://asteroid.spring-raining.now.sh

  • 元々自分用にPaper.js勉強用のライブエディタを作ろうとしたが、様々なライブラリを読み込んでより一般的な形で使えるように
  • Jupyter NotebookのJavaScript版のようなWebアプリケーション
    • JavaScriptのスニペットとMarkdownを混在して入力することができる
    • 入力したJavaScriptは即座に結果が反映される

JSXのライブコーディングを実現する方法

  • react-liveというライブラリを参考に、ライブコーディング機能を用意
    • AsyncFunction のconstructorにより、文字列から実行関数を動的に生成
    • bubleという軽量なトランスパイラでJSXに対応
  • ブラウザのES Modulesのimport機能を使って、ESMに対応したライブラリなどを実行時に読み込む機能を追加

MDX(Markdown + JSX)

  • 編集内容の保存やエクスポートのフォーマットとしてMDXを採用
    • ipynbはJSON形式で手書きには向かないため、あとから人間が編集できるようなフォーマットがよい
  • MDXのアイディア自体はシンプルだが、意外と応用できる点が多い
    • Storybookはとても相性が良さそう
    • むしろJSXは使わなくてもMarkdownのloaderとして利用可能
  • 実装にRemarkを採用しているのでparser側の拡張性はかなりあるが、最終的に出力されるJSをカスタマイズすることが少し大変
  • どうしても出力先で利用される想定ライブラリがReactに偏っているので、Vue利用時はドキュメントがまだ少ない

今後やりたいこと

  • ドキュメントやExamplesを整備してちゃんとリリースしたい
  • Asteroidの出力したMDXをスタンドアロンで埋め込み可能なloaderを提供したい
  • 編集内容を共有できると楽しいかも

採用について

使用素材・クレジット

© Presented by UIT