ブラウザのみの統合開発環境 StackBlitz の紹介
初めに
この記事は StackBlitz の紹介になります。
初めに言っときます。 StackBlitz は滅茶苦茶凄いです。
現状 JavaScript 系のフレームワーク・ライブラリは勿論。(Next.js / Nuxt.js / jQuery等)
Node.js自体も動かせます。 WASM を利用して Python や WordPress も動きます。 (2023/10/24 現在)
ブラウザのみで開発が完結します。
疑問
でも貴方は今こう思ったかもしれません。
- Q. でもお高いんでしょ？
-
A. 基本的には無料です。
- Q. 基本的？ 使えるプロジェクトの数とか制限されてるんでしょ？
-
A. されてません。 無料アカウントで 無制限です
そして今こう思ったのではないでしょうか。
[*] でもなんか裏が有るんでしょ？ 無料はおかしい。
確かにおかしいです。
サーバーを動かすのにも電力やクラウドの費用がかかります。
実はそこには有るロジックが有ります。
実は StackBlitz はNode.jsを貴方のブラウザで動かしているんです。
は？ 何言ってんのこいつ😡 と思った人も居ると思います。
無理も無いです。 Node.js は基本的にはサーバー側のランタイムです。
ではなぜ動かせているのか
それは StackBlitz が開発した WebContainerAPI が関係しています。
WebContainerAPI については後に解説します。
使用方法
まずは https://stackblitz.com にアクセスしてください。
この様な画面が出ると思います。
右上の Sign in を押してください。
すると Sign in Github というボタンが出ます。
そしてガイドに従ってサインインして下さい。
するとこの様なダッシュボードが出ます。 (通常はプロジェクトはまだ作成されていません。)
ここからプロジェクトを作成していきます。
(GitHubからインポートすることも出来ます。)
この様なUIから選べます。
テストとして Next.js のプロジェクトを作ってみます。
するとこの様な画面になります。
右の部分がプレビューです。
サーバー起動まで待ってください。(直ぐに終わります。)
これでサーバー起動することが出来ました。
リポジトリを作ってみます。
左上の Create Repoを選択してください。
するとこうなるのでリポジトリの名前を決めて Create を押してください。
GitHubのリポジトリである場合はこのように VSCode (Web) 上で使うことが出来ます。(拡張機能も動きます。)
GitHubへのコミットも可能です。
またGitHubから直接インポートした場合でもVSCode (Web) で使うことが出来ます。
ここまでが全てブラウザで完結します。
大事な事なのでもう一度言います。 ここまでが全てブラウザで完結します。
現在サポートされているテンプレート
Frontend
Backend
Fullstack
Vite
Docs, Blog & Slides
Creative
Mobile
Vanilla
Native Language
補足
ローカルのファイルからインポートすることも可能です。
Zennでの埋め込み
@[stackblitz](embed_url)
各リンク / ドキュメント
https://developer.stackblitz.com
https://webcontainers.io
WebContainerAPIとは？
一言で言うとブラウザで Node.js を動かす技術です。
WASM や仮想ファイルシステム等で構築されています。
サーバーやnpmコマンド(yarn, pnpm)も問題なく動きます。
jshという専用のシェルが有ります。
- 現在サポートされているコマンド
WebContainerAPI は StackBlitz がパッケージを公開しています。
xtermと組み合わせることで簡単な環境が直ぐに構築できます。
様々なPlaygroundサイトにも使用されています。
終わり
StackBlitz は開発が盛んで日々進化しています。
チーム機能やリアルタイム共同編集等の機能も有ります。
学校のPC等でも問題無くサクサク動きます。
良い開発ライフを。
Discussion