GitHub Codespacesでreactの開発環境をつくる!
reactを開発したいけど、ローカルに環境構築するとそのPCでしか開発できない。。。
Dockerはなんか難しそう。。。
ということでGitHub上で開発環境をつくってみました。
この記事の流れ
- GitHub Codespaceって？
- GitHubアカウント作成
- Codespaces申し込み
- リポジトリ作成
- React環境構築
GitHub Codespaceって？
こちらの記事で書いてあるのが分かりやすかったので、ぜひ読んでください。
インターネットがつながるときはCodespacesで開発、つながらないときは事前にローカルのVS Codeにクローンしておいて開発、っていう使い分けができそうです。
Dockerで少し挫けた人間なので、ポートフォワーディング機能が地味に嬉しい。
GitHubアカウント作成
こちらの記事を参考にGitHubアカウントを作成してください。
Codespaces申し込み
こちらからCodespacesの申し込みを行なってください。
僕はCodespacesが使えるようになるまでかなり時間がかかったので、気長に待ちましょう。。。
リポジトリ作成
リポジトリを作成していきます。
GitHubにログインして、ページ右上の自分のアイコンをクリックしYour Repositoriesを押します。
Newを押します。
Repository nameを入力します。今回はreact-sampleと入力しました。
今回はプライベートリポジトリにするため、以下の画像のようにPrivateを選択します。
Add a README fileにチェックを入れます。
それ以外の項目は変更せずにCreate repositoryを押します。
リポジトリの画面に遷移します。Codespacesが使えるようになっていると、Codeを押したら以下のような表示がされるので、Create codespace on mainを押します。
接続が行われます。接続が完了すると自動的に画面が遷移します。
遷移すると、VS Codeで開いた時のような画面が表示されます。
この中でも拡張機能のインストールができるので、日本語化やESLint、Prettier、Reactのスニペットの拡張機能などを入れておくといいでしょう。今回は以下の4つをインストールしました。
React環境構築
ターミナルを開きます。画面左上の三→Terminal→New Terminalを押します。
ターミナル内で以下のコマンドを入力します。今回は{プロジェクト名}にreact-sampleと入力します。
先ほど作成したリポジトリと同じ名前にしてください。
ここではTypeScriptのプロジェクトを立ち上げます。
npx create-react-app {プロジェクト名} --template typescript
create-react-appをインストールするかどうかを聞かれるので、yを入力します。
Need to install the following packages:
create-react-app
Ok to proceed? (y)
create-react-appが終わると、react-sampleというフォルダが作成されます。
react-sampleフォルダ直下のすべてのファイルをreact-sampleフォルダと同じ階層に移動させます。
リポジトリをつくるときにREADME.mdを作成していたので、README.mdを置き換えてよいか聞かれます。置き換えてよいのでReplaceを押します。移動が完了したら、react-sampleフォルダは削除しましょう。
以下のコマンドを入力して実行してみましょう。
npm start
以下のような画面が表示されたら成功です。
codespaceをとじて、再度同じリポジトリを開いてみましょう。
画面左上の三→Go to Repositoryでもリポジトリに戻ることができます。
Codeを押すと先ほど作成したcodespaceがあります。そのcodespaceを選択すると、先ほどのcodespaceが起動します。
新しいcodespaceを作成したい場合はCreate codespace on mainを選択します。
codespaceを停止させたり削除させたりしたい場合はManage allを押します。
最後に
PCにVS Codeがインストールされていれば、そのPCでcodespaceを開くこともできます（画面左上の三→VS Codeで開く）。VS Codeの拡張機能のGitHub Codespacesをインストールするか聞かれたら、インストールしましょう。サインインし、GitHubとGitHub Codespacesの認証を行うとローカルで開くことができます。
Codespaces上でreactの開発環境を作ってみました。個人開発だとメリットは感じられにくいかもしれませんが、チーム開発だと拡張機能とか細かい設定とかを統一できるので便利そうです。それとプロジェクトに新しく参加した人が環境構築に時間をかけずすぐに開発に入れますね。
ぜひCodespaces使ってみてください！👋
Discussion