♻️

【初学者向け】GitHubが怖かった私が、CIでテストを回せるようになるまで（CI編）

に公開
GitHub
Python
自動化
初学者
Test
tech

00. はじめに

本記事を見つけていただきありがとうございます🙇

今回は、チーム開発では必須スキルとなるGitHubについての記事です！
GitHubを使ったばかりの当時の私は、操作になかなか慣れることができず...
恐怖心さえ抱いてしまっておりました。

そんな私が、GitHub操作の基本操作を習得し、
CIを実行するまでに至ったエピソードをお話しさせていただきます。

00-a. 本記事のゴール

  • GitHubとは何かを説明できる
  • GitHubの操作の理解
  • GitHub ActionsでCI化できる

00-b. 本記事の内容

01 . GitHubとは何か？Gitとの違いは？
02 . なぜチーム開発で必須なのか
03 . CI（自動テスト）とは何か
04 . GitHub Actionsでテストを自動実行する方法（Python ver.）
05 . まとめ

00-c. こんな方に見てほしい！

  • GitHubを使ったことがない方
  • GitHubの操作に自信がない方
  • 「push/pull request」がよくわからない...

01. GitHubとは何か？Gitとの違いは？

00-a. Git・GitHubってそもそも何？

Git: コードの変更履歴を管理する仕組み、システムのこと
GitHub: Gitの履歴を「みんなで共有」できる場所

01-b. よく出てくる用語まとめ（超重要‼️）

用語 意味
repository(リポジトリ) プロジェクトを入れる箱
pull(プル) GitHubからデータ（ファイル）をPCに持ってくる
push(プッシュ) 自分のPCからGitHubにデータ（ファイル）を送る
commit(コミット) 変更を記録する
branch(ブランチ) プロジェクトを分岐させて作業用の独立した環境のこと
pull request(プルリクエスト) コードの変更をメインのプロジェクトに入れてもいいか確認する仕組み

01-c. なぜ、みんなで一緒のプロジェクトを触らないのか？

複数の人が同時に同じファイルを編集・実装すると、コンフリクト（競合）が発生してしまいます。
GitHubが誰のコードが正しいのか、誰のコードを採用すればいいのかわからず、それぞれのコードが衝突してしまうのです。そのため、独立した環境（ブランチ）を作成して、各自が実装したコードをメインのプロジェクトに統合させて、開発を進めていくのです。

03. CI（自動化テスト）とは何か

CI（Continuous Integration）とは、コードを変更・更新する度に自動でテスト・チェックを行なってくれる仕組みです。これまでは、全て人が実施していたものを自動化してくれるという便利な機能です。

04. GitHub Actionsでテストを自動実行する方法

前提条件

本プロジェクトの技術スタック

04-a. GitHub Actionsって何？

GitHub Actions: GitHubに標準搭載されたCI（自動テスト）機能
役割: pushもしくは、pull　requestをすると、自動でテストを回してくれる便利な機能

04-b. 実際にCIを作ってみる

  1. 🗂️ フォルダを作成
# フォルダ構成
root(package.jsonがあるディレクトリ)
.github/
└── workflows/
    └── ci.yml(またはtest.yml)
  1. ci.ymlファイルにコードを実装（コピペでOK）
# .github/workflows/ci.yml

name: CI Tests

# いつ実行する？
on:
  push:
  pull_request:
    branches: [ main, develop ]
# 実行する処理
jobs:
  backend-test:
  　# どのOSで実行するか
    runs-on: ubuntu-latest
    
    env:
      DATABASE_URL: "sqlite:///./backend/test.db"
　　　
    steps:
    　# ステップ1: コードをチェックアウト
      - name: コードを取得
        uses: actions/checkout@v4
      # ステップ2: Pythonをセットアップ
      - name: Python 3.9 をセットアップ
        uses: actions/setup-python@v5
        with:
          python-version: '3.9'
      # ステップ3: 依存関係をインストール
      - name: 依存関係をインストール
        run: |
          cd backend
          pip install --upgrade pip
          pip install -r requirements-dev.txt
      # ステップ4: テストを実行
      - name: テストを実行
        run: |
          cd backend
          pytest test/ -v --cov=app --cov-report=xml
      # ステップ5: カバレッジをアップロード　# *1.カバレッジ
      - name: カバレッジをアップロード
        uses: codecov/codecov-action@v4
        with:
          file: ./backend/coverage.xml
          fail_ci_if_error: false
        continue-on-error: true
  
  frontend-test:
    runs-on: ubuntu-latest
    
    steps:
      - name: コードを取得
        uses: actions/checkout@v4
      
      - name: Node.js をセットアップ
        uses: actions/setup-node@v4
        with:
          node-version: '18'
      
      - name: 依存関係をインストール
        run: |
          cd frontend
          npm ci
      
      - name: テストを実行
        run: |
          cd frontend
          npm test -- --coverage --watchAll=false

# *1. カバレッジ：テストの網羅率

04-c. 動作確認

# rootディレクトリで実行
git add .github/workflows/ci.yml
git commit -m "test: GitHub ActionsでのCIセットアップ"
git push origin [作業ブランチ名]

表示例:

✅ Backend Tests (2m 15s)
✅ Frontend Tests (1m 30s)
🔄 Deploy Backend to Render (実行中...)
🔄 Deploy Frontend to Render (実行中...)

04-d. GitHubのActionsタブで実行結果を確認

05. まとめ

お疲れ様でした！
GitHubとGitHub Actionsについて理解が深まっていただければ幸いです。

自動テストはスムーズに成功することの方が少ないと思います。
ただ、CIが失敗するのは、悪いことではありません！
むしろ「本番に入る前に、気づけた」ということなのです。
赤い❌は、味方だと思って、失敗と修正を繰り返して、CIが通るようにトライしてみてください！

本日も最後まで、ご覧いただきありがとうございました。
あなたの学習の助けになれば嬉しいです！

Discussion