Github CodespacesでReactの開発環境を構築する！
GitHub CodespacesはGitHubが提供するクラウドベースの統合開発環境(IDE)です。
https://github.co.jp/features/codespaces
GitHubリポジトリ内で直接コードを編集したり、ビルド、デバッグすることができます。
本記事ではGitHub Codespacesを利用したReactの環境構築方法をご紹介します。
GitHubでCodespacesを起動する
GitHubにアクセスし、Codespacesを起動します。
今回ReactのインストールはCodespaces上で行うので、Blankのテンプレートを選択します。
しばらくすると、VisualStudioCodeがブラウザ上で起動します。
では、VSCode上でReactをインストールしていきましょう。
Reactをインストールする
起動しているVSCodeのターミナルでReactをインストールします。
npx create-react-app
create-react-appをインストールするか確認されるので、yを入力し実行します。
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y
Happy hacking!というメッセージがターミナル上に表示されていればインストール完了です。
では、Reactプロジェクトを起動してみましょう。
npm start
下記画面が表示されていれば無事成功です。(別タブで表示されます。)
試しに、Learn Reactの部分を書き換えてみましょう。
ソースを書き換え、画面をリロードすることで変更が反映されていることが分かります。
リポジトリを作成する
現時点ではただアプリケーションを実行しているだけの状態で、開発環境を削除すればこれらのコードは消えてしまいます。
Gitのリポジトリを作成し、コミット(保存)する方法をご紹介します。
左側のメニュー欄からソース管理を選択し、Branchを発行します。
リポジトリ名は自由に決めて問題ないです。
今回はreact-sampleという名前のリポジトリを作成します。
右下に以下のメッセージが表示されれば成功です。
Codespacesをエディタで起動する
インストール済みのVSCodeでCodespacesを利用することも可能です。
先程作成したリポジトリの3点メニューから、Oprn in Visual Studio Codeを選択します。
起動後は上記と同様、npm startの実行で画面を起動できます。
GitHub Codespacesの使用率を確認する
GitHub Codespacesは無料で使用できるストレージとコア時間の使用量が決められています。
コア時間とは、例えば2コアの環境を1時間使用すると2コア時間の使用量となります。
(Blankのcodespaceは最小の2コア環境で起動します。)
使用率を確認するにはSettingsを開き、Billing and plansのPlans and useageを選択します。
Codespacesの使用率が表示されていますね。
使用率が75%、90%、100%になると、それぞれメールで通知されます。
使用制限の設定を構成していない場合、使用率が100%を超えるとCodespacesの使用がブロックされるので注意しましょう。
終わりに
ご覧いただきありがとうございました。
筆者は初めてCodespacesを利用しましたが、ストレスなくサクサクと環境構築ができました。
これから開発を始める方の手助けになれば幸いです。