ブラウザ上でフロントエンド開発(Node.js環境)ができるWebContainerを試す

概要

タイトル通りブラウザ上でフロントエンド開発(Node.js環境)ができるWebContainerを試してみる

• 参考記事
  • https://www.publickey1.jp/blog/23/webwebassemblynodejswebcontainerapihttpnodejs_cli.html
    ブラウザのみでローカルマシンに Node.js などをインストールすることなく開発環境を用意することができる。

サインアップ

個人利用で github の public リポジトリを使うのであれば無料で利用できる。

1. 以下サイトにアクセス
   • https://stackblitz.com/membership
2. PERSONAL-FREE の「SIGN IN GITHUB」を選択し、github アカウントと接続する
   

プロジェクト作成

1. https://stackblitz.com/ に移動
2. 使用したいフレームワークをクリックする
3. テンプレートを元にプロジェクトが作られ、エディタが開き、サーバの起動も暫く待つと行われる。
4. Nuxt3 を選んだ場合
   

ソースコード編集

1. vscode のようにファイルを開いて編集するとサーバに反映される
   

github に保存

1. エディタ左上の「Connect repository」を選択
2. github と接続し、既存のリポジトリにインポートするか新規で作成するかを選択
   
3. 新規作成したリポジトリ
   • https://github.com/Yoshihiro-Hirose/nuxt-starter-4nfslv

所感

• かなり簡単に開発環境を用意することができました
• ブラウザのみで OK なので、学生の教育用途などでも便利かもしれない。(Chromebookなどから)
• エンタープライズ用途で実用的に使えるかは要検証
• 似たようなコンセプトのサービスも他にあるので出来れば触ってみたい
  • Sandpack 2.0
  • 参考記事 https://www.publickey1.jp/blog/23/webnodejswebnextjsviteastrosandpack_20.html