CodeSandboxとGitHubを連携する

Page content

CodeSandboxとGitHubを連携する方法はいくつかあります。主な連携方法は以下の通りです。

1. GitHubリポジトリからサンドボックスを作成する

CodeSandboxは、既存のGitHubリポジトリをインポートして、すぐに開発可能なサンドボックス環境として開くことができます。

  1. CodeSandboxを開く: CodeSandboxのウェブサイトにアクセスします。
  2. 「Import Project」または「Create Sandbox」から選択:
    • ダッシュボードの左側にある「Create Sandbox」をクリックし、「Import GitHub Project」を選択します。
    • または、新しいサンドボックスを作成する際のオプションとして「Import from GitHub」を選択します。
  3. GitHubリポジトリのURLを入力: インポートしたいGitHubリポジトリのURL（例: https://github.com/your-username/your-repo）を入力し、「Import」をクリックします。
  4. サンドボックスとして開かれる: リポジトリがCodeSandboxにインポートされ、開発環境としてすぐに利用できるようになります。

2. サンドボックスをGitHubリポジトリにエクスポートする（新規作成）

CodeSandboxで作成したサンドボックスを、新しいGitHubリポジトリとしてエクスポートすることができます。

  1. CodeSandboxでサンドボックスを開く: エクスポートしたいサンドボックスを開きます。
  2. 「File」メニューから「Export to GitHub」を選択: エディタ画面の左上にある「File」メニューをクリックし、「Export to GitHub」を選択します。
  3. GitHubアカウントの認証: まだ認証していない場合は、CodeSandboxがGitHubアカウントへのアクセスを要求します。指示に従って認証します。
  4. リポジトリ情報の入力: 新しく作成するGitHubリポジトリの名前、説明、プライベート/パブリックの選択などを行い、「Create Repository」をクリックします。
  5. リポジトリが作成される: サンドボックスの内容が指定したGitHubリポジトリにプッシュされ、新しいリポジトリが作成されます。

3. サンドボックスを既存のGitHubリポジトリにプッシュする（更新）

既にGitHubに存在するリポジトリに、CodeSandboxで加えた変更をプッシュすることができます。これは、GitHubリポジトリからサンドボックスを作成した場合に特に便利です。

  1. CodeSandboxでサンドボックスを開く: GitHubリポジトリからインポートしたサンドボックス、または後でGitHubにリンクしたサンドボックスを開きます。
  2. 変更を加える: サンドボックス内でコードを変更します。
  3. 「Source Control」パネルを開く: エディタの左側にある「Source Control」（Gitアイコン）をクリックします。
  4. 変更をコミットしてプッシュ:
    • 変更されたファイルが表示されます。コミットメッセージを入力します。
    • 「Commit & Push」ボタンをクリックします。
    • （初めての場合や設定によっては）GitHubアカウントへの認証が再度求められることがあります。
    • 変更が元のGitHubリポジトリにプッシュされます。

4. GitHub Gistとの連携

CodeSandboxはGitHub Gistとの連携もサポートしています。

  • サンドボックスをGistに保存: 作成したサンドボックスをGitHub Gistとして保存できます。
  • Gistからサンドボックスを作成: 既存のGistをCodeSandboxにインポートしてサンドボックスとして開くことも可能です。

連携のメリット

  • 素早い開発環境の立ち上げ: GitHub上のプロジェクトをすぐに開発可能な状態で開ける。
  • 共有とコラボレーション: CodeSandboxでの作業をGitHubを通じてチームメンバーと共有し、バージョン管理できる。
  • プロトタイピングとデモ: アイデアをCodeSandboxで素早く形にし、GitHubに保存して共有する。
  • 学習と実験: GitHub上のコードを安全なサンドボックス環境で自由に試すことができる。

CodeSandboxは開発ワークフローを効率化し、ブラウザ上での開発体験を向上させる強力なツールですので、GitHubとの連携をぜひ活用してみてください。