05 プロジェクト固有の設定

このドキュメントでは、DevBlueprint プロジェクトで使用される各種設定ファイルの詳細と、その役割について説明します。

1. 設定ファイルの概要

1.1 主要な設定ファイル

プロジェクトには以下の重要な設定ファイルが含まれています：

ファイル名	用途	設定内容
package.json	Node.js プロジェクト設定	依存関係、スクリプト、メタデータ
tsconfig.json	TypeScript コンパイラ設定	コンパイル・型チェックオプション
jest.config.js	Jest テスト設定	テスト実行・カバレッジ設定
mkdocs.yml	MkDocs ドキュメント設定	サイト構成・テーマ設定
pyproject.toml	Python プロジェクト設定	パッケージ・ツール設定
.gitignore	Git 除外設定	バージョン管理除外ファイル

2. package.json の詳細

2.1 基本情報セクション

{
    "name": "devblueprint",
    "version": "1.0.0",
    "description": "A comprehensive development blueprint for modern software projects",
    "main": "index.js",
    "keywords": ["development", "blueprint", "documentation", "best-practices"],
    "author": "BitzLabs",
    "license": "MIT",
    "repository": {
        "type": "git",
        "url": "https://github.com/BitzLabs/DevBlueprint.git"
    }
}

2.2 依存関係の管理

2.2.1 開発依存関係 (devDependencies)

{
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "eslint": "^8.45.0",
        "eslint-config-prettier": "^8.8.0",
        "eslint-plugin-import": "^2.27.5",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^6.1.1",
        "eslint-plugin-security": "^1.7.1",
        "jest": "^29.6.0",
        "markdownlint-cli": "^0.35.0",
        "prettier": "^3.0.0",
        "stylelint": "^15.10.0",
        "stylelint-config-standard": "^34.0.0",
        "typescript": "^5.1.0"
    }
}

2.3 npm スクリプト

2.3.1 リント系スクリプト

{
    "scripts": {
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
        "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
        "lint:js": "eslint \"**/*.{js,jsx}\"",
        "lint:ts": "eslint \"**/*.{ts,tsx}\"",
        "lint:md": "markdownlint \"**/*.md\"",
        "lint:md:fix": "markdownlint \"**/*.md\" --fix",
        "lint:css": "stylelint \"**/*.{css,scss}\"",
        "lint:css:fix": "stylelint \"**/*.{css,scss}\" --fix",
        "lint:all": "npm run lint && npm run lint:md && npm run lint:css"
    }
}

2.3.2 フォーマット系スクリプト

{
    "scripts": {
        "format": "prettier --write .",
        "format:check": "prettier --check .",
        "format:js": "prettier --write \"**/*.{js,ts,jsx,tsx}\"",
        "format:css": "prettier --write \"**/*.{css,scss,less}\"",
        "format:json": "prettier --write \"**/*.json\"",
        "format:md": "prettier --write \"**/*.md\""
    }
}

2.3.3 テスト系スクリプト

{
    "scripts": {
        "test": "jest",
        "test:watch": "jest --watch",
        "test:coverage": "jest --coverage",
        "test:ci": "jest --ci --coverage --watchAll=false"
    }
}

2.3.4 ドキュメント系スクリプト

{
    "scripts": {
        "docs:serve": "mkdocs serve",
        "docs:build": "mkdocs build",
        "docs:deploy": "mkdocs gh-deploy"
    }
}

2.3.5 統合スクリプト

{
    "scripts": {
        "precommit": "npm run lint:fix && npm run format",
        "prepare": "npm run lint && npm run format:check && npm run test",
        "clean": "rm -rf dist/ build/ coverage/ node_modules/.cache/",
        "reset": "npm run clean && npm install"
    }
}

3. TypeScript 設定 (tsconfig.json)

3.1 基本設定

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "commonjs",
        "lib": ["ES2022", "DOM"],
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "include": ["src/**/*", "tests/**/*"],
    "exclude": ["node_modules", "dist", "build"]
}

3.2 設定項目の説明

オプション	説明
`target`	コンパイル後のJavaScriptバージョン
`module`	モジュールシステム（commonjs, es6等）
`strict`	厳密な型チェックを有効化
`outDir`	コンパイル後ファイルの出力先
`rootDir`	ソースファイルのルートディレクトリ

4. Jest テスト設定 (jest.config.js)

4.1 基本設定

module.exports = {
    // テスト環境の設定
    testEnvironment: 'node',

    // テストファイルの検出パターン
    testMatch: ['**/__tests__/**/*.{js,ts}', '**/*.(test|spec).{js,ts}'],

    // カバレッジ設定
    collectCoverage: true,
    coverageDirectory: 'coverage',
    coverageReporters: ['text', 'lcov', 'html'],

    // カバレッジ対象ファイル
    collectCoverageFrom: ['src/**/*.{js,ts}', '!src/**/*.d.ts', '!src/**/index.{js,ts}'],

    // カバレッジ閾値
    coverageThreshold: {
        global: {
            branches: 70,
            functions: 70,
            lines: 70,
            statements: 70,
        },
    },

    // セットアップファイル
    setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],

    // モジュール解決
    moduleNameMapping: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },

    // TypeScript サポート
    preset: 'ts-jest',

    // 除外ディレクトリ
    testPathIgnorePatterns: ['/node_modules/', '/dist/', '/build/'],
};

4.2 テストスクリプトの使用方法

# 全テストを実行
npm test

# ウォッチモードでテスト実行
npm run test:watch

# カバレッジレポート付きでテスト実行
npm run test:coverage

# CI環境でのテスト実行
npm run test:ci

5. MkDocs ドキュメント設定 (mkdocs.yml)

5.1 サイト基本情報

site_name: DevBlueprint
site_url: https://bitzlabs.github.io/DevBlueprint/
site_author: BitzLabs
site_description: A comprehensive development blueprint for modern software projects

# リポジトリ情報
repo_name: BitzLabs/DevBlueprint
repo_url: https://github.com/BitzLabs/DevBlueprint
edit_uri: edit/main/Docs/

5.2 テーマとプラグイン設定

theme:
    name: material
    language: ja
    features:
        - navigation.tabs
        - navigation.top
        - search.highlight
        - content.code.copy
    palette:
        - scheme: default
          primary: blue
          accent: light blue

plugins:
    - search:
          lang: ja
    - mermaid2
    - git-revision-date-localized

markdown_extensions:
    - admonition
    - codehilite
    - toc:
          permalink: true
    - pymdownx.mermaid

6. Python プロジェクト設定 (pyproject.toml)

6.1 プロジェクト情報

[project]
name = "devblueprint"
version = "1.0.0"
description = "A comprehensive development blueprint for modern software projects"
authors = [{name = "BitzLabs", email = "contact@bitzlabs.com"}]
license = {text = "MIT"}
readme = "README.md"
requires-python = ">=3.8"

[project.urls]
Homepage = "https://github.com/BitzLabs/DevBlueprint"
Repository = "https://github.com/BitzLabs/DevBlueprint"
Documentation = "https://bitzlabs.github.io/DevBlueprint/"

6.2 ツール設定

[tool.black]
line-length = 88
target-version = ['py38']

[tool.isort]
profile = "black"
multi_line_output = 3

[tool.pytest.ini_options]
testpaths = ["tests"]
python_files = ["test_*.py", "*_test.py"]
python_classes = ["Test*"]
python_functions = ["test_*"]

7. Git 設定 (.gitignore)

7.1 除外ファイルの分類

# 依存関係
node_modules/
__pycache__/
*.pyc
*.pyo
*.pyd
.Python

# ビルド結果
dist/
build/
*.egg-info/
.tsbuildinfo

# 開発環境
.vscode/
.idea/
*.swp
*.swo
*~

# ログとキャッシュ
*.log
logs/
.cache/
.npm/
.eslintcache

# OS固有
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# 環境変数
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# テストとカバレッジ
coverage/
.nyc_output/
.coverage
htmlcov/

# 一時ファイル
*.tmp
*.temp
.tmp/

8. EditorConfig 設定 (.editorconfig)

8.1 基本エディタ設定

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

[*.{js,jsx,ts,tsx}]
indent_size = 2

[*.{py,pyw}]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

9. 設定ファイルの管理とメンテナンス

9.1 設定の同期

チーム全体で設定を統一するため：

設定ファイルをバージョン管理に含める
定期的に設定を見直す
新しいツールの導入時は設定を更新

9.2 設定の検証

設定が正しく適用されているか確認：

# 各ツールの設定確認
npm run lint:all
npm run format:check
npm test
mkdocs build --strict

9.3 トラブルシューティング

設定ファイルの構文エラー

JSON ファイル: JSONLint等でバリデーション
YAML ファイル: YAML パーサーでチェック
JavaScript ファイル: 構文チェック実行

依存関係の競合

# パッケージの状態確認
npm list
npm outdated

# 依存関係の修復
npm audit fix
npm install

10. 設定のカスタマイズガイド

10.1 プロジェクト固有の調整

各プロジェクトの要件に応じて設定をカスタマイズ：

言語・フレームワーク固有の設定追加
チーム・組織のルールに合わせた調整
CI/CD パイプラインとの統合

10.2 新規ツールの追加

新しいツールを追加する際の手順：

package.json に依存関係を追加
設定ファイルを作成
npm スクリプトに統合
VS Code 設定に反映
ドキュメントを更新

次のステップ

プロジェクト固有の設定が理解できたら、次は CI/CD 環境の設定について学習します：

→ 06_CI_CD環境の設定.md