フロントエンド向けGitHub Actions：lint・test・build
依存関係をインストールし、ESLintを実行して、Jestテストを実行し、すべてのプルリクエストでアプリをビルドするワークフローYAMLを記述します。
「フロントエンド向けGitHub Actions：lint・test・build」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
フロントエンドにCIが必要な理由
継続的インテグレーション（CI）は、プッシュやプルリクエストのたびにテスト、リンター、ビルドを実行します。mainに到達する前にリグレッションを検出できます。開発者が2人以上いるチームでは必須です。
GitHub Actionsの基本
ワークフローは.github/workflows/内のYAMLファイルです。各ワークフローには、トリガー（push、pull_request、schedule）によって実行されるジョブがあります。
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main]
pull_request:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci
- run: npm test依存関係のキャッシュ
node_modules（またはpnpm/yarnのキャッシュ）をキャッシュして、実行のたびに再インストールするのを避けます。setup-nodeはキャッシュを標準でサポートしています。
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm' # or 'yarn' or 'pnpm'Lintジョブ
ESLintとPrettierのチェックを実行します。エラー時はビルドを失敗させます。
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npm run lint
- run: npm run format:checkテストジョブ
VitestまたはJestを実行します。可視性を高めるため、カバレッジレポートを出力します。
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npm test -- --coverage
- uses: codecov/codecov-action@v4
with:
files: ./coverage/lcov.infoビルドジョブ
本番用バンドルをビルドします。後続のデプロイジョブで使えるよう、アーティファクトとしてアップロードします。
build:
runs-on: ubuntu-latest
needs: [lint, test]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npm run build
- uses: actions/upload-artifact@v4
with:
name: dist
path: dist/
retention-days: 7ジョブの並列実行
Lint、テスト、型チェックは並列で実行できます。Actionsは各ジョブを独自のランナーで実行します。順序を強制するにはneeds:を使用します（Lintとテストの後にビルドを実行する場合など）。
型チェック
専用の型チェックジョブとしてtsc --noEmitを追加します。実行時より前にTypeScriptのエラーを検出できます。
typecheck:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npx tsc --noEmitマトリックステスト
複数のNodeバージョンまたはOSに対して、テストジョブを並列で実行します。
test:
strategy:
fail-fast: false
matrix:
node: [18, 20, 22]
os: [ubuntu-latest, windows-latest, macos-latest]
runs-on: ${{ matrix.os }}
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: ${{ matrix.node }} }
- run: npm ci && npm test条件付きステップ
if:を使用して、条件に応じた場合のみステップを実行します。たとえば、mainブランチでのみ実行する場合などです。
- name: Deploy to staging
if: github.ref == 'refs/heads/main'
run: npm run deploy:stagingシークレットと変数
APIキーやトークンは、リポジトリのシークレット（Settings → Secrets）に保存します。secrets.NAMEからアクセスできます。シークレットをリポジトリにコミットしてはいけません。
- run: npm run deploy
env:
DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}ブランチ保護ルール
Settings → Branchesで、mainへのマージを許可する前にCIワークフローの成功を必須にします。必須レビューと組み合わせることで、標準的なチームの安全対策になります。
クイックチェック
GitHub Actionsのワークフローにあるconcurrencyブロックで、cancel-in-progress: trueを指定する目的は何ですか？
まとめ：フロントエンド向けGitHub Actions
ワークフローのYAMLは.github/workflows/に配置します。ジョブはpushやPRをきっかけに実行されます。setup-nodeでnode_modulesをキャッシュします。標準的なジョブは、lint、typecheck、test、buildです。順序が必要な場合はneedsを使って並列実行を制御します。複数バージョンのテストにはマトリックスを使います。シークレットはリポジトリの設定で管理します。ブランチ保護により、マージ前にCIの成功を必須にします。cancel-in-progressで重複した実行を排除します。
よくある質問
「フロントエンド向けGitHub Actions：lint・test・build」レッスンは無料ですか？
はい。「フロントエンド向けGitHub Actions：lint・test・build」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「フロントエンド向けGitHub Actions：lint・test・build」で何を学びますか？
依存関係をインストールし、ESLintを実行して、Jestテストを実行し、すべてのプルリクエストでアプリをビルドするワークフローYAMLを記述します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「フロントエンド向けGitHub Actions：lint・test・build」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- フロントエンド向けGitHub Actions：lint・test・build
- Vercel・Netlify・Cloudflare Pagesへのデプロイ
- CIでの環境変数
- Lighthouseの自動チェック