CodeSandboxを使って爆速でReactを実行、音速でGithub連携

# はじめに
こんにちは！しばらく投稿が空いてしまいました。。。はりきっていきましょう！
今回は、CodeSandboxを使って手軽にReactで開発を始める方法について紹介したいと思います。

# 対象者
- Javascriptのフレームワークを勉強している方
- 手軽にReactを実行できる環境が欲しい方
- CodeSandboxについて知りたい方
- CodeSandboxとGithubの連携方法について知りたい方

# 目次
1. CodeSandboxとはなにか
2. CodeSandboxで爆速で開発を始める方法
3. Githubとの連携方法
4. CodeSandboxでコードを変更してGithubに反映させる方法

# 1. CodeSandboxとはなにか
CodeSandboxは、簡単に言うとWeb上で利用できる統合開発環境です。数ステップで登録が完了し、開発環境をローカルに用意せずとも、エディタ＋実行環境を用意できるため、学習などの目的には有益な手段と言えます。※会員登録しなくても使えます！

# 2. CodeSandboxで爆速で開発を始める方法

### 実際にCodeSandboxで開発をはじめるまでの手順を紹介

１：まずは、CodeSandboxにアクセスします。
https://codesandbox.io/

２：アクセス後、画面をスクロールして、”</> Start cording for free”ボタンを押下します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/d2798c7d-ac72-64ab-b854-2f8b4d786351.png)

３：言語メニュから、Reactを選択（他のフレームワークでも可）します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/76a5978a-251f-8ca4-3a9a-667fe33d5d3f.png)


４：Reactのソースコード(左手)と、コードの内容が反映されるブラウザ(右手)が表示されます。
![4.5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/11e1742a-d806-b980-0a90-b76258c627b5.png)




５：試しにソースコードを書き換えてみます。
&lt;h2&gt;タグを行ごと削除し、&lt;h1&gt;タグの中身を以下のように書き換えると、右側のように変更が反映されます。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/14151e01-df5c-b381-6a6c-fa5fb819be04.png)

以上で、ほんの数クリックでReactを試すことができました！


### CodeSandboxを使うメリット
1. 開発をはじめるまでの工数が圧倒的に少ない
本来であれば、Reactの開発環境を整える場合、エディタを用意したり、コマンドを叩いたり、サーバを起動したり・・と、開発するまでには幾つかのステップがありますが、それらを一掃し、数クリックで開発が可能です。

2. 開発環境とブラウザのURLを他人と共有できる
学習という目的を考えると、他人とURLをすぐに共有し、内容の確認ができのは有益だと思います。（例えばコードを見てもらいたい時など）

3. 実は会員登録すらいらない
これも大きいなメリットの1つだと思います。本章で説明したように数クリックで使えますし、すぐ試したいことがあるときなどパスワードを考えたり、2段階認証とか会員登録のステップってだるいですよね。

4. Githubと連携できる
Githubと連携することで、試したコードを管理できます。学習したものを手軽にgithubで管理できるようになったことで、CIを簡単に行うことができ、また、他の人のコードを手軽に試したりできます。

5. 扱っているフレームワークが豊富
React以外のJavascriptのフレームワークも使うことができます。2022年11月時点ですと、使い方の手順で記載した写真のラインナップです。

# 3.Githubとの連携方法

続いてGithubとの連携方法をご紹介します。
前提条件として、GithubとCodeSandboxへの登録は、ここでは紹介しないので済ませておいてください。

### Githubとの連携手順

1. Githubのアカウントを使ってSign inします。
![5_sign_in_to_github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/487872da-d94c-6d7e-0c1c-0696063d97c4.png)

2. これをGithubのリポジトリで管理できるようにします。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/20c156d6-636d-f6f5-78ca-49657b552bca.png)

3. CodeSandboxの左側のバーにあるGithubのマークをクリックすると以下のような画面がでてくるので、リポジトリ名を入力します。私は、try_CodeSandboxとしました。次に、Create new repository on GitHubを押下します。
![7_make_repo_name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/0d3bda10-e206-7b39-713b-cb85ee41ebcb.png)

4. これでGithubとCodeSandboxの連携が完了しました。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/0539e42d-ea52-9868-4916-92239974e984.png)

5. Githubで連携できているか確認してみると、以下のようにしっかりとリポジトリが作成されていました。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/34fece5f-085f-3686-dd0b-d19f969422e5.png)

6. 手順4の画面でコードを書き換えてcommitすることでGithubに変更を反映できます。
![11_githubと連携している状態のcodesandboxで変更を見てみる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/20f4111c-81f1-4fc3-0e3f-ba6f01c539d9.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/56a371c8-7591-e19c-7919-abaeb662f48e.png)

これで、GithubとCodeSandboxの連携が完了しました！

# 4.CodeSandboxでコードを変更してGithubに反映させる方法

最後に、CodeSandboxでの変更をリポジトリに同期させたいと思います。

1. Githubのレポジトリを開いて、Created with CodeSanbboxの下にあるurlを押下し、リポジトリをforkします（githubと同期された状態でfork）。
![12_①githubからfork.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/50f8cfdf-039d-cef2-3f36-40f2b51335b5.png)

2. fork後、CodeSandboxに遷移します。
![13_②fork後の画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/9d5c55f7-0390-dcd3-7f58-468668eb389c.png)

3. 変更を加えるとUIが変わるので、Githubのマークから、Link Sandboxを押下してリンクさせます。
![14_③変更してlinkさせる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/6c3763cb-d093-66ac-2f45-cd3ea3d6634c.png)

4. Githubでのcommitと同様にcommit時のメッセージを入力後、Commit changesを押下します。
![15_④コミット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/a74952bc-5c72-54b3-955f-a79c07329e6d.png)

5. Githubで変更が反映されているかを確認できました。
![16_⑤githubでコミット確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/c40e39be-b1ce-b4f3-994c-2e9ecb7b6ea0.png)

以上で、CodeSandboxでの変更をリポジトリに同期することができました！

# おわりに
- タイトル通り爆速でReactを実行して、音速でGithubに連携できたかと思います。
- 爆速と音速ってどっちが速いんだろう。。
- それでは！