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

Last updated at 2022-11-20Posted at 2022-11-20

はじめに

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

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

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

２：アクセス後、画面をスクロールして、”> Start cording for free”ボタンを押下します。

３：言語メニュから、Reactを選択（他のフレームワークでも可）します。

４：Reactのソースコード(左手)と、コードの内容が反映されるブラウザ(右手)が表示されます。

５：試しにソースコードを書き換えてみます。
<h2>タグを行ごと削除し、<h1>タグの中身を以下のように書き換えると、右側のように変更が反映されます。

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

開発をはじめるまでの工数が圧倒的に少ない
本来であれば、Reactの開発環境を整える場合、エディタを用意したり、コマンドを叩いたり、サーバを起動したり・・と、開発するまでには幾つかのステップがありますが、それらを一掃し、数クリックで開発が可能です。
開発環境とブラウザのURLを他人と共有できる
学習という目的を考えると、他人とURLをすぐに共有し、内容の確認ができのは有益だと思います。（例えばコードを見てもらいたい時など）
実は会員登録すらいらない
これも大きいなメリットの1つだと思います。本章で説明したように数クリックで使えますし、すぐ試したいことがあるときなどパスワードを考えたり、2段階認証とか会員登録のステップってだるいですよね。
Githubと連携できる
Githubと連携することで、試したコードを管理できます。学習したものを手軽にgithubで管理できるようになったことで、CIを簡単に行うことができ、また、他の人のコードを手軽に試したりできます。
扱っているフレームワークが豊富
React以外のJavascriptのフレームワークも使うことができます。2022年11月時点ですと、使い方の手順で記載した写真のラインナップです。

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

Githubのアカウントを使ってSign inします。
これをGithubのリポジトリで管理できるようにします。
CodeSandboxの左側のバーにあるGithubのマークをクリックすると以下のような画面がでてくるので、リポジトリ名を入力します。私は、try_CodeSandboxとしました。次に、Create new repository on GitHubを押下します。
これでGithubとCodeSandboxの連携が完了しました。
Githubで連携できているか確認してみると、以下のようにしっかりとリポジトリが作成されていました。
手順4の画面でコードを書き換えてcommitすることでGithubに変更を反映できます。

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

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

Githubのレポジトリを開いて、Created with CodeSanbboxの下にあるurlを押下し、リポジトリをforkします（githubと同期された状態でfork）。
fork後、CodeSandboxに遷移します。
変更を加えるとUIが変わるので、Githubのマークから、Link Sandboxを押下してリンクさせます。
Githubでのcommitと同様にcommit時のメッセージを入力後、Commit changesを押下します。
Githubで変更が反映されているかを確認できました。