CodeSandbox

Page content

CodeSandbox で作成したコードのデプロイ先は、いくつかの選択肢があります。CodeSandbox 自体がデプロイ機能をいくつか提供しているほか、一般的なデプロイサービスにエクスポートして利用することも可能です。

主なデプロイ先と方法を以下に示します。

  1. CodeSandbox Projects (Vercel Integration) CodeSandbox の最も統合されたデプロイ方法は、CodeSandbox Projects を介した Vercel へのデプロイです。

    • 特徴: CodeSandbox のプロジェクトページから直接デプロイでき、Vercel の強力なインフラを利用できます。Git リポジトリへの接続も簡単で、CI/CD パイプラインを構築することも可能です。
    • 手順:
      1. CodeSandbox でプロジェクトを開きます。
      2. 左側のサイドバーにある「Deploy」または「Vercel」アイコンをクリックします。
      3. 画面の指示に従い、Vercel アカウントと連携し、デプロイ設定を行います。
      4. Git リポジトリにプッシュすると、自動的にデプロイされるように設定することもできます。

  2. Netlify Vercel と並んで人気のあるホスティングサービスで、CodeSandbox からも簡単にデプロイできます。

    • 特徴: 無料プランが充実しており、高速なCDN、HTTPS、フォーム処理など、多くの機能を提供します。
    • 手順:
      1. CodeSandbox プロジェクトを Git リポジトリ（GitHub, GitLab, Bitbucketなど）にエクスポートまたはコミットします。
      2. Netlify にログインし、「New site from Git」を選択します。
      3. 接続したい Git リポジトリを選択し、ビルドコマンドとデプロイディレクトリを設定します（Vite の場合は npm run build または yarn build、デプロイディレクトリは dist が一般的です）。
      4. デプロイを開始します。

  3. GitHub Pages 静的なウェブサイトをホストするのに非常に便利な無料サービスです。

    • 特徴: GitHub リポジトリにコードがあれば、簡単にホスティングできます。個人サイトやオープンソースプロジェクトのドキュメントなどに適しています。
    • 手順:
      1. CodeSandbox プロジェクトを GitHub リポジトリにエクスポートまたはコミットします。
      2. GitHub リポジトリの設定で「Pages」セクションに移動します。
      3. デプロイ元としてブランチ（通常は main または gh-pages）と、ビルドされたコードが存在するディレクトリ（通常は dist）を選択します。
      4. プロジェクトによっては、Vite の base オプションを適切に設定する必要がある場合があります。

  4. Firebase Hosting Google が提供するフルマネージドなホスティングサービスです。

    • 特徴: 静的コンテンツだけでなく、サーバーレス機能（Cloud Functions）やリアルタイムデータベース（Firestore）など、Firebase の他のサービスと連携しやすいのが魅力です。
    • 手順:
      1. CodeSandbox プロジェクトをローカルにダウンロードするか、Git リポジトリにエクスポートします。
      2. Firebase CLI をインストールし、Firebase プロジェクトを設定します。
      3. firebase init hosting コマンドを実行し、デプロイするディレクトリ（通常は dist）などを設定します。
      4. firebase deploy コマンドでデプロイします。

  5. Heroku / Render (バックエンドを含む場合) もし CodeSandbox でバックエンドコード（Node.jsなど）も書いている場合、これらの PaaS（Platform as a Service）が適しています。

    • 特徴: バックエンドアプリケーションを簡単にデプロイ・スケールできます。
    • 手順:
      1. CodeSandbox プロジェクトを Git リポジトリにエクスポートします。
      2. Heroku または Render アカウントを作成し、Git リポジトリと連携してデプロイします。
      3. プロジェクトのビルドプロセスや実行コマンドを適切に設定する必要があります。

デプロイの一般的な流れ:

CodeSandbox から直接デプロイできるのは Vercel が最もシームレスですが、他のサービスを利用する場合は、多くの場合、まず CodeSandbox からコードを Git リポジトリ（GitHubが一般的）にエクスポートする というステップを踏みます。 その後、選択したデプロイサービス（Netlify, GitHub Pages, Firebase Hosting など）で、その Git リポジトリを連携させてデプロイを行うのが一般的な流れです。

どのデプロイ先を選ぶかは、プロジェクトの要件（静的サイトか、動的サイトか、バックエンドが必要か、予算など）によって異なります。

CodeSandboxの使い方は、プロジェクトの種類によって少し異なりますが、基本的な流れは以下のようになります。

1. CodeSandboxにアクセスする

まず、CodeSandboxのウェブサイトにアクセスします。

2. サンドボックスを作成する

CodeSandboxには、主に以下の2種類のサンドボックスがあります。

  • テンプレートから作成する (Create Sandbox from Template):
    • React、Vue、Angularなどの一般的なフレームワークや、Vanilla JavaScript、Node.jsなどのテンプレートが用意されています。
    • 新しいプロジェクトを始める際に便利です。
    • ウェブサイトのトップページにある「Create Sandbox」ボタンをクリックし、使用したいテンプレートを選択します。
    • 例として、Reactのテンプレートを選択すると、基本的なReactプロジェクトが自動的にセットアップされます。
  • GitHubリポジトリからインポートする (Import from GitHub):
    • 既存のGitHubリポジトリをCodeSandboxで開いて、オンラインで編集・実行したい場合に便利です。
    • 「Import from GitHub」を選択し、リポジトリのURLを入力します。
    • もし、package.json がリポジトリのルートにない場合は、適切なサブディレクトリを指定する必要があるかもしれません。

3. エディタの画面構成

サンドボックスを作成すると、以下のようなエディタ画面が表示されます。

  • ファイルエクスプローラー (左側): プロジェクトのファイルとディレクトリが表示されます。ファイルをクリックすると、中央のエディタで開かれます。
  • エディタ (中央): 選択したファイルのコードを編集する場所です。
  • プレビューウィンドウ (右側): コードの変更がリアルタイムで反映された結果が表示されます。ウェブプロジェクトの場合、ブラウザのプレビューが表示されます。Node.jsプロジェクトの場合、コンソールの出力が表示されることが多いです。
  • コンソール / ターミナル (下側): エラーメッセージ、console.log の出力、または任意のシェルコマンドを実行できるターミナルが表示されます。

4. コードの編集と実行

  1. ファイルの編集: ファイルエクスプローラーから編集したいファイル（例: src/App.js）を選択し、エディタでコードを修正します。
  2. 自動プレビュー: ほとんどの場合、コードを保存しなくても変更がリアルタイムでプレビューウィンドウに反映されます。
  3. 依存関係のインストール: package.json に新しい依存関係を追加した場合、CodeSandboxが自動的にインストールします。手動でインストールしたい場合は、ターミナルで npm install や yarn install を実行することも可能です。
  4. ターミナルの利用: 必要に応じて、ターミナルで npm run start や npm test などのコマンドを実行できます。

5. サンドボックスの保存と共有

  • 自動保存: CodeSandboxは通常、自動的に変更を保存します。
  • アカウント登録: 変更を永続的に保存し、後からアクセスしたり、他の人と共有したりするには、GitHubアカウントなどでCodeSandboxにログインすることをおすすめします。
  • 共有: ログインしている場合、サンドボックスのURLを他の人に共有するだけで、その人もあなたのプロジェクトを閲覧したり、フォークして独自のバージョンを作成したりできます。

6. その他の便利な機能

  • フォーク (Fork): 他の人のサンドボックスを自分のアカウントにコピーして、自由に編集できます。
  • ライブ共有 (Live Share): 複数のユーザーが同じサンドボックスをリアルタイムで共同編集できます。
  • デプロイ (Deploy): 一部のサンドボックスは、VercelやNetlifyなどのサービスに直接デプロイすることができます。
  • CodeSandbox Projects (旧Devboxes): より本格的な開発環境で、より多くのリソースやカスタマイズオプションを提供します。

例: Reactプロジェクトの作成と編集

  1. CodeSandboxにアクセスし、「Create Sandbox」→「React」を選択します。

  2. src/App.js ファイルが開かれるので、以下のように編集します。

    import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>こんにちは、CodeSandbox！</h1>
      <h2>編集して、リアルタイムで結果を見てみましょう！</h2>
    </div>
  );
}

  3. 右側のプレビューウィンドウに、「こんにちは、CodeSandbox！」と表示されることを確認します。

  4. src/styles.css を編集して、見た目を変更することもできます。

このように、CodeSandboxはブラウザ上で手軽に開発を始められる非常に便利なツールです。