LoginSignup
2

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-11-20

はじめに

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

対象者

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

目次

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

1. CodeSandboxとはなにか

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

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

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

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

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

3:言語メニュから、Reactを選択(他のフレームワークでも可)します。
2.png

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

5:試しにソースコードを書き換えてみます。
<h2>タグを行ごと削除し、<h1>タグの中身を以下のように書き換えると、右側のように変更が反映されます。
4.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

  2. これをGithubのリポジトリで管理できるようにします。
    6.png

  3. CodeSandboxの左側のバーにあるGithubのマークをクリックすると以下のような画面がでてくるので、リポジトリ名を入力します。私は、try_CodeSandboxとしました。次に、Create new repository on GitHubを押下します。
    7_make_repo_name.png

  4. これでGithubとCodeSandboxの連携が完了しました。
    8.png

  5. Githubで連携できているか確認してみると、以下のようにしっかりとリポジトリが作成されていました。
    9.png

  6. 手順4の画面でコードを書き換えてcommitすることでGithubに変更を反映できます。
    11_githubと連携している状態のcodesandboxで変更を見てみる.png
    10.png

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

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

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

  1. Githubのレポジトリを開いて、Created with CodeSanbboxの下にあるurlを押下し、リポジトリをforkします(githubと同期された状態でfork)。
    12_①githubからfork.png

  2. fork後、CodeSandboxに遷移します。
    13_②fork後の画面.png

  3. 変更を加えるとUIが変わるので、Githubのマークから、Link Sandboxを押下してリンクさせます。
    14_③変更してlinkさせる.png

  4. Githubでのcommitと同様にcommit時のメッセージを入力後、Commit changesを押下します。
    15_④コミット.png

  5. Githubで変更が反映されているかを確認できました。
    16_⑤githubでコミット確認.png

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

おわりに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2