はじめに
こんにちは！キャッチアップ新人アシスタントエンジニアの大塚です。 入社してから早いものでもう半年。正直、まだ入社したのが昨日のことのように感じています。
そんな私が今回、GitHub Codespacesを紹介しようと思ったきっかけは、入社当初に先輩方に誘っていただいたハッカソンにあります。
ハッカソンといえば「仲間と集まり、短期間で集中してプロダクトを作る」企画ですが、今回は丸1日という超タイトなスケジュールでした。そこで白羽の矢が立ったのが、面倒な環境構築なしで爆速で開発を始められるCodespacesでした。
結果として、CodespacesとAIアシスタントの力を借りることで、当時「エンジニアレベル01」だった私でも、なんとか無事にアプリを形にすることができました。
そこで今回は、同じような駆け出しエンジニアの皆様へ、Codespacesの魅力と開発の流れ（今回はTodoListを作ります！）を紹介させて頂こうと思います！
そもそもGitHub Codespacesとは？
GitHubが用意してくれたクラウド上の開発環境です。
GitHub Codespacesの魅力
- ブラウザ上で開発： Chromeなどのブラウザさえあれば簡単に開発出来ます。極端な話、iPadでも開発できます！
- 複雑な環境構築不要： そもそもの開発開始前の環境構築の時点で過去に挫折した人でも、Codespacesが予め用意してくれたテンプレート＋AIアシスタントの使用でサクッと開発できてしまいます！
- PCのスペックを選ばない： 重い処理はクラウド側でやってくれるので、低スペックなノートPCでもサクサク動きます。
- 月60時間は無料： 小規模な個人開発なら、すぐには使い切らないくらいの無料枠があります。特に開発を始めてみたい初心者にはピッタリの環境です。
実際にCodespacesを使用してToDoアプリを作ってみましょう！
いきなりアプリ開発って初心者にはやっぱりハードルが高いんでは？と不安に思った方も大丈夫です！
「Codespacesのテンプレート×AIアシスタント」の組み合わせを使用すればしっかり開発できちゃいます！
今回は「Reactのテンプレート×GitHub Copilot Chat（標準搭載）」を使用して開発してみましょう！
①Reactテンプレートを自分のリポジトリにコピーする
まずはCodespacesのテンプレートページへ。
ここで Reactテンプレートの「Use this template」 をポチっとすれば、プロが作った「React開発に必要な初期設定」が、自分のリポジトリ（アプリ専用のフォルダのようなもの）に一瞬で丸ごとコピーされます。
（２ウィンドウ横に並べて見かけを確認しながら開発を進めるのをお勧めします！）
右端上の青い箇所①をクリックするとAIチャット（Codespaces標準搭載のGitHub Copilot Chat）を開くことができ、青い箇所②のチャットスペースでAIアシスタントと会話できます。
②AIアシスタントにコーディングを丸投げする
以下の画像のように、チャットスペースからAIに以下の例のようにコーディングをお願いしてみましょう！
（例）Reactを使って、おしゃれなデザインのToDoアプリを1から作って。コードの解説もお願い！
③フロントページを確認→AIの書いたコードを保持して適用
もしそのコーディングでよければ赤で囲った箇所の「保持」ボタンを押してコードを適用させましょう！元に戻したい場合は、「元に戻す」のボタンを押しましょう。コードごと確認して適用させた場合は、青い箇所の「保持」ボタンをひとつずつ押しながら適用させましょう。
もし更に変更を加えたい場合は、AIアシスタントにチャットで追加リクエストしましょう！
どうでしたか？意外と簡単と思っていただけたら嬉しいです！
開発初心者の方でも、一度アプリ開発の成功体験を通すことで次のステップに繋がるキッカケになればと思います！
baserCMSやWebサイト構築のご相談など
お気軽にお問い合わせください
