UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. Asteroidについて
    00:44
  • 2. JSXのライブコーディングを実現する方法
    06:10
  • 3. MDX(Markdown + JSX)
    16:52
  • 4. 今後やりたいこと
    31:31
  • 5. クロージング
    36:01

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

2020/06/05
380 views
HANATANI Takuma 緑豆はるさめ

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を提供したい
  • 編集内容を共有できると楽しいかも
10秒前へ 10秒次へ