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

2020/06/05 に公開1125 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を提供したい
編集内容を共有できると楽しいかも

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちは

Guest 00:01
こんにちは

Guest 00:03
え。UIT INSIDEは、ユーザーインターフェースとテクノロジー愛する開発のためのえ、ポントキャストとなっております。

Guest 00:10
最新のえウェブ標準の動向や、えー開発フレームワークの変遷、

Guest 00:15
あと、またゆやxに関することまでフロントエンドに関するえ、最新の情報をですねえ、キャッチアップえしていくことを目的としております。

Guest 00:24
こからですね、私はたとあと春さんとともにですね。

Guest 00:29
javascriptで、実現する。jpiternatbooklipなえー。環境でのastroidっていうものをはるさんさんが開発したので、そこについて話を聞いていければなと思っております。

Guest 00:40
えはめさんよろしくお願いします

Guest 00:42
よろしくお願いします

2. Asteroidについて 00:44

Guest 00:45
というわけでですね。今日はステロイドの話というえーものをえ行っていくわけですけれども、

Guest 00:51
今回ですね。えはるさんが、これはゴールデンウィークの今まで、公開してた自由研究の一環でもあった感じですかね。

Guest 01:00
で、jpiternotebooklikな。javascriptのノートの実行環境を含めたノートのアプリケーションみたいなのも

Guest 01:08
作って、それをアステロイドという命名で今公開してるってことなので、

Guest 01:12
聞いていきたいなと思うんですけど。はい、まず、簡単にアステロイドについて紹介してもらってもよろしいでしょうか。

Guest 01:19
あ、はい、アステライドついてなんですけども、あの、元々私、あの、そのゴールデンウィークのま

Guest 01:28
作業として、あの、paperjasというライブやりがありましてま、それを勉強しようと思っていて、その勉強のための

Guest 01:38
アプリケーションを作ろうと思ったんですね。ただ、結構あの作っていくうちに、なんか、こう1つのライブライの勉強のために、

Guest 01:47
なんか用意するのがもったいなくなってしまいまして。

Guest 01:50
まあ、最終的になんかバスクリフトべ全般のま勉強というか、学習用のアプリケーションみたいなのを

Guest 01:58
ま作るようになってきました。で、ま、この

Guest 02:03
どういう機能があるかっていうと、まさっきおっしゃったように。gpiternotbookの

Guest 02:09
javascript版みたいなのが、多分1番直感的な説明で、まあ、あのebサイト見てもらうと、なんかこう。行動を入力する

Guest 02:19
ブロックやマダムを入力するブロックがあって、まそれぞれなん。ブロックをこう自分で追加していってま。

Guest 02:29
マークダウンドブロックにまかいえーコードの説明とか。まあ、ドキュメントみたいなのを書いて、でまその下にこうjavaスクリフトの

Guest 02:39
ブロックを入れて、そこにサンプルコードを書くみたいな感じの学習用の

Guest 02:48
javascriptの学習用のまノートを書くようなえったアプリケーションっていうものになっています。で、

Guest 02:57
1番大きな特徴は、ジェクターノートブックだと、

Guest 03:03
なんかにえと行動書いてから実行を押すと思うんですけども、このアステロイドだと、こう入力した内容が

Guest 03:12
地区一解釈されて、右側のプレビューに表示されるっていうような形になっています。

Guest 03:20
サンドボックス環境のところで、結構気軽に行動を書きながら、メモも取れるみたいな製品

Guest 03:27
ですかね。そうですね、あのま、自分でこう試行錯誤しながらコード書いてま。その内容を後から振り返れるような

Guest 03:37
感じにしたかったので、まあ、最終的にこんな感じになったっていう感じですね。

Guest 03:44
jupiter、jupiternotbookについての紹介は、結構みんな知ってる。

Guest 03:48
ついああ、確かに

Guest 03:50
知ってますかね。なんか、あのじゃパイソンで結構有名なアプリケーションなんですけど、

Guest 03:57
あれは元々mlの人とかがよく使ってるんですかね。

Guest 04:02
なんか、あれでそうですよね。

Guest 04:04
ま、記述するまノート環境とコードの実行環境が一緒になったりた

Guest 04:10
エリターとまえ、実行環境の中間意外とジャファスクリフト。そういうのなかったなと作りながら思いましたね。

Guest 04:20
あの、ジュピターノートブックについて。私あんまり詳しくないんですけど、ジュピターノートブックって、そもそもパイソン向けのツールなんですかね。あれは、

Guest 04:29
今は結構なんて言うんすか。汎用化されていて、一応そのバックエンドとして、まだパイソン以外も

Guest 04:36
用意できたりするんですけど、まあ、元々そのパイソンの実行環境みたいなプラス。web上での

Guest 04:44
エリーターみたいな。はいはいはいま大体パイソンのま実行環境として使われることが多いです。

Guest 04:51
うん、うん、うん、うん、うん、なるほどな。

Guest 04:53
それを一旦jsベースで実現してみたみたいなところで

Guest 04:57
すかね。はい、そうですね、うん、そんな感じです。

Guest 05:00
そうですね、ショーノートの方にも実行できるサイトのリンクを貼っておくんで、ぜひぜひ見てもらえればなと思うんですけど、

Guest 05:08
左側にマークダウンが書いてあって、ジェースのコードとかを書くこともできる。これは

Guest 05:14
こうコードブロックと

Guest 05:15
ノートブロックがあって、はいはい、

Guest 05:17
ノートがノートがマークダウンはげるところって感じですね。

Guest 05:22
すごいえ、ジャワスクープトモジュールもインポートできると、ガイブパッケージも

Guest 05:27
あ、そうそうです。今回、ペーパージスの勉強っていうことだったので、ま、そういうはい。ライブのライブラリを読み受ける、読み込める機構が欲しいということで

Guest 05:37
ま、今回はラウザがまあ持っているそのesモジュールのインポート機能を使って、あれですね、

Guest 05:46
そのasmに対応したライブラリーを読み込めるような機能っていうのはい、

Guest 05:52
多いですね。なんか、こういうのって結構スクリプトタフで読める範囲はいけるけど、普通のモジュールは対応イエスモジュールとか対応してないとかよくあると思うんで、

Guest 06:01
なかなか面白いです。

Guest 06:03
そうですね、そこら辺が割とまあ、最近っぽいしようかな。最近

Guest 06:08
今きっぽい感じですね。そうですね、作られたものについては、皆さんぜひぜひ触触りながら聞いてほしいなっていう

3. JSXのライブコーディングを実現する方法 06:10

Guest 06:14
よろしくお願いします。とこ

Guest 06:15
のにして、技術的なとこ聞いていきましょうかね。

Guest 06:18
あ、はいそうさん

Guest 06:20
はい、なんか技術的なところでこんなここが面白いよとかま、こういったところ、結構こった実装したよみたいなところがあったら

Guest 06:28
聞いていきたいんですけど、なんかどういうのがあったりしますかね。

Guest 06:31
そうですね、あのま大体2つあるかなと思っていてま。前半そのま。とりあえず、その

Guest 06:41
自分の書いたコードが動けるようにするっていう、そのjavaspフトの実行環境を用意するっていうところと、あと、

Guest 06:50
それをあれですね。どうやってその

Guest 06:54
エクスポートっていうか、まあ、こうやり取り可能な形式にしようかっていうところで、ま。今回、mdxっていうフォーマットを採用した

Guest 07:03
話とかにはいがいいかなと思いますね。そこら辺が話せると思い、

Guest 07:10
じゃあ、まずえ、まずそうですね。では、このjavascriptの実行環境とか、まこのパッケージとかも使えるようにしたっていうところについて聞いていきたいんですけど、

Guest 07:20
なんか色々紹介してもらってもいいですかね。

Guest 07:23
ま、まず、そのjavascriptの実行環境、どうやって用意したかっていうところなんですけども、これは結構あの

Guest 07:30
だいぶ参考ってか、もうむしろ使ってるライブやりがありまして、リアクトライブっていうライブやりがあります。で

Guest 07:39
ま、基本的にまこれを活用したものっていう感じでまちょちょくちょくと。まあ、そのアステロイドようにま

Guest 07:48
コードつきしたっていう感じですかね。じゃあま、それがどうやって実行されてるかっていうところで言うと、

Guest 07:58
あの行動がそのまま実行されるっていうのは、まあ、ある意味。er関数みたいな内容だと思うんですけど、もい、

Guest 08:07
今回そのソースコードを解釈して実行させるために、アシンクファンクションっていう

Guest 08:17
機能を使いまして、これはあのmdnのリンクをのけておくんですけれども、あの、はい、シンクファンクション

Guest 08:26
のコンストラクターっていうのがありまして、これがはい、その、あの、いわゆるそのファンクションの

Guest 08:33
ファンクション関数のコンストラクターと同じように、こう文字列を与えてあげると、まそれ

Guest 08:39
な。ま、それを同じとして解釈したえ、実行関数が返ってくるっていうえー機能があります。

Guest 08:51
あ、そうですね、結構黒魔術っぽいですけど、割とま、今回はこれを使いました。で

Guest 08:59
ま、イバル関数と違って、まあいいところは、あのイバル関数は、その実行時のタイミングのゲームスペースの変数がぜ全部こう。

Guest 09:10
その中身のコードにバレてしまう。展開されてしまうんですけども、ま

Guest 09:17
あ、シンクファンクションだと、まあ、ウインドウとかトップレベルの。まあ、ネームスペースしか見れないので、まあ、若干

Guest 09:26
安全性があるまただ、あまりあの任意の行動実行できるようにっていうのはま、セキュリティ上よろしくはないと思うんですけど、もま

Guest 09:36
とはいえ、まあこう手軽にこう。自分の書いた文字列のjsコードが実行できるっていう

Guest 09:45
機能がまこれで提供されています。

Guest 09:48
イバルと比較すると、まあや、ある程度アクセス制限がされてるみたいな。

Guest 09:53
あ、そうですね、ははい、そうです。そうですね、まあ、なんか若干スピードも早いとは書いてあるそうなんです。ちょっと

Guest 10:01
計測まではしてないので、ま、それはまあまあ。普通に書かれてる事よりは確実に遅いとは思うんですけど。

Guest 10:10
はいはいはい

Guest 10:12
かつ。これは、エイシングファンクションって名前ってことはあれなんですかね。イバルって、いや、私イバル使わな

Guest 10:19
あ、そうですよね、うことがま

Guest 10:21
まずないない分かんないんですけど、これはイバルってそもそもひ機で使えるんですかね。

Guest 10:28
多分使えないや使うあのま使うとしても

Guest 10:36
使いたとしても多分そのなんですか。あの、非同期関数の中でイバを読んだ時しか。多分。

Guest 10:43
ああ、はいはいはい

Guest 10:44
はい使えないと思う。これ、アシンクファンクションはあのまその名前の通りあれですね。その

Guest 10:52
コンストラクターで与えた文字列の中身は、その非同期関数の中身と同じように解釈されるので、まあ、アベイが

Guest 11:01
普通に使えるように使える

Guest 11:03
感じです。それは結構便利そう

Guest 11:08
そうですね、ま、これのおかげで、あのスニペットの中で、トップレベルでアウェイトが使えるようになってるっていう。

Guest 11:14
あ、そういうはいはいはいはいはい、なるほど、じゃあトップレベルベイト実現するためには、まあ必須だったみたいな

Guest 11:27
面白いですね。

Guest 11:29
あとは、まあただそのアシンクファンクションに与えるだけだと、今だとjsxに対応してるっていうところがまだ解決できてないので。

Guest 11:39
あ、はい、あの、これもあのリアクトライブの機能と同じなんですけれど、も、バブルというトランスパイダーを

Guest 11:47
使っていまして、ま。これがこれを。そのまあ入力された文字列に対して、トランスファイルをかけて、

Guest 11:56
中のjsexをえーリアクトクレイトエレメントに書き換えるっていうことをやってから、アシンクファンクションにコンサクトに与える

Guest 12:07
形。

Guest 12:09
なんか、バブルって結構昔一時期話題になって、あ、あ、はいはいすけど、今も結構あの、今も結構動いてるプロジェクトなんですか。

Guest 12:18
うん、僕はあんまり知らないんですけど、そうですね、結構あれですよね、なんか一応

Guest 12:28
今見たところ、5日前に更新されてるので、まあメ定されてないわけではなさそう。ああ、なるほど、なるほど、今回の場合だと、まあ

Guest 12:38
普通こういうことやろうと思ったら、バベルとか用意すると思うんですけども、ブラウザにバベル乗っけるのはま、大袈裟かなという気持ちがありま。ここは、そのリアクトライブと同じま、バブルという形容なトランスパイアを使いました。って

Guest 12:53
ま、今回の目的ではあってそうな感じ。

Guest 12:58
おお、なかなか面白いですね。じゃあ、基本的に仕組みとしては、リアクトライブの仕組みと同じように作ったみたいな。

Guest 13:09
あ、もうちょっと追加した機能で言うと、あの、そのはい、コードブロックの結果を

Guest 13:16
次のコードブロックにこう渡すみたいなところとか。

Guest 13:20
ああ、はいはいはい、そこらこのあのりリターンしたものが次に

Guest 13:25
呼び出されてる。あ、そうですね、

Guest 13:27
うん、うん、うん、

Guest 13:28
そこはあの、jpiternotbookも同じような機能提供してるので、

Guest 13:34
はいはいはい、同じように、まあ実現したいっていうところで。

Guest 13:38
そうですね。

Guest 13:42
うん、

Guest 13:45
あとこれこれ

Guest 13:46
はいすごいっすね。このこのコードブロック感で、データが渡せるのはなかなか

Guest 13:53
まあそうです。あ、状態管理がやや半雑だったかなっていう

Guest 14:05
ま、実行環境はえ、実行しした結果をまあそのまま保存してるだけではあるんですけど、ま、そういったところですかね。

Guest 14:13
でも、使う側からしたら、後からこの行動は切り出すから、単体で関数にしときたいみたいな時とかに使い予想で、なかなかいいなと。

Guest 14:23
そうですね、割とあのディターノートブックも同じような感じで、まあ、実行コストがかかる。まあ

Guest 14:32
ものとかはあらかじめ別のブロックで書いておいて、まあ後で再利用するっていう。はいはいはいはい、書き方はよくされていますね。

Guest 14:41
うん、なるほど、なかなか

Guest 14:45
おすごい。実際のユースケースに沿って作られてる感があって、面白いですね

Guest 14:58
交換境としてそ

Guest 14:59
んな感じですかね。他他すか何か

Guest 15:03
たところで言うと、ブラウザー

Guest 15:06
がそのイエスモジュールを読み込めるようにするっていうところとかですかね。まあ、読み込む機能はほんとにブラザーの機能そのままなんですけど、も。

Guest 15:17
はい、あの、インポート分のあのパースとかは、あの後でmdでは提供してないので、

Guest 15:25
うん、まあ、その陰包と何なフロムななっていうのを、あのパースするところとかは書いたりしました。

Guest 15:33
を自分で書いてまインポートできるように

Guest 15:35
するっていうそうですね、で、urlを指定してあげて、まあ、そこのジェスを取ってくるっていう。

Guest 15:43
これ、esモジュールとして提供されてるものだったら、何でも使えるみたいな風になってる。

Guest 15:47
はい、そんな感じです

Guest 15:49
いや、面白いです

Guest 15:53
1点にちょっと今の実行環境について質問したいんですけど、はい、

Guest 15:58
ちょっと話が戻りますけど、今回バブルとかトランスパイルも含めて、ブラウザ上でしてると思うんですけど、そんな動作的には、そのトランスパイルって

Guest 16:08
結構なんでしょう。手元で動かしてると、そこそこ時間かかる印象ですけど、そんな重要な動作ではないんですかね。

Guest 16:16
ああ、そうですね、まあのあまりそのこう長い行動をトランスファイブするっていうユースケースは想定。はいはい、

Guest 16:24
知らんくて。そうですね、ま、なので、多分その数百行とかになってしまうと、なかなかこう1文字入力するごとに

Guest 16:34
重いなっていう感じになるかもしれないですね。

Guest 16:39
ま、そこはこうノートを分けて、それぞれの行動、ブロックごとにややっていくっていう感じ。

Guest 16:45
そ。そうですね、それがそう、それを想定してます、ありがとうございま。

4. MDX（Markdown + JSX） 16:52

Guest 16:53
じゃあ、もう1つの点について紹介していってもらってもよろしいでしょうか。

Guest 17:02
今回ま、そういうトランス、コード各環境みたいなのを作ったんですけど、も

Guest 17:10
ま今あのその実行、あの編集中は当然jsのjsの中で管理してるものではあるんですけども。まあ、それをこう

Guest 17:19
エクスポートするときとかま、どういうフォーマットにするんだっていうのを考える上で、まあ、ジpiternットブックだとあい、

Guest 17:28
pynbっていう。拡張子のファイルが出力されるんですけども、あれって、結構あのジェイソンで書かれていて、割と

Guest 17:37
人間が読むもえま。人間が書くものには辛い感じにな。はいはいはいはいあ、それはちょっと。なんか今回

Guest 17:47
あまりま独自独自のあの使用とかあんまり考えたくなかったので、

Guest 17:54
ま、それプラスま。自分あの人間が後からこう追求できるっていうのはしやすいようなフォーマットを探していると、mデック

Guest 18:03
というものを見つけました。で、あの、これなんですけど、もま

Guest 18:09
公式サイトの通り、あのjxプラスマークダウンみたいな、そのままの森なんですけども

Guest 18:18
そう、マックダウンのフォーマ。文法の中にjxxなので、まあ、あのhmlタグみたいなのを埋め込める

Guest 18:27
あとは、インポートとか、エクスポートの分をそこに埋め込むっていうことができるっていう感じのフォーマットです。

Guest 18:37
で、ま、それにそれプラスま若干のメタデータを加えたものを、今回の

Guest 18:47
アステロイドでは出力しています。まあ、出力してみるとほんとにわかると思うんですけども。ただ、

Guest 18:53
その複数のブロックをこう下に連なった形になってるだけです。なので、そんなに

Guest 19:03
アスロイドと特有の機能とかはそこでは入ってない。

Guest 19:11
これはいついては。今エクスポートしたデータを見てるんですけど、jsxアステロイドイコールっていうところが、コンポーネントと紐づいてるっていうような。

Guest 19:22
あのはそうそううん、うん、うん、あ、じゃあせっかくなので、ちょっとポートしてみてもらう

Guest 19:29
とわかると思うんですけどもそうですね。そのコードブロックが一応今回のその

Guest 19:35
えjせえー。astroidの1つのコードブロックに対応していて、

Guest 19:42
コードブロックのまあ、メタデータとしてjx、アステロイドイコールなんとかなんとかっていうところが、まあ、

Guest 19:50
それぞれのコードブロックに対応してます。で、内部的にはこのidが1つのコードブロック

Guest 19:59
を指し示すものになっていて、ま。それの結果が、下のそのastroidanderscア

Guest 20:09
っていうコンポーネントで、レンダリングされるようになるっていうのを計画しています。ちょっとまだこれは実装中なんですけど、もま最終的にはここの。

Guest 20:19
jxxの部分に。自分の書いたコードがそのままあの表示されるようになるといいなと。

Guest 20:28
はいはい、はい、はい、

Guest 20:34
このあれなんですか。コードブロックとコンポーネントを紐付けるところは、mdxとして提供されてるんですか。

Guest 20:43
ああ、そうですここはあのあのなんですか、そこはあのアステロイド特有の機能ですね

Guest 20:51
まあ、あの後方互換性と言いますか。その今、

Guest 20:55
出力したインデックスを全然その関係ないエデのインポートのところに入れると、ま、ただ単にその

Guest 21:04
コードがか。コードブロックの内容は、あのマークダウンのソースコード。

Guest 21:11
コードブロックして、あまあ表示されるようになってるっていう。なるほど、形ですね。はいはいはいはい、あ、

Guest 21:17
じゃあここは。アステロードの方が独自で解釈して、今、このコードブロックをリアクトコンポーネントとして、定義し直してマウントしてるみたいな

Guest 21:26
そうです。そうです、

Guest 21:30
なかなか面白いですね、

Guest 21:33
結構あれなんすね、mdx自体は結構なんでしょうたまに使われてるのを見ますけど、まあ、それぞれで独自の構文拡張してることも結構あるんですかね。

Guest 21:44
ま、そうですね、結構そん

Guest 21:48
あんまりあの、その元々そのえmd自体もマークダウンの拡張なので、

Guest 21:54
はいはいはいはい割とそうそこら辺は独自基本みんな持ってるかもしれないし、ま

Guest 22:03
割と拡張もしやすい形になってます。

Guest 22:10
たことないんですけど、こういう風になんか実現できなめちゃめちゃ夢があるというか、うん、面白いです。そうす、

Guest 22:18
結構エデックスって割とあの、なんていうんですか。まあいアイディアというか、発想自体はすごい安直なんですけども、

Guest 22:28
割と使い道があると思っていて、まあ、結構

Guest 22:35
1番よく使われてるそうなのは、あのライブラリのドキュメントとかですかね。あの、ライブラリで、なんかこういう

Guest 22:45
サンプルコードがあってま。それの実行例みたいなのを、mの中でjxとして埋め込むっていうことをやっていて、はい

Guest 22:56
でま。それをなんか性的なサイトジェレーターで、こう出して、ライブレートして、ボンって貼り付けるみたいな、

Guest 23:05
ヨットだったりとか、あとはあれですね。あの、前見かけたやつだと、あの、

Guest 23:16
自分のその個人ブログとかでこう書いていて、なんかここのここにあの広告を差し込みたいとか。ところでカーボアド。はい、

Guest 23:27
ああ、はい

Guest 23:28
はいはいっと入れて、あそこに広告げ込みたいな感じで、ほんとに。あのマークダウンの延長で、なんか、

Guest 23:37
独自の機能を追加したい時とかっていうのに、意外と使えるところですよね。

Guest 23:43
うん、

Guest 23:48
なんか結構あれですね。storybookって、あ、あの知られてないんですけど、すごい

Guest 23:57
mdxと相性が良いと思っていますね、結構

Guest 24:02
なんかあれですよね、ストリーブック自体もいつでしたっけ。今年の頭ぐらいでしたっけ。あに、ソフィシャルでサポートされるようになった気が

Guest 24:11
します。サポートもされてるんですかね、

Guest 24:17
サポートをあ、今年の頭にされ出していいそ

Guest 24:21
ぽい

Guest 24:23
おされてますね。うんうん、うん、うん、うん、まさにこういう用途

Guest 24:29
いいんじゃないか。はいはい、ドキュメントと、まあ、そのリアクトコンポーネントとかが、密接に結びつくようなところが1番こう価値を発揮しそう

Guest 24:39
って感じ。

Guest 24:39
そうですよね、まあ、プルもそうですし、

Guest 24:44
確かになかなかあのなんでしょう。例えば、個人ブログとかって、結構みんなワークダウンとかで書いてる人、すごいエンジニアの人多いと思うんですけど、

Guest 24:53
なんか、コードが載せられないって結構よくあると思っててま。コード乗せるためにはこう

Guest 24:59
あの、スクリプタグ許可して、運動しないといけないとかよくあると思っててま。そういうのが、

Guest 25:05
まあ、どの道スライドの埋め込みとかのために、あああいうタグとか許可することってよくあると思うんですけど。とはいえ、もっとまともな環境を欲しいっていうのはよくあると思うんで。

Guest 25:15
そうですよね、結構うん、うん、なんかそれそのためのそのためだけに、そのページだけそのjにかかき直すごいなつだと思

Guest 25:26
そうですよね。と、

Guest 25:33
確かにそこで、初めからnmd使っておけばあれですよね。これは、別にどの道なんか

Guest 25:40
あのリアクトコンポーネントとかま、jsx使わなくてもいいんですもんね。

Guest 25:45
あ、そうです、そうですあ、そうですそうですあのま普通にあのマダの

Guest 25:52
あなんていうんですかね。マークダウンあのmデックスっていうあの実態は、そのマークダウンのローダーみたいなのになっていて、

Guest 26:01
まマ弾はいはいをこうパスで指定してあげると、まマダンの中身をジセ

Guest 26:09
jsxではないですね。ェスにま書き換えて、それをインポートする労働ートするっていう形なので、まあ、単純にその

Guest 26:18
ジェースの中にマークダウンを埋め込む手段としても使えると思います。

Guest 26:27
いや、なかなか面白そうそう

Guest 26:31
ま、あと、あのアステロイドをま実装する上で、はいちょっとさい。あの

Guest 26:38
後半は結構mdxを拡張することが多くありまして。はい、ちょっとそのまま使えるかと思ったんですけれども、

Guest 26:48
あの、例えばそうですね。け、あの、ちょっとアステロイドのホームページを見てもらいまして、

Guest 26:57
サンプルズのgoto、レンダードページまどれか見てもらうとわかる。はいすけど、

Guest 27:06
あのぶコードブロックで書いたソースコードの下にま、その実際の

Guest 27:15
実行結果っていうのを埋め込みたいっていうのをやろうとしてるんですけど、もはい、なかなかこれ、あの、

Guest 27:24
今のmdxだと難しくて、

Guest 27:27
ああ、なるほど、なるほど、

Guest 27:29
というのも、あの、そのエデックスを読み込んだ段階で、パースして、その

Guest 27:38
えりリマークのatでパースしてくれるんですけれども。

Guest 27:42
はい、

Guest 27:43
その結果をこうjsにこう

Guest 27:48
変換するタイ最後のタイミングが結構あのベタ書きになっているっていう問題があ

Guest 27:54
あるんですよ。じゃあ、その復帰して取れないみたいな、その中間の状態をそうそう取ることができないみたいな。

Guest 28:01
なので、そのあの独自のそのエリックの基本を追加するっていうところまではできるんですけど、まあ、その結果を

Guest 28:11
なんか2位のそのjsの出力の形にしたいっていうのがちょっと、もう今だと

Guest 28:18
なかなか難しかった。なので、まあ自分で書くしかないっていう

Guest 28:22
はいはいってますね。ま、ここら辺は割と今後良くなると嬉しい。

Guest 28:29
なんか、独自のものを追加するまではいけるけど、まあ、その結果はこう。あの、もう完全な

Guest 28:36
最終的な出力出力になってしまうっていうそうそうそう。

Guest 28:43
本来であれば、このそれぞれの下に、こういったページのそれぞれの下に結果もついてほしいみたいな

Guest 28:50
っていうのですね。はい、そうですね、単純にそのドキュメントの記述っていう用途では必要ないとは思うんですけども。

Guest 29:02
まあ、確かに。でも、アステロイドみたいなものを作るってなってくると、やっぱり実行結果とその行動っていうのは見たく

Guest 29:09
なるかなと思います。しっていうのは、また

Guest 29:11
はいそうっすね、うん、うん、まいやま、単純にその

Guest 29:15
普通にドキュメントかよ。でも、例えば、その開発者向けドキュメントとかだったら、ソースコードとその実際動く。でも、同時に管理するのって結構大変ですし、

Guest 29:24
需要はすごいありそうだなとは

Guest 29:27
そうですね、それもぜひ使ってほしいところです。

Guest 29:33
そうや、ソースコード

Guest 29:35
をコピーしてきて、それを別のjsに張り付けるみたいなのを、うんていう手間はこれでなくせると思います。

Guest 29:44
なかなか

Guest 29:46
いいっすよね、mdxみたいな、こういったまちょっとなんかおも面白いというか、

Guest 29:53
うん、うん、

Guest 29:55
この何かと何かを混ぜ合わせた系の技術を使うと、ちょっと夢が広がってって、あ、

Guest 30:04
はい、目が広がっていいっすね。なかなか

Guest 30:07
うん、うん、

Guest 30:09
結構あのこれあのjxを読み込む形なので、前ななんか2回前ぐらいですかね。

Guest 30:19
や、2回ではない。先週ぐらいのそのビューススタディの。そうですね、レンダーファンクション

Guest 30:29
はい

Guest 30:30
で。その理由と、リアクトのまきさんの共通化っていう話をテンサイトでした。と思うんですけど、も、はいはいま、これもあのjsx

Guest 30:41
なので、ま、実際そのリアクトっていうのはほぼ関係ない技術ではあるんですよ。まただ、

Guest 30:49
はいはいはい

Guest 30:50
ま元々そのリアと念頭に置いて開発されていたので、ま、まだちょっとその理由に流用するっていうところだと、まあ、

Guest 30:58
ドキュメント不足っていう感じが

Guest 31:01
はいめない。

Guest 31:03
ま、ただここも。あの、今後解決していくからと、皆さんが使ってもらえると解決すると思います。

Guest 31:11
確かに、実態は別にただのそのj報であって、これがリアクトクリエイトエレメントに紐づかないといけないわけではない。

Guest 31:20
あ、そうです。そうです

Guest 31:21
うん、うん、うん、なかなか面白いっす。

Guest 31:26
いや、夢があっていい。

Guest 31:29
ありがとうございます

5. 今後やりたいこと 31:31

Guest 31:32
じゃあですね、ここまで結構技術的な話とか、今のmdxの話とか、あと、アステロイト自体の技術の話とか聞いていたと思うんですけど、

Guest 31:41
なんか、この今後こういったことやっていきたいなとか、こういった開発のえーを追加したいなとかあったら、なんか

Guest 31:51
聞ければなと思うんですけど、なんか今ありますかね。

Guest 31:53
そうですね、ま、まずはあれですね、割とあの、まだあのお大々的にリリースを言ってないので、

Guest 32:03
今後そのドキュメントを整理してから、まずリリースのアナウンスをしたいっていうところですね。で

Guest 32:12
ま、そのために、まあ、いろんな機能はちょっと足りないなと思っていて、例えば、

Guest 32:21
そうですね。アステロイドのmdのまさっき話してたところではあるんですけども、その

Guest 32:31
出力した。mdxを

Guest 32:34
読み込んだ時に、その実行。えーソースコードとともに、実行結果が表示されるっていうスタンドアロンなmxが

Guest 32:45
読み込めるように、ろ。まず、それのローダーを提供したいっていうところとかがあります。で

Guest 32:52
ま、もうちょっとあの発展的なところで言うと、あの、その自分の書いた

Guest 32:59
ノートっていうのをまき、uraで共有できるっていうところもま、今後やりたいところ

Guest 33:07
ではありません。ま、ただちょっと今問題があって、まあほんとに共有するだけならすごいm。デックスをアップロードしておしまい

Guest 33:17
ではあるんですけども、やっぱり、あの他人のソース行動をそのまま実行できてしまうっていうのは、

Guest 33:25
ちょっとセキュリティ上よろしくないかなと思っていてま。それのかい。

Guest 33:31
あの、まあ、安全性の担保っていうのをどうしようかなっていうの、

Guest 33:36
ちょっと考えてますね。まあ、なかなか難しいところですけども、

Guest 33:41
確かになかなかこれ共有できたらすごい便利そうだなと思ってたんですけど、

Guest 33:47
ま、例えば、もう今って開いたら、既に実行されてる状態で、明示的に乱するわけではないんですもんね。アクセスした瞬間になんかやばいことされたら、

Guest 33:55
まずいですしね。そうですね、確か

Guest 33:58
最悪あのま実行する前にこう確認ボタンを用意して、これ実行するけど、はい、ほんとにいいんですか。みたいな

Guest 34:07
そう、はいはいはい感じにして、もうユーザーに丸投げみたいな感じでもいいかもしれない。

Guest 34:14
多分、そんなまこれを使ってる時点でそこそこわかってる方だと思うので、

Guest 34:24
そうです。

Guest 34:27
うん

Guest 34:29
ま、それが解決できたら、多分一気にあの、そういうソーシャルな方向に展開できるかな

Guest 34:39
とは思いますね。

Guest 34:44
あと、あれですね、スタンダーローンで表示可能なローダーがあるとまより便利というか、まあみのブログとかにも組み込んでもらいやすくて、

Guest 34:51
なかなか

Guest 34:53
そうですね

Guest 34:54
っすね、うん、うん。

Guest 34:55
それができるとあのまさまさしくここでブログ書いて、あの

Guest 35:02
そうあの実行結果が載せれる。一緒に載せるようなブログを書いてで、自分の

Guest 35:10
ブログのディレクトリにぺって追い込んで、でま記事公開するみたいなこともできるようになるはずです。

Guest 35:18
基本的になんか自分たちでブログ作ると、結局ま。例えばmdxとかでコードブロック用意したとして、じゃ、その各環境をどこに用意するんだってのが

Guest 35:28
まあ、めんどくさくなりがちなうん、うん、

Guest 35:30
ところだと思うんで、

Guest 35:32
こうやって外部で書だけ書いてしまって、それをほんと公開できるってのはな

Guest 35:37
なかなかがあって、面白そう。

Guest 35:40
そうですね、

Guest 35:43
うるさいな。

Guest 35:47
また、アップデートあったら色々。

Guest 35:49
あ、はい、もうこれはまだまだあの開発途中だと思っているので、今後も追加していきたいと思います

Guest 35:59
お願いします。

6. クロージング 36:01

Guest 36:10
ブライクなエリタ環境であるえ、アステロイドについて話していきました。え、

Guest 36:17
ラインのフロントエンド開発、えーセンターではえ、

Guest 36:21
ラインのかフロントエンド開発組織UITえではえ、このようなフロントエンドに関する開発や、議論をえ、日々行っております。

Guest 36:32
先週ですね公開していたビュー3サビや

Guest 36:38
その前から公開しているえびえあ、先週公開していたラインのフロントエンドエンジアのゴールデンウィークや、その前から公開しているビーディサーヒーなど。

Guest 36:48
社内勉強会から始まったおた企画もえたくさんありますので、

Guest 36:52
これからもライのフロントエンドエンジアがまあ、どんな技術、キャッチアップをしているかなどなどを公開していければと思っております。え、ぜひぜひ、また聞いていただけれと思います。

Guest 37:04
その他にこのポートキャストについてのご意見や、ご感想もお待ちしております。え、ハッシュタグシャープUIT、アンダースコアインサイド、

Guest 37:13
シャープUIT、アンダースコアインサイドでつぶやいていただきます。とえ、今後のポイントキャストの参考にさせていただきますので、え、ぜひぜひご意見やご感想をえつぶやいていただければと思います。

Guest 37:25
というわけでえ、今週はですねえはめんとともにえ、アステロイドについて話していきましたえはさんありがとうございました

Guest 37:34
あとうございました。