できること
StackBlitzは開発中のコードをブラウザ上でリアルタイム実行できるため、実装と確認を同じ画面で行えます。社内のデザイナーやPMとURLを共有してフィードバックをもらいながらコードを修正するという反復作業が、環境構築なしで実現できます。
モバイル表示の確認も、URLをスマートフォンで開くだけで完了します。レスポンシブデザインの崩れを確認するたびにビルドとデプロイをする必要がないため、社内の技術レビューサイクルを速められます。ただしWebContainer対応ブラウザに限定されることは注意が必要です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
できないこと
StackBlitzではURLへのアクセスを特定の人物に限定できません。「このメールアドレスの人だけ」「このドメインの人だけ」という制限はなく、URLが流出すると第三者も確認できます。社外の取引先が承認フローに加わる段階でこの問題が表面化します。
期限付き公開ができないため、過去のプレビューURLが何年後も有効なままになります。プロジェクトを非公開にするまでアクセス可能であり、Privateにしてしまうと今度は招待なしでは見られなくなります。期限内だけ共有したいという中間の要件に対応できないのが欠点です。
認証と期限の違い
StackBlitzから一時共有URLへの切り替えタイミングを見極めるには、「この共有に認証が必要か」という問いを立てます。社内の開発者同士であれば認証不要ですが、外部のクライアントや審査者が加わった時点でパスワード認証以上が望ましくなります。社外への初回共有がトリガーです。
期限の必要性は「このURLが永続的に存在してよいか」で判断します。提案中の案件・承認前のデザイン・価格改定前の料金表など、情報に有効期限があるコンテンツは期限付き共有が必要です。StackBlitzから切り替えるのは、「このコンテンツは一定期日後に見られては困る」と判断した時点です。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
差し替え・レビュー運用
一時共有URLに切り替えた後、修正が入るたびに新URLを発行すると、レビュアーが最新版を把握できなくなります。同URLで差し替え可能なサービスを選ぶと、「レビュアーは常にこのURLを確認すればよい」という一本化ができます。修正完了の連絡にURLを再掲するだけで十分です。
最終承認版については別のURLまたは別ラベルで管理するとトラブルが少ないです。「v1〜v3が修正途中版、finalが承認済み版」と明示することで、どのURLを確認すべきかの混乱を防げます。返信期限と返信先を最初の共有メッセージに記載し、期限を過ぎたらURLを失効させる手順を事前に決めておきましょう。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
向いているケース早見表
StackBlitzのまま進めてよいのは、オープンソースのコードサンプルや社内技術レビューです。機密性がなく、URLの永続が問題にならず、承認フローが不要な場合はStackBlitzが最適な環境です。
一時共有URLへの切り替えが必要になるのは、社外クライアントが最初にレビュアーになるタイミングです。もしくは「承認後はURLを失効させたい」「特定ドメインの人だけに見せたい」という要件が生まれた瞬間に切り替えます。StackBlitzでビルドしてギガサイト便にエクスポートする流れは5分以内で完了するため、切り替えコストは低く抑えられます。
よくある質問
StackBlitzから一時共有URLへの切り替えはビルド設定の変更が必要ですか?
基本的には不要です。StackBlitzのプロジェクトで`npm run build`を実行してdistフォルダを生成し、ZIPにまとめてギガサイト便にアップロードするだけです。既存のvite.config.jsやwebpack設定を変更する必要はほとんどありません。
切り替えのタイミングを逃して社外にStackBlitzのURLを送ってしまった場合、どう対処すればよいですか?
すぐにStackBlitzのプロジェクトをPrivateに変更してアクセスを遮断します。そのうえで認証付き共有サービスで改めてURLを発行し、旧URLが無効になったことをレビュアーに通知してください。今後は社外共有の前にサービス切り替えを標準手順として定めることを推奨します。
StackBlitzで動くSPAを静的HTMLとしてエクスポートできないプロジェクトはどうすればよいですか?
APIサーバーへの依存や動的ルーティングがある場合、静的エクスポートが難しいケースがあります。その場合はVercelやCloudflare Pagesにデプロイして認証はCloudflare Access、またはVercelのPassword Protectionを利用する構成が代替として有効です。