GitHub Codespacesでクラウド開発環境構築
本章では、Github Codespacesを使った開発環境のセットアップを行います。本章の内容を終えると、ブラウザ上でコードを書ける環境が整います。
開発環境の複雑さを解決するクラウドアプローチ
従来のプログラミング学習では、まず開発環境の構築で挫折する人が多くいました。
Python、Node.js、各種ライブラリのインストール、パスの設定、バージョン管理。これらの作業は、OSによって手順が異なり、一つのミスでシステム全体が動かなくなることもありました。また、複数のプロジェクトを同時に進めると、バージョンの競合や環境汚染が発生し、経験豊富なエンジニアでも困ることがありました。
ブラウザベースの開発環境は、これらの問題を根本的に解決します。
パソコンには何もインストールしません。Webブラウザさえあれば、すぐにプログラミングが始められます。Windows、Mac、Chromebookのどれでも同じように動作し、設定を間違えてもローカル環境に影響しません。
さらに驚くべきことに、この環境は世界中のエンジニアが実際に使用しているものと同じです。GitHub Codespacesは、オープンソースプロジェクトの開発者や企業のエンジニアチームでも活用されています。
あなたは今、最新のクラウド開発環境を使って、プロと同じツールでバイブコーディングを学ぶことができます。
スターターテンプレートのフォークとCodespaces起動
実際にクラウド開発環境を起動してみましょう。
まず、本書で使用するNext.jsスターターテンプレートを取得します。https://github.com/squadbase/nextjs-claude-code-starterにアクセスしてください。このテンプレートには、基本的なNext.jsアプリケーションの構成が含まれています。
テンプレートリポジトリのページで、右上にある「Fork」ボタンをクリックしてください。フォークとは、他の人のリポジトリをあなたのアカウントにコピーすることです。これにより、元のリポジトリに影響を与えることなく、自由に変更を加えることができます。
フォークが完了すると、あなたのアカウントにリポジトリが作成されます。このリポジトリのページで、緑色の「Code」ボタンをクリックし、「Codespaces」タブを選択し、「Create codespace on main」をクリックして下さい。
クリックすると、クラウド上に開発環境が構築されます。初回起動時は2-3分かかりますが、必要なソフトウェアとライブラリが自動的にインストールされます。
起動が完了すると、ブラウザ上にVS Code（Visual Studio Code）のWebインターフェースが表示されます。これは、世界中のエンジニアが使用している人気のコードエディターです。
左側のファイルエクスプローラーには、プロジェクトのファイル一覧が表示されます。中央のエディター部分では、コードの編集を行います。下部のターミナルでは、コマンドの実行ができます。
実践演習 - Next.jsの初回実行
実際にコマンドを実行して、Next.jsアプリケーションを起動してみましょう。通常、開発を行う際には以下の2つのステップが必要です。
-
プロジェクトの依存関係をインストール: プロジェクトを動かすために必要な「部品（ライブラリ）」をまとめてインストールします。ターミナルから、
npm installコマンドを実行することでインストールできます。 -
開発サーバーの起動: ターミナルから、
npm run devコマンドを実行することで開発サーバーを起動できます。
それではアプリケーションを起動してみましょう。以下のコマンドをウィンドウ下部のターミナルに入力し、エンターキーを押して実行します。
npm run dev
アプリケーションの実行を停止したい場合は、コマンドを入力するターミナル画面で Ctrl+C を押してください。次章へ進む前に一度、Ctrl+Cでアプリケーションを停止しておきましょう。
振り返りと次のステップ
ここまでの作業で、ローカル環境への複雑なインストール作業をせずに、ブラウザ上でコードを書ける環境が整いました。
今回完了した項目：
- GitHub Codespacesでの開発環境起動
- Next.jsアプリケーションの初回起動
次章では、Claude Codeを使ってコードの理解を深めます。ターミナルへの恐怖心を克服しながら、AI開発パートナーとの対話を通じてプログラミングを進めていきます。