こんにちは！開発現場を渡り歩いてきたシニアエンジニアの私です。
毎日のコーディング、本当にお疲れ様です。「コードを書いて、保存して、手動でテストを実行して……おっと、バグが見つかったからまた修正して……」なんて繰り返していませんか？
今回は、世界中のエンジニアに愛されている「VS Code」と、自動化の要である「GitHub Actions」を組み合わせて、あなたがコードをGitプッシュした瞬間から、クラウド側で自動的にテストやデプロイが走る仕組みを構築する方法を解説します。
これをマスターすれば、あなたの開発サイクルは文字通り「爆速」になります。手動作業のミスから解放され、純粋にコードを書くことだけに集中できる素晴らしい世界へご案内しましょう。
—
1. なぜVS Code × GitHub Actionsなのか？（アーキテクトの視点）
現代の開発において、「CI/CD（継続的インテグレーション／継続的デリバリー）」はもはやプロの必須教養です。しかし、初心者のうちは「なんか難しそう」「サーバーの設定とか面倒くさそう」と敬遠しがちです。
ここで登場するのが VS Code と GitHub の強力な連携です。
VS Codeは単なるテキストエディタではありません。Gitの操作（ステージ、コミット、プッシュ）をGUIでシームレスに行える最強のコントロールタワーです。
あなたがVS Codeでコードを書き、ポチッとプッシュする。その裏側でGitHub Actionsが動き出し、「お、新しいコードが来たな！それじゃあ代わりにテストを全部走らせておくよ！」と自動で代行してくれる。この一連の流れを体に染み込ませることで、あなたの開発スタイルは「手動確認の不安」から完全に解放されます。
—
2. 開発環境の基礎セットアップ
まずは、この魔法を動かすための土台を作ります。すでにVS CodeとGit、そしてGitHubのアカウントがある前提で、「自動化を受け入れるための正しい初期設定」を行っていきます。
ステップ①：VS CodeのGit連携を最適化する
VS Codeには標準でGit機能が備わっていますが、少し設定を見直すだけで快適さが桁違いになります。
設定（`Ctrl + ,` または `Cmd + ,`）を開き、右上のアイコンから `settings.json` を開いて、以下の設定を追加してください。
{
// コミット時にステージングされていないファイルがある場合、自動でステージングするかどうか（お好みでtrue）
“git.autofetch”: true,
// プッシュ時に確認ダイアログを出してミスを防ぐ
“git.confirmSync”: false,
// エディタ内で変更差分（Git Diff）を分かりやすく表示する
“git.decorations.enabled”: true
}
ステップ②：プロジェクトの準備
ローカルの適当な場所にプロジェクトフォルダを作成し、VS Codeで開いてください。今回はシンプルに、Node.js（JavaScript）の簡単なテストプロジェクトを例に進めます。
ターミナル（VS Code内蔵のものでOKです）を開き、初期化を行います。
プロジェクトの初期化（package.jsonの生成）
npm init -y
テストフレームワークとして Jest をインストール（ローカルテスト用）
npm install –save-dev jest
`package.json` の `scripts` 部分を書き換えて、テストが実行できるようにしておきます。
{
“name”: “vscode-github-actions-demo”,
“version”: “1.0.0”,
“description”: “VS Code and GitHub Actions Integration Demo”,
“main”: “index.js”,
“scripts”: {
// 実行時にjestを走らせる設定
“test”: “jest”
},
“devDependencies”: {
“jest”: “^29.0.0”
}
}
動作確認用に、簡単な足し算を行う関数 `math.js` と、そのテストファイル `math.test.js` を作成しましょう。
math.js
// 简单的な足し算関数
function add(a, b) {
return a + b;
}
module.exports = { add };
math.test.js
const { add } = require(‘./math’);
// Jestを使ったテストケース
test(‘adds 1 + 2 to equal 3’, () => {
expect(add(1, 2)).toBe(3);
});
この状態で、ターミナルで `npm test` と叩いてみてください。緑色の文字でテストがパスすれば、ローカルでの準備は完璧です！
—
3. GitHub Actionsで「自動テスト」の仕組みを召喚する
ここからが本番です。GitHubにコードをプッシュした際、自動で上記のテストをクラウド上で実行するワークフロー（設定ファイル）を作成します。
GitHub Actionsの設定ファイルは、プロジェクトルートに `.github/workflows/` というディレクトリを作り、その中に YAMLファイル（例: `ci.yml`）として配置します。
ワークフローファイルの作成
VS Codeのエクスプローラー上で、以下のフォルダ階層とファイルを作成してください。
`[プロジェクトルート] / .github / workflows / ci.yml`
そして、`ci.yml` に以下のコードを記述します。一行ずつ丁寧にコメントを入れたので、何をしているのか読み解いてみてください。
ci.yml
ワークフローの名称（GitHubのActionsタブに表示されます）
name: Node.js CI
どのタイミングでこのワークフローを動かすか（トリガーの設定）
on:
push:
branches: [ “main”, “master” ] # main または master ブランチにプッシュされた時
pull_request:
branches: [ “main”, “master” ] # プルリクエストが作成された時
実際に実行する処理（ジョブ）の定義
jobs:
build:
# 実行する仮想環境のOS（最新のUbuntuを使用）
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18.x, 20.x] # 複数のNode.jsのバージョンでテストを並列実行
steps:
# 1. GitHub上のリポジトリコードを仮想環境にチェックアウト（ダウンロード）する
- name: Checkout repository
uses: actions/checkout@v4
# 2. 指定したバージョンのNode.jsをセットアップする
- name: Set up Node.js ${{ matrix.node.version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node.version }}
cache: ‘npm’ # npmの依存関係をキャッシュしてビルドを高速化
# 3. 依存パッケージ（node_modules）をインストールする
- name: Install dependencies
run: npm ci
# 4. 定義したテストスクリプトを実行する
- name: Run tests
run: npm test
この設定ファイルが持つ意味、実にかっこよくないですか？「Node.jsの18と20の両方で、プッシュされるたびに勝手にテストを走らせてくれ」という指示を、たったこれだけのコードでGitHubに命令できるのです。
—
4. 運命の瞬間：VS Codeからプッシュして動作確認！
さあ、設定はすべて整いました。いよいよVS Codeから魔法を発動させましょう。
ステップ①：GitHubリポジトリとの紐付け（まだの場合）
まだGitHubにリモートリポジトリを作っていない場合は、GitHub上で新しい空のリポジトリを作成し、VS Codeのターミナルで以下を実行して紐付けてください。
git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git
git branch -M main
ステップ②：VS CodeのGUIでコミット＆プッシュ
左側のメニューから「ソース管理（Gitのアイコン）」を開きます。
1. 変更されたファイル一覧に `math.js`, `math.test.js`, `.github/workflows/ci.yml` が入っていることを確認します。
2. 「＋（ステージング）」ボタンを押して、すべての変更をステージします。
3. メッセージ入力欄に「Add GitHub Actions CI workflow」などと記入します。
4. 「commit」 ボタンを押し、そのまま「Sync Changes（同期）」（またはPush）を実行します。
これで、あなたのコードと自動化の設定がGitHubのクラウドへ旅立ちました！
ステップ③：GitHub上で動作を確認する
ブラウザでご自身のGitHubリポジトリを開いてみてください。
上部メニューにある 「Actions」 タブをクリックしてみましょう。
……どうでしょうか？
あなたがプッシュしたコミットメッセージとともに、オレンジ色のアイコン（実行中）がクルクルと回り、やがて鮮やかな「緑色のチェックマーク（成功）」に変わったはずです！
もしここでテストが失敗していれば、GitHub Actionsが赤色のバツ印をつけ、どこでエラーが起きたのかを詳細に教えてくれます。手元の環境だけでなく、クリーンなクラウド環境でも自分のコードが正しく動くことが証明された瞬間です。
—
5. さらに開発を加速させる「マーケットプレイス」の活用法
GitHub Actionsの真骨頂は、世界中の開発者が作った「便利なパーツ（アクション）」を組み合わせて使える点にあります。GitHubの「Marketplace」を覗いてみてください。
- Slack通知アクション: テストが失敗した瞬間に、チームのSlackチャンネルへアラートを飛ばす。
- 自動デプロイアクション: テストが通ったら、VercelやAWS、Firebaseへ自動で本番公開する。
これらもすべて、今回作成した `ci.yml` に数行書き足すだけで実現できてしまいます。「コードを書く ⇒ プッシュする ⇒ あとは全自動」というサイクルが手に入ると、もう手動でのテストやデプロイには戻れなくなりますよ。
—
おわりに
お疲れ様でした！今回は「VS Code×GitHub Actions」をテーマに、開発サイクルを爆速化する自動化の基礎から実践までを解説しました。
最初は大げさに聞こえたかもしれないCI/CDですが、実際に自分で設定ファイルを書き、プッシュした瞬間にクラウドが自動で動くのを見ると、エンジニアとしてのワクワクが止まらなかったのではないでしょうか。
これをマスターすれば、毎日のコーディングが劇的に楽になり、品質の高いコードを自信を持ってリリースできるようになります。ぜひ、あなたの次のプロジェクトにも取り入れてみてくださいね。それでは、良きモダン開発ライフを！