⚙️

初期プロジェクト設定（開発日記 No.131）

に公開
初期設定
開発日記
ui自動化
idea

関連リンク

はじめに

昨日は開発環境の調査と技術選定を行いました。今日は、その結果に基づいてUI自動化プロジェクトの初期設定を進めていきます。この開発日記では、その具体的な内容を共有します。

背景と目的

今回の初期設定は、今後の開発を円滑に進めるための基盤を構築することを目的としています。具体的には、技術スタックの確定、プロジェクトの骨組み作成、CI/CDおよびDevSecOpsの環境構築、開発ワークフローの定義、ガイドラインのドキュメント化、テンプレートの実装を行います。これらをしっかりと行うことで、高品質なコードを効率的に開発できる体制を整えます。

検討内容

プロジェクトの初期設定にあたり、以下の点を検討しました。

  • 技術スタックの選定: 開発効率と保守性を考慮し、TypeScript、Playwright、@playwright/test、pnpm、ESLint、Prettier、GitHub Actionsを採用しました。
  • 開発ワークフロー: Issue-Driven Development (IDD) モデルを採用し、Issueの粒度や新規発見時の対応を明確に定義しました。また、テスト駆動開発 (TDD) サイクル（Red-Green-Refactor）を導入し、品質を重視した開発を行います。
  • コーディング規約: Conventional Commitsに基づいたCommit Guidelinesを定義し、Atomic Commitsの原則を適用することで、変更履歴の可読性を高めます。

実装内容

以下の内容を実装しました。

  1. 技術スタックの確定: TypeScript, Playwright, @playwright/test, pnpm, ESLint, Prettier, GitHub Actionsを採用。
  2. プロジェクトの骨組み作成: packages/ディレクトリ内にspotify-podcast-automationプロジェクトの初期ディレクトリ構造を作成。
  3. CI/CD & DevSecOpsの環境構築:
    • GitHub Actionsワークフロー (ci.yml) を実装し、Playwrightテストを自動化。
    • GitHub CodeQL (codeql-analysis.yml) を統合し、静的アプリケーションセキュリティテスト (SAST) を実施。
  4. 開発ワークフローの定義:
    • Issue-Driven Development (IDD) モデルを確立し、ドキュメント化。
    • Issueの粒度と新規発見時の対応に関するガイドラインを定義。
    • Test-Driven Development (TDD) サイクル（Red-Green-Refactor）を形式化。
  5. ガイドラインのドキュメント化:
    • GEMINI.mdを作成し、すべてのプロジェクト標準をドキュメント化。
    • Conventional CommitsとAtomic Commitsの原則に基づいたCommit Guidelinesを定義。
  6. テンプレートの実装:
    • .github/pull_request_template.mdを作成し、PRを標準化。
    • .github/ISSUE_TEMPLATE/feature_request.mdを作成し、高品質なIssue作成を保証。
  7. 初期コミット: すべての初期設定ファイルとドキュメントをコミットし、リモートのmainブランチにプッシュ。
# 例: ci.yml (GitHub Actions workflow)
name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js 18
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build --if-present
      - run: npm test

技術的なポイント

今回の実装における技術的なポイントは以下の通りです。

  • GitHub Actionsによる自動テスト: PlaywrightのテストをGitHub Actionsで自動化することで、コードの品質を継続的に監視し、リグレッションを早期に発見できます。
  • GitHub CodeQLによるSAST: GitHub CodeQLを導入することで、コードのセキュリティ上の脆弱性を静的に検出できます。
  • Issue-Driven Development (IDD): IDDを採用することで、開発タスクをIssueとして明確に管理し、進捗状況を可視化できます。

所感

初期設定は、地味な作業ではありますが、今後の開発の土台となる重要な工程です。今回の設定を通じて、プロジェクトの方向性や開発プロセスを明確に定義できたと感じています。特に、GitHub ActionsやCodeQLの導入により、開発の効率性と品質を向上させることができると期待しています。Issueテンプレートの作成は少し手間でしたが、これにより質の高いIssueが作成されることを期待しています。

今後の課題

今後の課題としては、以下の点が挙げられます。

  • spotify-podcast-automationプロジェクトの詳細なタスク分解とIssue作成。
  • 作成したIssueに基づいて、具体的な機能開発に着手。
  • CI/CDパイプラインの改善とDevSecOpsの強化。

まとめ

本日の開発では、UI自動化プロジェクトの初期設定を行い、技術スタックの確定、プロジェクトの骨組み作成、CI/CDおよびDevSecOpsの環境構築、開発ワークフローの定義、ガイドラインのドキュメント化、テンプレートの実装を行いました。これらの設定により、高品質なコードを効率的に開発できる体制が整いました。今後は、具体的な機能開発に着手し、プロジェクトを推進していきます。

Discussion