🌟
【初めての人向け】Codespaces ハンズオン〜カスタマイズ編〜

2025/04/14に公開
 はじめにこの記事は下の動画の記事版です！

動画の方が操作方法とかがわかりやすと思うのでぜひ見てみてください
https://youtu.be/stBVATf35Ek
今回は、前にやった GitHub Codespaces クイックスタートの続きで、Codespaces のカスタマイズについて解説します

今回もハンズオン形式で、初めての人でも大丈夫なように解説も細かめにやっていきます

前の動画をまだ見ていない人は、見てからの方がスムーズだと思います
https://youtu.be/jnw0eEzx9z4
https://zenn.dev/tsumugi_tech/articles/a3070f4af4c009

 おさらいまず、軽く前やったことのおさらいをしましょう
GitHub Codespaces は GitHub で提供されている機能の一つ
簡単に言うとクラウド開発環境で、クラウド ( Azure ) 上のマシン ( VM ) に環境を作ってそこで開発
無料枠が設定されているのでアカウントさえあれば誰でも使える
クイックスタートみたいに設定済みだと数クリックで環境が立ち上がる
ストレージの料金が加算され続けるのでこまめに消すのがおすすめ
前は使ってみるのがメインだったので、今回のゴールは「Codespaces の簡単なカスタマイズができるようになる」ですね

 概要

※引用: https://docs.github.com/ja/codespaces/about-codespaces/what-are-codespaces
まず、この図ですが左半分が接続するクライアント側、右半分が接続されるサーバ側になっています

Codespaces は、この図の右側、点線に囲まれた部分を指す言葉になります

これに含まれるものとしては図の通り、Container とリソース ( CPUs, Disk storage ) ですね

今回の主役はこの Container 部分で、リソースの部分は重要じゃないので割愛します

この緑の Container 部分のことを開発コンテナと呼びます

図に書いてある通り、開発コンテナは、ソースコード、実行環境、各種ツールが入っている Docker コンテナですね
!一応、Docker コンテナについて軽く補足

コンテナは仮想化技術の一つで、イメージ的には仮想マシン ( VM ) とほぼ一緒、またはそれよりもうちょっと簡単なやつって思ってもらえれば今回の記事内では十分だと思います

Docker はこのコンテナを使うためのプラットフォームで、他にも色んなプラットフォームがあるんですが、今回大事部分はコンテナを動かす基盤ってところですね

なので Docker コンテナと言ったら Docker プラットフォーム上で動作するコンテナのことを指します
Codespaces は中で開発コンテナが動いてる、つまり Docker コンテナが動いているってことになります

なので、前にやったクイックスタートの最中、皆さんはあまり意識せずに Docker コンテナ内でコマンド実行していたのです

この Docker コンテナ内だけで開発するっていうのが開発コンテナや Codepaces のコンセプトっぽいですね

 既定の開発コンテナ改めて、前回の クイックスタートのリポジトリ を見てみましょう

Node.js やったことある人は分かると思うんですが、ここにあるのって基本的な Node.js プロジェクトのファイルだけなんで、開発コンテナの設定っぽいものが無いんですよね

このようなリポジトリで Codespaces を起動した時に適用されるのが、既定の開発コンテナ、またの名を Linux Universal Image ですね

この既定の開発コンテナには Python, Node.js, Ruby などの実行環境や Git, GitHub CLI などのツールが入っています

これ以外にも色々入ってるんですが、紹介するには多すぎるので気になる人は こちら から見てみてください

では、ここまで解説してきた、開発コンテナな概要部分と既定の開発コンテナを確かめるため、実際に Codespaces を起動して中を見てみましょう

 ハンズオン
 Codespaces 起動前と同じようにまずは リポジトリのページ にアクセス
右上の Code ボタンをクリックして、Codespaces タブが選択されていなければ選択
続いて Create Codespaces on main をクリックして Codespaces ( Visual Studio Code の Web 版 ) を起動

 内容確認

※引用: https://docs.github.com/ja/codespaces/about-codespaces/what-are-codespaces
ここから図に書いてある通りなのか確認していきましょう

まず、図のオレンジ一番上、ソースコードの部分ですね

エクスプローラを見てみるとリポジトリがクローンされ、リポジトリと同じファイルがちゃんとありますね
次に、図のオレンジ二番目、プログラミング言語の実行環境

これはターミナルで Python, Node.js, Ruby のバージョンを見て確認していきましょう

結果は下記の通りで全部インストールされてますね
$ python --version
Python 3.12.1

$ node -v
v20.19.0

$ ruby -v
ruby 3.3.4 (2024-07-09 revision be1089c8ec) [x86_64-linux]
最後に、図のオレンジ三番目、ツール関連ですね

図には拡張機能と Linter って書いてありますが、そこはあとで確認するので、Git と GtiHub CLI を確認してみましょう

こちらも下記の通り、全部インストールされてますね
$ git -v
git version 2.49.0

$ gh --version
gh version 2.68.1 (2025-03-06)
https://github.com/cli/cli/releases/tag/v2.68.1
こんな感じで、既定の開発コンテナには色々入ってるので、特にカスタマイズしなくても簡単なものなら動かせます

たとえば、前やったチュートリアルみたいな簡単なプログラムを実行したり、 GtiHub CLI  でリポジトリの情報を取得するみたいなことやシェルスクリプト試すみたいなこともできます
次からはこのオレンジの部分を含む緑の枠内である開発コンテナをカスタマイズしていきます

環境は続けて使うので、ここで一旦休憩する人は環境の消し忘れに注意です

 devcontainer.json開発コンテナの設定ファイルは devcontainer.json ってファイルで、通常は .devcontainer/devcontainer.json に配置します

もちろん、チームで開発している場合、このファイルはリポジトリに含めるべきなので、ここでするカスタマイズは開発環境に必要なもののみになります

ここでは割愛しますが、シェルの設定変えたいみたいな場合は、自分用に変える仕組みも用意さているので、そちらで変えるのが推奨されています

 ハンズオン
 ファイル生成こちら の『開発コンテナを構成を追加する』『devcontainer.json ファイルを変更する』の内容を多少アレンジしてやっていきます

続けてやってる人は Codespaces が起動してるのでそのまま続けてもらい、まだの人は一つ前のハンズオンの起動だけしてもらえれば合流できます
コマンドパレットを開いて『開発コンテナ構成ファイルの追加』を選択
『新しい構成の作成』を選択しますが、チュートリアルとは違って、こちらはまだファイルがない状態なので、次の次、使うテンプレートで『Node.js と JavaScript』を選びます
バージョン聞かれるので、デフォルトを選択
追加機能で『JSHint 』をチェックして OK を押す
これで、下記のような .devcontainer/devcontainer.json が生成されてると思います

多分、他から丸ごとコピーする以外だと今の方法で作るのが楽だと思います
.devcontainer/devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
	"name": "Node.js",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm",
	"features": {
		"ghcr.io/devcontainers-extra/features/jshint:2": {}
	}

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}
!ここで、今回に関係ある項目だけ軽く解説します

name: 開発コンテナの名前で、な選択とかする時に表示されます

image: 開発コンテナのイメージ名で Docker 触ったことある人なら Dockerfile の FROM とかに書くやつと一緒ですね

features: 追加機能で、さっきの操作だと『JSHint』を選んだのでそれが書いてありますね

ここまでが生成時に選んだりしたのが書いてある部分ですね

残りのコメントアウトされている部分で今回書き換えるのが postCreateCommand と customizations ですね

postCreateCommand: Codespaces が作成された時に実行するコマンドを書く場所です

customizations: 今回だと VS Code の拡張機能を追加する場所ですね

 カスタマイズ設定を追加するために features の後にカンマを追加
postCreateCommand をに npm install を設定
customizations に拡張機能の Code Spell Checker を追加
編集後のファイルは下記の通りで、バージョン部分以外はチュートリアルと一緒になってると思います
.devcontainer/devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
	"name": "Node.js",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm",
	"features": {
		"ghcr.io/devcontainers-extra/features/jshint:2": {}
	},

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	"postCreateCommand": "npm install",

	// Configure tool-specific properties.
	"customizations": {
		// Configure properties specific to VS Code.
		"vscode": {
			// Add the IDs of extensions you want installed when the container is created.
			"extensions": [
				"streetsidesoftware.code-spell-checker"
			]
		}
	}

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

 内容確認設定を保存して Rebuild してみましょう

Rebuild は起動までちょっとかかりるので、しばらくお待ちください

拡張機能を見てみると Code Spell Checker が入っていると思います
コマンドで何がインストールされてるか確認すると以下の通りになると思います

Node.js は指定したバージョンが入っていて、Ruby は無し、追加機能で選択した JSHint が入っていますね
$ node -v
v22.14.0

$ ruby -v
bash: ruby: command not found

$ jshint -v
jshint v2.13.6
お疲れ様でした！これでカスタマイズ完了です！

今は他の人のリポジトリなので、このまま消しますが、自分のリポジトリだったらこれをコミット、プッシュすれば同じものが誰でも使えるようになります
以上で、ハンズオンは終わりです
既定の開発コンテナもいろいろ入ってて便利でいいですが、特定のイメージやツールなどをインストールしないと開発できない場合もあると思うので、是非カスタマイズしてみてください

最後に使った環境の消し忘れには注意しましょう

 まとめCodespaces の Container 部分が開発コンテナ
開発コンテナは↓が入った Docker コンテナ
ソースコード
実行環境
各種ツール

設定なしだと既定の開発コンテナが起動
devcontainer.json を書くと↓が設定可能
イメージ
追加機能
拡張機能
Discussion

ログインするとコメントできます