できること
CodeSandboxのプレビューURLは、ログイン不要で即座にUIの動作確認ができる手軽さが強みです。ReactやVueのコンポーネントがそのまま動くため、静的HTMLだけでは伝わらないインタラクションのレビューを社内で行うには最適です。URLを送るだけで確認が始まり、開発者はコードを修正しながらその場でフィードバックを受け取れます。
特定のUIパターンやアニメーションをデモとして誰かに見せる場合にも、CodeSandboxは有効です。コードとプレビューが同画面に表示されるため、技術者同士のコードレビューで「この動作になっている理由はこのコードです」と同時に提示できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
できないこと
CodeSandboxにはURLに対する認証機能がありません。PublicプロジェクトはURLを知っていれば誰でも閲覧でき、Privateにすると招待者しか見られなくなります。「パスワードを知っている人だけ」「指定のメールドメインの人だけ」という中間的な制御が存在しないため、社外向けのアクセス管理ができません。
期限設定もできないため、プロジェクトを手動でPrivateにするまでURLが有効なままです。案件が終了してもURLが残り続けると、古いデザイン案が後から参照されてクライアントとの混乱につながります。また、複数案件で同様の状況が重なると管理の手間が増大します。
認証と期限の違い
CodeSandboxの認証不足を補う手段は状況によって異なります。最も手軽なのはビルド済みHTMLをギガサイト便にアップロードしてパスワード付きURLを発行する方法です。パスワードをメールやSlackで別送することで、URLが流出しても正規パスワードなしではアクセスできません。より厳格な制御が必要な場合はメール認証またはドメイン認証を利用します。
期限管理の補完としてはカレンダーリマインダーによる手動対応が即席の解決策ですが、案件数が増えると限界があります。認証付き共有サービスで期限を設定しておけば、リマインダーを忘れても自動でURLが失効します。「レビュー依頼から7日後に自動失効」という設定を習慣にすることで、期限切れURLの管理コストをゼロにできます。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
差し替え・レビュー運用
CodeSandboxの不足を補う現実的な運用は、開発はCodeSandboxで継続しながら共有フェーズだけギガサイト便を使う分業です。修正が完了するたびにビルドしてZIPをアップロードし、同URLで差し替えます。レビュアーは同じURLをブックマークしておけば、常に最新版を確認できます。
共有時のメッセージには「①確認してほしい観点」「②返信期限」「③返信先」の3要素を含めます。観点を絞ることでレビュアーの確認コストが下がり、フィードバックの精度が上がります。最終承認を得た版は共有サービス上でラベルを付けて区別し、途中版は期限切れで自動的に失効するように設定すると版管理が整理されます。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
向いているケース早見表
CodeSandboxをそのまま共有に使えるのは、対象者が社内技術者のみで、コンテンツが公開情報または機密性がない場合です。OSSのデモ、社内勉強会のコードサンプル、技術記事の埋め込みなどでは認証・期限は不要です。
認証・期限の両方が必要になる典型的な場面は、未発表サービスのUIレビュー、採用候補者に見せない前提のデザイン案確認、価格改定前のLPのクライアント確認などです。これらは共有段階の最初からギガサイト便を使うことで、後から対処する手間を省けます。CodeSandboxの開発環境は変えず、共有手段だけを変えるのが最もコストの低い解決策です。
よくある質問
CodeSandboxのプロジェクトをPrivateにしてしまうと既存の共有URLはどうなりますか?
Privateに変更すると、招待されていないユーザーがURLにアクセスした場合にアクセス拒否になります。以前に共有したURLを開いても内容が見られなくなるため、既存レビュアーへの事前告知が必要です。新たな共有URLを発行して引き継ぐ手順を踏んでください。
CodeSandboxのビルド成果物をギガサイト便にアップロードするときに注意すべき点は何ですか?
画像やフォントの参照パスが絶対パスになっていないか確認してください。相対パスであれば問題ありませんが、`/assets/logo.png`のような絶対パスはルートパスの違いで画像が表示されないことがあります。また、外部APIへのリクエストにCORSエラーが出ないかビルド後に確認しておくと安心です。
認証付き共有サービスへの切り替えを開発チームに提案するにはどう説明すればよいですか?
「CodeSandboxのURLは誰でもアクセスできる状態で、期限切れ後も有効なまま残る」というリスクを具体的に説明します。「1本の案件で発生する運用コストは数分だが、情報漏えいが発生した場合の影響は取引先との信頼損失に直結する」という観点でコスパを示すと、採用への合意を得やすくなります。