CodeSandboxをGitHubと連携してみた

2021.10.12

こんにちは、CX事業本部 IoT事業部の若槻です。

CodeSandboxは、Webアプリの作成と共有を迅速に行うことができるオンラインコードエディターおよびプロトタイピングツールです。

今回は、CodeSandboxをGitHubと連携してみました。

GitHubとのIntegration作成

GitHubとのIntegration(連携)を作成します。

CodeSandboxにサインインしたら、メニューから[Preference]を選択します。

[Integration]タブでGitHubの[Sign in]をクリックします。

CodeSandboxがGitHubへのアクセス権限をリクエストするページが開くので[Authorize codesandbox]をクリックして承認します。

元のページに戻るとGitHubがサインイン済みとなりました。

GitHubへのサンドボックスのエクスポート、連携

適当なサンドボックスを開き、[GitHub]タブを開くと[Export to new GitHub repository]というメニューがあります。

適当なリポジトリ名を指定し、[Create nwe repository on GitHub]をクリックします。

リポジトリ作成とエクスポートが完了しました。GitHubへのエクスポートを行うと、リポジトリ上のコードを参照する新しいサンドボックスが作成されるようです。

この形式のサンドボックスをGitHub sandboxというようです。

連携しているGitHubアカウントを確認すると、対応するパブリックリポジトリが作成されていました。

CodeSandboxからGitHubへのエクスポートを行うことにより、このサンドボックスは同期状態となりました。

サンドボックスでの変更をリポジトリに同期する

Tipsによると、CodeSandbox側の変更を同期する場合はフォークをする必要があるとのことです。

This Sandbox is in sync with main on GitHub. You have to fork to make changes

コードに変更を加えて、[Fork]をクリックします。

すると新しいサンドボックスが作成されました。[GitHub]タブを開くと、[Link to GitHub repository]メニューがあります。Tipsを読むと先程のリポジトリ(cm-rwakatsuki/csb-test)にサンドボックスをリンクすることによりコミットの作成およびPull Requestを開始できるとのことです。

If you wish to contribute back to cm-rwakatsuki/csb-test, you can link this sandbox to the GitHub repository. This will allow you to create commits and open pull requests with this sandbox.

[Link Sandbox]をクリックします。

サンドボックスがリポジトリとリンクされました。またリポジトリのmainブランチにコミットを直接作成するか、Pull Requestを開始するかのメニューが現れました。GitHubコンソールでもよく見るやつですね。

コメントを記述して、[Commit changes]をクリックします。

変更がすべて同期されました。

GitHub側を見るとちゃんとコミットが追加されていますね。

おわりに

CodeSandboxをGitHubと連携してみました。

CodeSandboxのコードをGitHubで管理することにより、コードの継続的な改善が簡単に行えたり、また他の人のサンドボックスに対するPull Requestが出せるようになったりと、CodeSandboxのエコシステムをより一層強化することができそうです。

参考

以上