ep.144 ブラウザ上でWeb開発！ Sandpack 2.0と社内コード共有サービスの夢 | UIT INSIDE

2023/05/26 に公開1255 views

このエピソードについて

2023年はじめに相次いで発表されたフロントエンド開発をブラウザ上で実現するライブラリの技術詳細や、それらを利用して開発している社内コード共有サービスについて、@spring-rainingと@kohei.maekawaが話しました。

トピック

Sandpackの概要
Sandpack 1.0と2.0の違い
UITが開発する社内コード共有サービス
WebContainersとSandpackの違い
- 収録時はWebContainersはSafariで動かない状態でしたが、Safari 16.4でSharedArrayBufferに対応したことによりSafariでもWebContainersを使えるようになりました https://blog.stackblitz.com/posts/webcontainers-are-now-supported-on-safari/

参考情報

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

@spring_raining 00:09
こんにちは、UITの玉田です。今回もUIT INSIDEを始めたいと思います。 UIT INSIDEは、ユーザーインターフェイスと、テクノロジーを愛する開発者のためのポッドキャストです。最新のウェブ表示の動向や開発フレームワークの変遷、uiやuxに関することまで、毎週フロントエンドの情報を発信していくことを目的としています。

@spring_raining 00:33
さて、今回はですね、前川さん呼びしました話すことが2つありまして、1つ目が今UITで開発を計画しているある社内ツールについてのお話と、それの技術要素になるフロントエンドのサンドボックス技術について、はい、今回はお話していこうと思います。それでは、前川さんよろしくお願いします

@kohei.maekawa 00:57
はい、よろしくお願いいたします

2. 出演者紹介・Sandpackの紹介 01:00

@spring_raining 01:01
ではですね、いきなりですけれども、自己紹介を前川さんにお願いしたいですけれども大丈夫ですかね。

@kohei.maekawa 01:07
はい、前川ですえー、LINEに所属しています。主にUITの方々のデベロッパーエクスペリエンスの方のDXですね。そのDX向上を目的として活動していたりあと、社内ツールの管理をやっていたりします。で、フロントエンドの開発組織に属しているチームにも関わらず、結構そうですね。Kubernetesとか、VMの中身を触るといった。そういったバックエンドの方が触る機会が多いっていう。まあ、結構変わったチームに所属しています、よろしくお願いいたします、

@spring_raining 01:35
よろしくお願いします。そうですね、大きな組織のフロントエンドでは、あんまり馴染みはない方もいるかもしれないですけど、こういう社内ツールというか、私たちフロントエンドの開発体験も向上させるっていうミッションも 1つ重要なものがありまして、私たちとは結構やってることが違っていて、あんまり普段どういったことをやっているんだろうっていうのを聞く機会があんまりなかったりするんで、はい、今回そういったところも含めて

@spring_raining 02:01
聞いていければなと思います、よろしくお願いします

@kohei.maekawa 02:04
はい、よろしくお願いいたします。

@spring_raining 02:05
ではですね、まず2つ話題をあげていたんですけれども、ここでいうサンドボックス技術とは何かっていう話なんですけれども、ブラウザっていうか、そうですね。あの、フロントエンドのコードをブラウザ上で実行する時のサンドボックスを今回は指しています。要するに、StackBlitzとか、CodeSandboxとか。皆さんご存じかと思うんですけども、あれのサンドボックス技術について、今回お話そうと思うんですけれどもどうですかね。結構、ここら辺割ともう調べられて

@spring_raining 02:37
いるという風に聞いてるんですけど

@kohei.maekawa 02:41
はい、残念ながら私もちゃんと調べ始めたのは2、3週間前なんで、まあ、そうですね。流れから話すと、他内でさっきも自己紹介で言ったようにDX向上とかを目的にしてる関係でま、社内でどんなツールが欲しいですか。みたいなアンケートを取ったりすることが多いんですけど、まあ、その中でそうですね。コード共有サービスみたいなのが欲しいという。まあ、意見が結構多くてですね。

@kohei.maekawa 03:07
まあ、そういうわけで、じゃあそれを作ってみようっていう話になり、その過程でサンドボックス技術ってどうどういう風に構成されてるんだとか、どういう風に構築すればいいんだ。みたいなのを調べ始めたのが、はい、2、3週間前という感じですね。そうですね

@spring_raining 03:22
えっと、ま、これのタイミングで、今回話す内容っていうのが、えっとま、具体的にSandpackっていうライブラリーだったりと、もしかしたら、あの、WebContainerの話もするかもしれないんですけども、それらのライブラリではですね。ちょうど時期を見計らったかのように、えっと、今年の2月ぐらいに大きなメジャーバージョンアップデートや、リリースの話がありました。先に確かwebcontainers.ioですね。のリリースの発表が

@spring_raining 03:52
あって、これはあの開発元があれですね。StackBlitzというサービスをあの開発しているサービスで、えっと、ま、それのすぐ後ぐらいにですね、Sandpack、これは元々あったんですけれども、2.0というメジャーバージョンアップがありました。

@spring_raining 04:10
で、この2つがですね。すごくまあ目的が似ているそのサンドボックスを実現しているっていうところ、技術がありまして、これを2つあの立て続けに公開されたので、私もちょっと興味を持って、ウォッチをしていたりした

@spring_raining 04:29
ていうところで、あの前川さんがちょうどそれを調べられているっていうところで、気になって話しかけてみたという。はい、次第ですね。

@kohei.maekawa 04:38
そうですね、ほんとにタイミングが狙ったかのように、はい、同じようなタイミングで2つ発表されて、これはびっくりしましたね。

@spring_raining 04:45
そうですよね、なので、もしかしたらもうサンドボックス技術、すごく密かに熱い。2023年サンドボックス元年、言い方がなんかすごい古いですけど、なのかもしれないというところですね。ってはですね、じゃあ、 Sandpackの方がより詳しいかもしれないので、Sandpackの概要とか、もう少し詳しくお聞かせいただけますかね。

3. Sandpack 1.0と2.0の違い 05:15

@kohei.maekawa 05:17
はい、そうですね、えっと、はい、先ほど名前が上がったSandpackとWebContainersっていう、リリースされたというか、発表された2つの技術なんですけど、ま、その中でそうですね。Sandpackの方使ってみようかっていう話になったので、はい、多分そういう話になってるのかなっていう風に認識してるんですけど。そうですね、せっかくなので、Sandpackについて。えー、軽くですが、説明させてください。まず、歴史からお話をすると、サSandpackはですね、

@kohei.maekawa 05:44
2021年かもうちょっと前ぐらいに、登場したブラウザ上で開発環境を提供するバンドラです。で、仕組みとしては、例えばReactアプリを実行したいなっていう風に、ブラウザ上で、Reactアプリをどう実行したいなっていう風に考えたときに、CodeSandboxがホスティングしてるサーバーからBabelだとか、TypeScriptだとか、そういったトランスパイラーをそのまま落としてきて、

@kohei.maekawa 06:07
で、そのトランスパイラーをWeb worker上で実行して、で、そのWeb worker上でReactですと、そうですね、jsxとかtsxをトランスパイルして、で、このトランスパイルした結果を別に立てたiframeですね。その中で、結果をプレビュー実行して、プレビューさせるみたいな流れだという風に理解しています。で、このCodeSandboxがですね。ホスティングしてる、トランスパイラを落としてくるサーバーっていうのが、オープンソースになっていて、えー、自前でこのサーバーをホスティングすることができると

@kohei.maekawa 06:35
で。そうですね。まあ、実際にこれビルトしてみると結構面白くてですね。Babelとか、TypeScriptだとか、さっき説明したような。えーと、トランスパイラに始まりVercelだとか、Sassだとか果てにはCoffeeScriptとかですね。まあ結構昔の技術のトランスパイラを、スタティックにダウンロードできる形でビルドできて、まあ、この辺り結構面白いなっていう風に思いました。

@spring_raining 06:58
そうですよね、これは、えっと、Sandpackが1.0が1年半ぐらいまえ、2021年の12月に発表、アナウンスのブログがありましたよね。CodeSandboxは、皆さん使ったことがあるかなと思うんですけども、要するに、トランスパイルの技術を丸ごとフロントエンドに持ってきたていう感じっていうところですよね

@spring_raining 07:23
これもですよね、でま、それをiframeで実行する理由っていうのは、まあそれこそあの、サンドボックスの技術に関連するんですけど、もまとにかくブラウザ上でコードを書いてで、ブラウザ上で、普段だとNode.jsで、あのビルドってやると思うんですけども、それをブラウザ上でやって、で、ブラウザ上でまで完結するっていうところていうのが

@spring_raining 07:49
あれですよね。あの、良いところ良いところっていうか、まああの実行できることっていう。はい、そうですね、ですよね、でまこれがSandpackの概要で、これがSandpack 1.0がこういうものだったんですけれども、それが2.0が最近出たっていうところですよね。

@kohei.maekawa 08:08
はい、その通りです

@spring_raining 08:10
はい、では、じゃあ、サンドパック2.0になった時の、まあ違いみたいなのを教えてもらえますかね。

@kohei.maekawa 08:18
そうですね、まあ、調べたところっていうか、前川調べに近いんですけど、えっと、サンドパックはですね。えーと、1.0では、例えばReactとか、Vueのサンプルアプリを簡単にweb上に構築できるぜ。みたいな感じのことを主眼に置いていたように見えます。で、まあ、Reactとか素のReactとか、素のVueのえーと、アプリを構築するまあ要は、クライアントサイドでのJavaScriptの実行しかできなかったよみたいな話だったという風に考えています。

@kohei.maekawa 08:46
でですね、サーバーサイドでのコードも実行したいよみたいな。まあ、要望があったのかどうかはわからないんですけど、例えば、大元のサービスであるま、CodeSandboxではですね。これは、あとから話すかもしれないんですが、独自にえーと、VMですね。Firecracker VMっていうんですけど、その中でえーと、コンテナみたいな。コンテナ技術を Node.jsが直接実行できるよみたいな、開発環境を実現しました

@kohei.maekawa 09:09
で、Sandpackはですねオープンソースなので、Sandpackを実行したブラウザの中で、えーと、開発環境を構築することは、まあ当然できない。Firecracker VMをブラウザの中で。実行するっていうのは、まあままだまだというかできないので、それを。じゃあ、私たちのブラウザ上で完結するさせるためにはどうすればいいだろう

@kohei.maekawa 09:28
いう風にまあ考えたみたいで、Sandpack 2.0ではですね。えーと、新たにNodeboxっていうえーと、Node.jsの実行環境に相当するものを新たに開発して、それでのNodebox上でNext.jsだとか、Viteだとか、Astroのビルドができるようになったで、今言ったように、Nodeboxは、Node.jsの環境をブラウザ間の互換性を保ちつつ、動作できるように開発したものなのかなっていう風にえーと、理解してます。まあ、そういうわけで、まあ、NextとかViteとか実行できるようになった

@kohei.maekawa 09:57
ので、まあ当然例えばそうですね。Expressとかの実行環境もできたという話になるので、まあ未完成っぽいですけど、まだ0.0.4とかなんで、この収録時点では実質的にはNode.jsの開発環境ですね、ブラウザで完結できるようになったと言っても、えー、Sandpack 2.0で、えーと、Node.jsの開発環境をブラウザで完結できるようになったと言っても、ま過言ではないのかな、という風に考えてます。

@spring_raining 10:22
なるほど、なるほど、ありがとうございます。Sandpack 2.0で、そのサーバーサイドで、のまソースコードの実行っていうところで、まあ要するに、あのNext.jsとかは。まあ、そのサーバーサイドで動く部分もあるので、ま、そういうのがSandpack 1.0ではできなかったのが、2.0でできるようになったと、簡単にアナウンスのブログには書いてるんですけど

@kohei.maekawa 10:47
そうですね

@spring_raining 10:49
簡単には書いてるんですけれども、まず、Node.jsの環境をブラウザで実行する、できますっていうNodeboxってなんだっていう話ですよね。

@kohei.maekawa 11:01
そうですね

@spring_raining 11:02
あの、うん、そうですよね、そうです私もちょっと実行をあの手元で、あのSandpack 2.0をインストールして、実行してみたりしたんですけども、確かになぜかNext.jsがブラウザ上で動いているっていう感じなんですよね。で、もう少し中身を見てみると、Nodebox自体はあれなんですよ。まだ、オープンソースではないんです。

@kohei.maekawa 11:28
そうですね、はい、オープンソースじゃないので、どう動いてるかどうかもちょっと、まあ、予想の範囲でしかわからないみたいな感じですね。

@spring_raining 11:35
ですよね、あの、Sandpack本体はオープンソースでわかりやすくなってるんですけども、動作的にはそのruntimeっていうiframeがSandpackが作ってて、で、そのruntimeのiframeの中で、オープンソースじゃないNodeboxのソースを持ってきて、で、なんだかんだしたら、Next.jsが動くという。

@kohei.maekawa 11:56
はい、私も同じ認識です。

4. Nodebox/Firecracker VM 12:00

@spring_raining 12:00
これ、あのNodeboxがめちゃくちゃすごいっていうことが分かったんですけど、これは、Firecracker VMを元にしたっていう認識ですかね

@kohei.maekawa 12:10
そうですね、Firecracker VMに相当する環境を頑張って、ブラウザ上に構築しようっていうのが1点で、もう1個ですね。多分、この後説明するかもしれないんですが、えっと、WebContainersは、SharedArrayBufferですね。そういった技術を使っていて、えーっと、例えばSafariとかに特定のブラウザはまだそれに対応してないですね。まあ、なのでとそういった環境でも、えっと、実行できるようになんだろうな。独自の

@kohei.maekawa 12:39
ま改良というか、独自のえーと、路線でどのブラウザでも、開発環境は、サンドボックス環境ですねサンドボックス環境がえーと、実行できるように作ったものがNodeboxだという風な認識です。

@spring_raining 12:50
あー、そうですね、あの、説明は省いてしたんですけども、そうですね。WebContainersと、 Sandpackの違いっていうところの1つがそうですよね。あの、SharedArrayBufferを使ってるか使ってないかっていうところで、ま、これをま使うことのデメリットが Safariでは、まず、あのSharedArrayBufferは使えないっていう大きな違いがあって、まあ、それの点がもしかしたらWebContainers

@spring_raining 13:18
ではなくて、Sandpackを採用する。1つの決め手になのだったのかもしれない。

@kohei.maekawa 13:24
そうですね、はい、その通りでもあります。まあ、Safariに使う人そこまではいないんですが、まあ、そうですね。コード共有サービスとかを作るにあたってという話もありますし。そうですね、うちの組織自体が、えっと、フロントエンドでのと、アプリとかを提供する組織なので、ま、当然Safari とかでのえっと、動作確認もすると、そういったことでま。Safariでもの上でも動作確認ができる環境が作れればいいんじゃないかなっていうのは、はい、理由の1つではあります。

@spring_raining 13:51
そうですよね、あのSafariでの動作確認は必要です

@kohei.maekawa 13:54
そうです。

@spring_raining 13:56
Firecracker VMの内容について、ちょっと全然私が知らないっていうところもあって、もう少し聞いてみたいんですけども、これははい、そうですね、あの、私がいまいちそうですねFirecracker VMと、Nodeboxの関連っていうのが、ちょっとまだわかってないかもしれない

@kohei.maekawa 14:15
そうですね、あんまり関連は関連はしてないというか、えーと、CodeSandboxだったら、ま、例えば、皆さんが例えばReactアプリをCodeSandbox上に構築して、えー、NextアプリですねNext.jsとかで作られたアプリをCodeSandbox上で構築して、それを実行するぞっていう時には、Codesandboxは自分で自社でサーバーを持っているので、その中でFirecracker VMを起動して、

@kohei.maekawa 14:41
そこでNext.jsのえーと、サーバーサイドのコードを実行して、その結果をま、私たちのブラウザ上の結果、画面に表示するといった。えーと、流れになるんですけど、Sandpackに関してはそうですね、自分のローカル環境で実行するので、Firecracker VMを当然実行する環境はないと。なので。えーと、それに相当するものとして、さっき言ったNodeboxを作ったみたいな感じですね。

@spring_raining 15:03
なるほど、なるほど、はいはいあ、理解しました。なので、Nodeboxは、Firecracker VMそのものではないんですけれども、そのFirecracker VMの。まあ、APIというか、まあ、その設計をブラウザ上で実行するように、あの似せて作られたもので、CodeSandboxのサーバー上で実行するときは、Firecracker VMを使用してる。これは想像ですけど、かもしれない。

@kohei.maekawa 15:30
まあ、そうそうですね、はい、そうだと思っています。はい、CodeSandboxのえっと、ブログ記事とかを見る限りでは、そうなのかなっていう風には、はい、思ってます。

@spring_raining 15:40
そうですよね、あのNodeboxまあ、あの完全にNode.js互換っていうわけではないっていうのは、アナウンスのブログにも書いてある通りで見た感じの限りだと、まあ、要するにExpressであったりとか、あと、Viteがサポートするフレームワーク

@spring_raining 16:01
の範囲のNode.jsの。まあ、環境再現っていう感じなんで、まあ、必ずしも全てののnpmパッケージが使用できるわけではないっていう制約ははいあるんですかね。はい、あ、そうですね、はい、jsとかwasmもまあ動く。

@kohei.maekawa 16:22
あ、そうですね、そうですね、例えばま当然当然というか、まだ実装されてないみたいなことが書いてある範囲では、例えばc++だとか、えー、Rustだとか、そういったコードは当然動かないが、そのうちま実装予定だよみたいなことも書いてありますね。

5. 社内コード共有サービスについて 16:39

@spring_raining 16:39
では、2つ目の話題ですね。今まで調べてきたサンドボックス技術を使ってコード共有サービスを作るということで、その理由っていうか、作るきっかけみたいなのは、はい、教えていただけますか。はい、

@kohei.maekawa 16:55
そうですねま、元々はアンケートをとって、どんなツール欲しいですか。みたいなアンケートを取った結果が、票数が多かったっていうのが、ま、あと1つの理由ではあるんですが、じゃあ、なんでそれを社内でわざわざ作らなきゃいけないのっていうところですね。これ、理由に関しては、大きく分けて3つぐらいあるかなっていう風に思っていて、 1個目ですね。これは、セキュリティに関してだと思うんですけど、まあ、これは言わずもがなだと思っていて、例えばそうですね。

@kohei.maekawa 17:21
えー、ほとんどの用途においては、まあ、公開しても問題ないコードで、まあ、皆さん、コード共有サービスで共有するかなっていう風に思うんですけど、た、例えばそうですね。えー、分かりやすい例だと、公開前のプロダクトのアルファ版の簡単な一画面を共有したいよっていう風に考えた時に、例えばプロダクトのurlとかがですね。漏れてしまった場合に、それがどんなサービスなのか、えー、推測されてしまう危険性もあるし、まあ、もしもそれがえーと、例えば企画段階のプロダクトだった場合にまあ、他の企業さんに。そうですね。

@kohei.maekawa 17:50
例えば、そのプロダクトのアイデアを取られちゃうみたいな可能性もあるわけで、少しでもその可能性を減らさなければならないと、それこそCodeSandboxみたいなサービスを使った場合に、まあ、1個共有設定を間違えただけで、そういうのが全世界に公開されちゃう危険性をはんでるし、まあ、そういうコード共有サービスってうっていう性質上、それを簡単にできてしまうっていう傾向があるので、ま、そういった危険性を少しでも減らせるようにっていうのと、そうですね。あと、この後説明するんですけど、えっと、例えば社内のサービス同士

@kohei.maekawa 18:17
組織を繋げるきっかけにできないかっていう思惑がもう1つあります。で、えっと、2つ目ですね、これはそうですね。プライベートパッケージ、npmのプライベートパッケージに関する。まあ、理由が1個あって、えーと、これが大きな1番理由の1つなんですけど、えーと、社内で使う。例えば、LAICON

@kohei.maekawa 18:38
だとか、LIFFっていうか、えー、LIFFの開発に使うライブラリーですね。これはま、私たちが運用してるんですけどと、社内でnpmのレジストリーを運用していてですね。えーと、それが社内にしか公開されてないnpmパッケージとして配布されています。で、そうですね、例えばまCodeSandboxだとか、StackBlitzだとかでは。えっと、当然こうした。パッケージにはアクセスができないので、じゃあ、えっと、それを社内で使えるように、まあ、社内で開発せざるを得ないよねっていうのは、まあ2つ目の事情ですね。

@kohei.maekawa 19:09
で、3つ目ですかね。と、それが組織同士の連携、さっき言った組織同士を繋げるきっかけにできないか、みたいなことを言ってたんですけど、えー、組織同士の連携についてが、まあ3つ目の理由になります。えっと、自己紹介でもあったように、私たちのチームって結構まあ、特色があるというか、ちょっと変わっていて、UITで働く方々のデベロッパーエクスペリエンスですね。その改善だとか、社内サービスの運用とかといった業務を主に行ってます。で、例えばそうですね、あるプロダクトについて説明する

@kohei.maekawa 19:39
っていった機会がある時に、まあ、こういったふうに実装すればいいんだよって教えたいなっていう時とか、まあ、ここの仕組みってこうなってますっていう風に説明する時ですね。これま最も的確に伝えられるのって、まあ、ドキュメントでもないし、えーと、口頭でもないし、どっちかっていうとコードそのものだと思うんですよね。まあ、これを例えば技術者さんがそういったコードサンプルを作って、例えばQAさんとか企画さんだとかいった。えーと、技術職じゃない人が実際に触れて、ちょっといじって、

@kohei.maekawa 20:08
えっと、ここはこう動くんだ。みたいな感じのサンプルとして提供できる仕組みがあったらいいよねっていう話があったり、例えばそうですね。 UITで持ってるさっきも言ったLIFFといったサービスとか、UITで力を入れてる今力入れてますよね。アクセシビリティとか、そういったところで、えーと、そういった共有とか、知識の共有とかができるとま、今まで以上に。そうですね。UITっていう組織をとして、知識。まあ、いい感じに全体として成長できるんじゃないかなっていう

@kohei.maekawa 20:37
ことがあって、まあ、そういったそうですね。ま、DX改善だとかいうことも絡めて、チームとしての使命に貢献できるなっていう風に思っていたりするっていうのが、まあ、3つ目の理由になります。

@spring_raining 20:48
ありがとうございます。いや、めちゃくちゃ開発者としては、ほんとにあの、もうこういうサービスをがあるということがめちゃくちゃありがたいっていうところですよね。これまあそうですよね、プライベートパッケージとかもそうですし、セキュリティとかもそうですし、やっぱりこういうのをまあやってくれるっていう、あのチームがあるっていう存在自体はすごくほんとにうん、心強いですね。

@spring_raining 21:15
結構あのプライベートパッケージの件はそうですね。あの、まあ割とそういう制約っていう風に取れてしまうんですけども、結構割とまその面で言うと、Sandpackがですね。npmのパッケージを、配信するためのSandpack CDNですかね。あの、それをOSSで公開してるっていうところでま、そういったところも、いろんな

@spring_raining 21:41
活用方法を見出だしてほしいっていう感じをも、Sandpackにあるっていうところがあって、そういったところは結構魅力的です。

@kohei.maekawa 21:52
そうですね、これはそうですね、私たちの方で運用してみて、なんかあったらあのサンドパックの方にあれですね。ここもうちょっと改善できるよとか、PRが投げられるようになればそうですね。OSSとしてま意義がどんどん出てくるんじゃないかなっていう風には思ってます。

6. 社内コード共有サービスに期待すること 22:10

@spring_raining 22:10
組織同士の連携っていうところも、私たちが望んでいるところはですね。これ、結構あの実感としてはあるところで、例えば、あの再現コードをあのGitHubのリポジトリに作ってっていうところまではできるんですけども、それを実行する環境となると、やっぱりもう1手間一旦手元にクローンしてきて、で、実行してみてみたいなのはやっぱりそうですよね。あの、

@spring_raining 22:37
エンジニアだとまあ簡単にできるんですけれども、そういったのをま。例えば、他の業務の方に共有したいっていう時とかになってくると、やっぱりこういう共有サービス経由で、ブラウザ上で実行できるっていうところのメリットは、やっぱりどうしても欲しいんですね。

@kohei.maekawa 22:57
そうですね、LIFFとかはまあ、ブラウザ上でも起動しますけど、例えばそうですね。ま、当たり前っちゃ当たり前ですけど、LINE上でえーっと起動するブラウザーの中で移動したりするので、そういったところで、スマホ上でLIFFアプリを表示した時に、どういうふうに見えるかみたいなところを、Sandpackをカスタマイズして、そういったモードで表示できるようになるみたいな考えもあって、そういったことができたら、なっていう風には考えています。

@spring_raining 23:26
あー、なるほど、そうですね、そっか、別にそのブラウザ上だけで動かすっていうよりは、むしろその共有した結果をLIFF上で動かすっていうところは、あー、そっか、そういうところも。いや、それはめちゃくちゃ欲しいですね。あー、そういうビジョンがあるんですね、

@kohei.maekawa 23:47
ありがとうございます。まあ、まだ構想段階ではあるという感じではあります。

@spring_raining 23:51
めちゃくちゃ楽しみにしております他にその共有、今回Sandpackを使うっていう使うあ、まだき決定ではないんですかね。使うかもしれない、あの、検討段階ではあるんですけども、他にま色々こう方法を考えたかなとは思うんですけども、例えばあれですね。えーと、CodePenみたいな感じで、そもそもそういうなんて言うんすかね。あの、

@spring_raining 24:18
サンドボックスのサービスをiframeだけで、サンドボックスを実現するみたいな方法も取れたかなと思うんですけど、そういったところは、どういった経緯でこう。 Sandpackをベースとしたサービスを検討するようになところがありますかね。

@kohei.maekawa 24:33
そうですね、ま、これは2つぐらいあって、1個はものすごく直接的な理由でま。アンケートの票数が結果的に多かったっていう感じですね。CodePenみたいなサービスとCodeSandboxみたいに、まあ、ミニアプリ、もしくはそれ以上の規模のアプリを共有するサービス、どっちの方が欲しいですか。っていう風なまあ、質問投げかけた時に、CodeSandboxっぽいものの方が欲しいよっていう票数の方が比較的多かったっていうところがあります。で、そうですねあとは、まあ私たちの組織的な理由もまあ、1個あって、まあ、基本的に

@kohei.maekawa 25:09
そうですね。私達が何かアプリを作ろうって言った時に、えーと、まあそのまんま素のJavaScriptですね。バニラJavaScriptを使って、まあ、なんか作るっていうことは、比較的少ないのかなっていう風に思っています。例えば、そうですね、当たり前ですけど、Vueだとか、Reactだとか、ま、今だとSvelteとかですね。そういったものを使って、えーと、アプリを作りたいっていう風なニーズの方は、ニーズというか、基本的にそういう風に開発していくのかなっていう風に考えていて、

@kohei.maekawa 25:37
まあ、そういったことをする場合に、そのまコードの一部だとか、アプリの一部をもしくは全部を共有したいってなった時に、まあ、CodePenだとちょっと。まあ、スペック不足かなっていう風に考えていたっていうのがもう1つですね。

@spring_raining 25:49
まあ、確かにそうですよね、あんまり今まで。まあ、CodePen使う時って、そんなにJSを書くときに、CodePen使おうかなっていうと、そうでもないなっていうのはあ、確かに実感としてありますね。大体あれですよね、そのcssでとhtmlでだけ使うみたいな。まあ、ちょろっとJSを書くけど、まあ言うてあのできることは限られてるんで。

@spring_raining 26:13
まあ、普通にJSの環境をあのブラウザ上であの確かめるっていう状況は大体そうですね。StackBlitzや、CodeSandboxってのは、まあ決定かなとははい、思いました。とはいえ、結構なかなかチャレンジングというか、私もこれ、あのSandpackとかを手元で動かして、その仕組みを理解するのだけでも、だいぶ精一杯だったんで、

@spring_raining 26:39
結構なかなかチャレンニングなものになりそうだなと思うんすけど、どうですかね。意気込み的なのが

@kohei.maekawa 26:48
そうてすね、そうですね、いや実際はいまあいざ調べ始めてみると、はい、実際に結構使ってる技術が多岐に渡っていてですね。で、調べていくと、えーま、背景とかを調べていくと、それこそさっき言ったFirecracker VMとかが出てきたり

@kohei.maekawa 27:08
ま。元々これをえーと、ブラウザ上に持ってくるために、どういうことをすればいいか、みたいなことも、そのCodeSandboxのま、技術者さんたちとかが、まあ、結構ブログに書いてくれていてま。結構難しいことをえーと、ブラウザに持ってくるために、さらに難しいことを頑張ったんだなみたいな感じのところがあって、で

@kohei.maekawa 27:28
意気込み、意気込み、そうですね。まあ、それをうまく使って、まあ、そうですね、UITの皆さんのまあ、開発体験を向上させるっていう。まあ、そうですね、チームとしての使命を果たせればいいかなとは思います

@spring_raining 27:42
ありがとうございますすごいなんか無理やり話さしてしまってすいません。いや、でも、ほんとに当たり前に、今までNode.js上で実行していたことをブラウザ上で実行するために、何が必要なのかっていうのを紐解いていくっていう作業はめちゃくちゃ難しいんですけども、基礎からの知識が身につくっていうのはあれですけれども、再確認するみたいな

@spring_raining 28:06
ところはすごく思うので、これは、私もぜひ手伝えるところがあったら、自分やってみたいなっていうところは思いましたので、もしあの、よろしければ、私もあの色々と開発に加わっていきたいなっていう気持ちもありますのではいいや、ほんとにありがとうございました。これ、あの完成をすごく楽しみにしております。

@kohei.maekawa 28:28
よろしくお願いいたします

7. クロージング 28:30

@spring_raining 28:30
では、そろそろ終わろうかなと思います。えー、今回はブラウザ上での、サンドボックス技術と、それを活用した新しい社内サービス、コード共有サービスについて話を聞いてきました。 LINEのフロントエンド組織UITでは、このような技術的なキャッチアップを日々行っております。 UIT INSIDE以外にも、毎週の社内勉強会で、フロントエンドの情報交換を行っています。

@spring_raining 28:55
今後も、UIT INSIDEを通して、このような情報を外部に発信していけたらと思います。最後に、UIT INSIDEでは、皆様のご意見を募集しております。ハッシュタグは、#UIT_inside、エピソードのご意見やご感想はいつでもお待ちしております。ぜひ、ツイートしてください。それでは、前川さんありがとうございました、

@kohei.maekawa 29:16
ありがとうございました。