CodeSandbox(コードサンドボックス)でGitHubアカウントにサインインして作業を行う方法について紹介していきます。
本記事を読んでわかること
- CodeSandboxでGitHubでサインインする方法
- 新しいプロジェクトを開始する方法
- 作成したファイルをGitHubにコミットする方法
CodeSandboxの基本操作を知りたい方は下記の記事を参照してください。
CodeSandboxにGitHubでサインインする
Githubのアカウントを持っていない場合には事前にアカウント作成を済ましてしまいましょう。
GitHubのアカウントを作成したら、CodeSandboxのホーム画面にて右から二番目にある『Sign in』を選択する。
開いたポップアップ画面にて上記の赤枠『Sign in with GitHub』を選択します。
GitHubのアカウント情報(ユーザ名、パスワード)を入力して画面遷移します。
GitHubのアカウント情報を入力してサインインするとGitHub側からCodeSandboxとの接続を承認するかを確認されます。
『Authorize codesandbox』をクリックして承認したら、また画面遷移をするので最後にCodeSandboxでのニックネームを記入したら完了です。
GitHubと連携してリポジトリを作成する
『Create sandbox』で新しいプロジェクトを開始したら画面一番左のリストにGitHubマークがあるので選択します。
『Sign in』ボタンが表示されるので選択しましょう。
すでにGitHubアカウントでログイン済みになっていれば、承認画面が表示されるので『Authorize Codesandbox』を選択します。
これでGitHubと連携することができるようになります。
リポジトリを作成してファイルを管理する
GitHubと既に連携済みとなっていれば画面左のGitHubマークを選択すると下記のような画像の状態となっているはずです。
英語表記で分かりにくいですが、現在作業しているSandboxに対してこちらでリポジトリの作成ができるようになっています。
『Repository name』と記載されているテキストボックスに作成したいリポジトリ名を入力しましょう
上記画像の通り①『Repository name』にリポジトリ名が入力されると、下の②『Create new repository on GitHub』がアクティブな状態となりますのでこちらを選択しましょう。
今回はサンプルとしてCodeSandbox-sampleという名前のリポジトリを作成しました。
上記はCodeSandboxからリポジトリを作成したCodeSandbox-sampleをGitHub上で確認した画面になります。
Github上でもしっかりと作成したリポジトリを確認することができました。
これでGitHub側と交信することができ、現在作業しているSandboxのファイルがGitHub側で管理されるようになり、リポジトリを作成することができます。
更新したファイルをGitHubにコミットする
CodeSandboxで実際に修正したファイルをGitHubにコミットしていきます。
最初に画面左側にあるGitHubマークを選択します。
すると、リポジトリを作成した直後は下記の画像のような状態となっているはずですので、『Fork』を選択しましょう。
そうすると『Link Sandbox』と表示されるのでこちらも選択します.
これで画面が切り替わり、下記の状態となります。
Changes(0)と記載されウィンドウの中も『No changes』となっていますね。これは現在のSandboxで変更がない状態となります。ですのでコミットできるファイルがありません。
それでは実際に適当なファイルを修正して更新した内容をコミットしてみましょう。
今回はindex.htmlファイルにPタグを追加して『Hello World』というとてもベタな内容を追記しました。
ファイルが更新されると先ほどのウィンドウは下記のような状態となります.
Changes(0)と記載されていた部分がChanges(1)となっており、ウィンドウの中も修正したファイル名と何やら記述できるテキストボックス、Commitボタンと赤字で『Please insert a summary』と表示されています。
指示通りにサマリーをテキストボックスの『Summary(required)』部分に記入しましょう。
そうすることで画像の通りに『Commit changes』ボタンがアクティブな状態となります。
このボタンをクリックすることでGitHubにコミットを行うことができます。
実際にGitHub上で確認した画面が下記の画像となります。
先ほどサマリー部分に追記した内容が反映されているのがわかります。これでGitHubの更新をすることができました。
余談ですが、コミット時に下記の二点についてチェックボックスがありました。
- Commit directly to the main branch
- Create branch csb-lozopr for the commit and start a PR
1．はmainブランチ(古い呼び名だとmasterブランチ)にコミットをすることを意味しています。
2．はコミット用のブランチを作成してそちらにコミットすることを意味しています。
それぞれの用途に合わせて使い分けをするようにしましょう。
