GitHubとは？
GitHubは、
世界中の開発者がコードを共有し、
共同作業するためのプラットフォームです。
リポジトリと呼ばれる場所に
ソースコードやプロジェクトファイルを保存し、
他の開発者と協力して編集やレビューを行います。
GitHubアカウントの作成方法については
以下の記事で解説していますので、参考にしてみてください！
GitHub Codespacesとは？クラウド上で動作する統合開発環境（IDE）
統合開発環境（IDE）を使うことにより、
開発者はローカルマシンに
複雑な開発環境をセットアップすることなく、
ブラウザから直接開発を開始できます。
GitHub上のリポジトリとシームレスに連携しており、
コードの編集、実行、テストなどをクラウド上で行うことが可能です。
本ブログで扱っていく
Next.jsのソースコードも基本的には
GitHub Codespacesで開発していこうと思います。
GitHub Codespacesのメリット
クラウド上で動作する利便性
GitHub Codespacesは
ローカルマシンに依存しないため、
どのデバイスからでも開発環境にアクセスできます。
例えば、ノートパソコンやタブレットでも
クラウド上で実行されるため、
高性能なデバイスがなくても開発を行うことができます。
開発環境の高速セットアップ
通常、
プロジェクトを始める際には、
ローカルマシンに必要なソフトウェアや
ツールをインストールする必要がありますが、
GitHub Codespacesなら、
あらかじめ構築された開発環境を即座に使い始めることができます。
環境の統一化
チーム全体で同じ環境を使えるため、
個々の開発者が異なる環境を使って生じる
「動く／動かない」問題を解決できます。
特にリモートワーク時や大規模プロジェクトで非常に便利です。
GitHubアカウントの作成
GitHub Codespacesを使うには
GitHubのアカウントが必要ですので
作成しておいてください！基本は無料で使えます。
- GitHub公式サイトにアクセスし、
「Sign up」をクリックします。 - メールアドレス、パスワード、
ユーザー名を入力し、アカウントを作成します。 - 指示に従い、必要な情報を入力すれば、
GitHubアカウントが作成されます。
詳しい手順は
以下の記事でも解説していますので、ご参照ください！
リポジトリとCodespacesの作成
リポジトリの作成方法
リポジトリは以下の記事で作った「nextjs-sample-web」を使います。
リポジトリがないとCodespaceを起動できないので
事前に作っておいてください！
Codespacesの作成手順
- リポジトリのページに移動し、
「Code」ボタンをクリック。 - 「Codespaces」タブを選択し、
「Create codespace on main」をクリックします。 - 数分でCodespaceが立ち上がり、
ブラウザ上で開発環境が利用可能になります。
以下のような画面になれば作成完了です！
GitHub Codespacesの使い方
Next.jsのアプリを作成する
GitHub Codespacesを作成できたら、
Next.jsのアプリを作ってみましょう！
必要なnodeやnpxなどは既に使えるようになっているので
あとは下記のコマンドを実行するだけです！IDE便利ですね！
npx create-next-app@latest --typescript本ブログではTypescriptを使いますので
そのオプションも指定しています。
コマンドを実行すると色々と質問されますが、
最初はyで答え、その後も全てデフォルトで進めます。
以下のようにアプリ(my-app)が作成されたらOKです！
フォルダやファイルがいくつか作成されています。
Next.jsのアプリを起動する
アプリを作成できたら、
まずはアプリを起動して、
その後、ファイルを編集してみましょう！
cdコマンドでアプリのフォルダに移動して
cd my-app
npm run devコマンドでアプリを起動します。
npm run dev起動すると、ブラウザで開くか？聞かれるので、
「Open in browser」を押しましょう。
別タブでNext.jsのアプリが開きます！
これでCodespacesだけでアプリ開発して
ブラウザでの確認ができます！便利！
別タブでNext.jsの初期ページが表示されます。
アプリを起動できたら
少しページを変更してみましょう。
Codespace内では、
Visual Studio Code（VS Code）と
同じようにファイルを編集できます。
ファイルをダブルクリックするとエディタが開き、
コードを編集できます。
ここではpage.tsxを編集します。
ここに「<li>Cali Codeへようこそ！</li>」を追加します。
<li>Cali Codeへようこそ！</li>追加して保存すると
Next.jsのCompileが自動で走るので、
ページが自動更新されます！素敵ですね！
以下のようになっていればOKです！
ソースコードをコミットする
せっかくなので、
変更をGitHubのリポジトリにコミットしておきましょう。
赤枠の「Source Control」からコミット用のメニューを開きます。
コミットメッセージを入力します。
Commitボタンを押して、
確認が出るのでYESを選びましょう
Sync Changesを押すと
変更がリポジトリに反映されますので
問題なければ押してください！
リポジトリに戻って変更が
反映されたか見てみましょう！
別タブでURLを手入力で戻るなり、
以下のようにCodespacesを選んで戻るなりしてください。
以下の赤枠のリポジトリを
選ぶと戻れます。
こんな感じでさきほど書いた
コミットメッセージの変更が反映されていればOKです！
GitHub Codespacesのカスタマイズ
Dev Containerの設定
CodespaceではDev Containerを利用して、
開発環境をさらにカスタマイズできます。devcontainer.jsonファイルを作成し、
必要な環境設定を行います。
{
"name": "Node.js",
"image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14",
"settings": {
"terminal.integrated.shell.linux": "/bin/bash"
},
"extensions": [
"dbaeumer.vscode-eslint"
]
}VS Code拡張機能のインストール
VS Codeと同じように拡張機能をインストールできます。
例えば、PrettierやESLintのような
開発を補助するツールを導入することで効率的に開発が可能です。
ご自身が使っているプラグインを入れてみてくださいね〜。
GitHub Codespacesの料金プラン
無料枠と有料プランの違い
GitHub Codespacesには無料枠があり、
月に一定時間までは無料で利用できます。
それ以上の時間を利用する場合は、
時間単位で課金されます。
コスト管理のポイント
開発が終わった後は、
Codespaceを停止することで無駄なコストを削減できます。
また、必要以上に高性能なマシンスペックを
選択しないことで、コストを最小限に抑えられます。
よくあるトラブルと対策
Codespaceが起動しない場合の対処法
Codespaceが起動しない場合は、
以下の手順を試してみてください
- ブラウザのキャッシュをクリアする。
- GitHub Codespacesのダッシュボードから再度起動する。
その他の一般的な問題解決方法
画面が暗くなる場合やファイルの保存に問題がある場合は、
GitHubサポートに問い合わせるか、公式ドキュメントを参照しましょう。
まとめ
本記事では、
初心者向けに GitHub Codespaces を使って、
Next.js アプリを動かす方法について詳しく解説ました。
GitHub Codespacesの概要やメリット
（クラウド上での開発環境の利便性、高速セットアップ、環境の統一化）に
ついて説明した後、具体的なアカウント作成方法やリポジトリ作成、
そしてCodespaceの作成手順を紹介しています。
GitHub Codespaces内での
Next.jsアプリの作成から起動、ファイルの編集、
ソースコードのコミットまで、
初心者でも実践しやすいステップバイステップのガイドが掲載されています。
また、開発環境のカスタマイズ方法として、
Dev ContainerやVS Codeの拡張機能のインストール方法についても触れています。
さらに、GitHub Codespacesの料金プランの違いや、
無駄なコストを抑えるためのコスト管理のポイントも解説しました！
本記事を読めば、GitHub Codespacesを使って
簡単にクラウド上でNext.jsアプリを開発できるようになりますので、
ぜひご自身のアプリを作ってみてください！
本ブログでは今後Nexts.jsのアプリを開発について
解説していきますので、そちらもご期待ください！
