feat: GitHub完全活用ガイド - 包括的な解説書とWebサイトを追加
🎯 主要機能: - GitHub機能の網羅的解説書 (10章構成) - 外部ツール代替戦略とコスト分析 - 実践的な設定例とベストプラクティス - 実務ケーススタディと段階的移行計画 🌐 GitHub Pages Webサイト: - Jekyll設定とレスポンシブデザイン - 自動デプロイワークフロー - 美しいランディングページ - SEO最適化とモバイル対応 📊 期待効果: - 年間37%のコスト削減 - 開発効率2倍向上 - セキュリティ強化 🚀 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
commit
1e2b71e1b3
17 changed files with 4250 additions and 0 deletions
8
.claude/settings.local.json
Normal file
8
.claude/settings.local.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(git add:*)"
|
||||||
|
],
|
||||||
|
"deny": []
|
||||||
|
}
|
||||||
|
}
|
||||||
76
.github/workflows/pages.yml
vendored
Normal file
76
.github/workflows/pages.yml
vendored
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
name: Deploy GitHub Pages
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [ main ]
|
||||||
|
paths:
|
||||||
|
- 'docs/**'
|
||||||
|
- '.github/workflows/pages.yml'
|
||||||
|
|
||||||
|
# 手動実行を許可
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
# GitHub Pagesデプロイのための権限設定
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
pages: write
|
||||||
|
id-token: write
|
||||||
|
|
||||||
|
# 同時実行の制御
|
||||||
|
concurrency:
|
||||||
|
group: "pages"
|
||||||
|
cancel-in-progress: false
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
# ビルドジョブ
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Setup Ruby
|
||||||
|
uses: ruby/setup-ruby@v1
|
||||||
|
with:
|
||||||
|
ruby-version: '3.1'
|
||||||
|
bundler-cache: true
|
||||||
|
|
||||||
|
- name: Setup Pages
|
||||||
|
id: pages
|
||||||
|
uses: actions/configure-pages@v3
|
||||||
|
|
||||||
|
- name: Install dependencies
|
||||||
|
run: |
|
||||||
|
cd docs
|
||||||
|
bundle install
|
||||||
|
|
||||||
|
- name: Build site
|
||||||
|
run: |
|
||||||
|
cd docs
|
||||||
|
bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
|
||||||
|
env:
|
||||||
|
JEKYLL_ENV: production
|
||||||
|
|
||||||
|
- name: Upload artifact
|
||||||
|
uses: actions/upload-pages-artifact@v2
|
||||||
|
with:
|
||||||
|
path: docs/_site
|
||||||
|
|
||||||
|
# デプロイジョブ
|
||||||
|
deploy:
|
||||||
|
environment:
|
||||||
|
name: github-pages
|
||||||
|
url: ${{ steps.deployment.outputs.page_url }}
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
needs: build
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Deploy to GitHub Pages
|
||||||
|
id: deployment
|
||||||
|
uses: actions/deploy-pages@v2
|
||||||
|
|
||||||
|
- name: Notify deployment success
|
||||||
|
run: |
|
||||||
|
echo "🎉 サイトが正常にデプロイされました!"
|
||||||
|
echo "📍 URL: ${{ steps.deployment.outputs.page_url }}"
|
||||||
217
README.md
Normal file
217
README.md
Normal file
|
|
@ -0,0 +1,217 @@
|
||||||
|
# GitHub Research Tool
|
||||||
|
|
||||||
|
> GitHub機能を網羅的に理解し、開発プロセスを最適化するための研究・学習プロジェクト
|
||||||
|
|
||||||
|
## 🎯 プロジェクトの目的
|
||||||
|
|
||||||
|
このプロジェクトは、外部ツールに依存せずGitHubの機能だけで開発に関わるすべてのタスクを実行できるようになることを目指しています。GitHub機能の深い理解を通じて、より効率的な開発フローを構築します。
|
||||||
|
|
||||||
|
## 📋 目標
|
||||||
|
|
||||||
|
- **GitHub機能の網羅的理解** - すべての機能とその使い方を体系的に学習
|
||||||
|
- **ケーススタディの作成** - 実際の開発場面での機能活用方法を文書化
|
||||||
|
- **外部ツール代替案の提供** - 一般的な外部ツールをGitHub機能で置き換える方法を提案
|
||||||
|
- **基本から高度な使い方まで** - 初心者から上級者まで対応できる知識体系の構築
|
||||||
|
- **AI駆動並列開発の実装** - GitHub機能を活用した次世代の開発手法の確立
|
||||||
|
|
||||||
|
## 🗂️ GitHub機能カテゴリ
|
||||||
|
|
||||||
|
### 1. リポジトリ管理
|
||||||
|
- **基本機能**
|
||||||
|
- Repository作成・クローン・フォーク
|
||||||
|
- Branch管理（作成、マージ、削除）
|
||||||
|
- Commit履歴とタグ管理
|
||||||
|
- Release管理
|
||||||
|
|
||||||
|
### 2. コラボレーション機能
|
||||||
|
- **Pull Request**
|
||||||
|
- コードレビュー機能
|
||||||
|
- サジェスト機能
|
||||||
|
- Draft PR
|
||||||
|
- PR テンプレート
|
||||||
|
- **Issues**
|
||||||
|
- Issue テンプレート
|
||||||
|
- ラベル管理
|
||||||
|
- マイルストーン
|
||||||
|
- Project との連携
|
||||||
|
|
||||||
|
### 3. プロジェクト管理
|
||||||
|
- **GitHub Projects**
|
||||||
|
- カンバンボード
|
||||||
|
- ロードマップビュー
|
||||||
|
- 自動化ワークフロー
|
||||||
|
- チームプランニング
|
||||||
|
- **Insights**
|
||||||
|
- Contributors分析
|
||||||
|
- Traffic分析
|
||||||
|
- Dependency graph
|
||||||
|
|
||||||
|
### 4. CI/CD・自動化
|
||||||
|
- **GitHub Actions**
|
||||||
|
- ワークフロー作成
|
||||||
|
- 再利用可能ワークフロー
|
||||||
|
- マトリックスビルド
|
||||||
|
- シークレット管理
|
||||||
|
- **GitHub Apps & Webhooks**
|
||||||
|
- 自動化トリガー
|
||||||
|
- 外部連携
|
||||||
|
|
||||||
|
### 5. セキュリティ機能
|
||||||
|
- **Security**
|
||||||
|
- Dependabot
|
||||||
|
- Secret scanning
|
||||||
|
- Code scanning
|
||||||
|
- Security policies
|
||||||
|
- **Branch protection**
|
||||||
|
- 保護ルール設定
|
||||||
|
- Required reviews
|
||||||
|
- Status checks
|
||||||
|
|
||||||
|
### 6. ドキュメント・Wiki
|
||||||
|
- **GitHub Pages**
|
||||||
|
- 静的サイトホスティング
|
||||||
|
- カスタムドメイン
|
||||||
|
- **Wiki**
|
||||||
|
- プロジェクトドキュメント
|
||||||
|
- 共同編集
|
||||||
|
|
||||||
|
### 7. コード品質
|
||||||
|
- **Code Review**
|
||||||
|
- Codeowners
|
||||||
|
- Review assignments
|
||||||
|
- Suggested changes
|
||||||
|
- **Codespaces**
|
||||||
|
- クラウド開発環境
|
||||||
|
- Dev containers
|
||||||
|
|
||||||
|
### 8. コミュニケーション
|
||||||
|
- **Discussions**
|
||||||
|
- Q&A フォーラム
|
||||||
|
- アナウンスメント
|
||||||
|
- アイデア共有
|
||||||
|
- **コメント機能**
|
||||||
|
- インラインコメント
|
||||||
|
- Issue/PRコメント
|
||||||
|
|
||||||
|
## 📚 ケーススタディ
|
||||||
|
|
||||||
|
### ケース1: 新機能開発フロー
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A[Issue作成] --> B[Feature Branch]
|
||||||
|
B --> C[開発]
|
||||||
|
C --> D[Draft PR]
|
||||||
|
D --> E[CI/CD]
|
||||||
|
E --> F[Code Review]
|
||||||
|
F --> G[Merge]
|
||||||
|
```
|
||||||
|
**使用する機能**: Issues, Branches, Pull Requests, Actions, Review
|
||||||
|
|
||||||
|
### ケース2: バグ修正プロセス
|
||||||
|
1. **Issue報告** - バグテンプレートを使用
|
||||||
|
2. **自動ラベリング** - GitHub Actionsで優先度設定
|
||||||
|
3. **ホットフィックス** - 緊急度に応じたブランチ戦略
|
||||||
|
4. **自動テスト** - CIでの回帰テスト
|
||||||
|
|
||||||
|
### ケース3: リリース管理
|
||||||
|
- **マイルストーン設定** - バージョン計画
|
||||||
|
- **自動チェンジログ** - PRラベルから生成
|
||||||
|
- **リリースドラフト** - Actions で自動作成
|
||||||
|
- **デプロイメント** - 環境別の自動デプロイ
|
||||||
|
|
||||||
|
## 🔄 外部ツール代替マップ
|
||||||
|
|
||||||
|
| 外部ツール | GitHub機能で代替 | 備考 |
|
||||||
|
|-----------|-----------------|------|
|
||||||
|
| Jira | GitHub Projects + Issues | カンバン、スプリント管理可能 |
|
||||||
|
| Jenkins | GitHub Actions | CI/CD完全対応 |
|
||||||
|
| Confluence | GitHub Wiki + Pages | ドキュメント管理 |
|
||||||
|
| Slack (開発通知) | GitHub Notifications + Webhooks | 通知カスタマイズ可能 |
|
||||||
|
| SonarQube | Code scanning + Actions | 品質分析自動化 |
|
||||||
|
| Docker Hub | GitHub Container Registry | コンテナイメージ管理 |
|
||||||
|
| npm/pip | GitHub Packages | パッケージレジストリ |
|
||||||
|
| Trello | GitHub Projects | タスク管理・可視化 |
|
||||||
|
| CircleCI | GitHub Actions | 並列ビルド・複雑なワークフロー対応 |
|
||||||
|
| GitLab | GitHub (フル機能) | 統合開発プラットフォーム |
|
||||||
|
|
||||||
|
## 🚀 AI駆動並列開発の実装
|
||||||
|
|
||||||
|
### 並列開発を支援するGitHub機能
|
||||||
|
1. **複数Draft PR** - 並行して複数の実装案を試行
|
||||||
|
2. **GitHub Copilot** - AIペアプログラミング
|
||||||
|
3. **自動化されたテスト** - 並列実装の品質保証
|
||||||
|
4. **Codespacesの複数インスタンス** - 独立した開発環境
|
||||||
|
5. **Projects の自動化** - AIによるタスク振り分け
|
||||||
|
|
||||||
|
### 実装パターン
|
||||||
|
```yaml
|
||||||
|
# .github/workflows/ai-parallel-dev.yml
|
||||||
|
name: AI Parallel Development
|
||||||
|
on:
|
||||||
|
issue:
|
||||||
|
types: [opened, labeled]
|
||||||
|
jobs:
|
||||||
|
create-branches:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: 複数の実装ブランチを作成
|
||||||
|
- name: 各ブランチでDraft PRを作成
|
||||||
|
- name: AI分析結果をPRに追加
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎓 学習リソース
|
||||||
|
|
||||||
|
### 基本編
|
||||||
|
- [x] Git基本コマンド
|
||||||
|
- [x] ブランチ戦略
|
||||||
|
- [x] PRの作り方
|
||||||
|
- [ ] Issue管理
|
||||||
|
|
||||||
|
### 中級編
|
||||||
|
- [ ] GitHub Actions入門
|
||||||
|
- [ ] Projects活用法
|
||||||
|
- [ ] セキュリティ設定
|
||||||
|
- [ ] API活用
|
||||||
|
|
||||||
|
### 上級編
|
||||||
|
- [ ] 複雑なワークフロー設計
|
||||||
|
- [ ] カスタムApp開発
|
||||||
|
- [ ] 大規模プロジェクト管理
|
||||||
|
- [ ] パフォーマンス最適化
|
||||||
|
|
||||||
|
## 🔧 プロジェクト構成
|
||||||
|
|
||||||
|
```
|
||||||
|
github-research-tool/
|
||||||
|
├── README.md
|
||||||
|
├── docs/
|
||||||
|
│ ├── features/ # 機能別詳細ドキュメント
|
||||||
|
│ ├── case-studies/ # ケーススタディ集
|
||||||
|
│ └── workflows/ # ワークフロー例
|
||||||
|
├── examples/ # 実装例
|
||||||
|
│ ├── actions/ # GitHub Actions設定例
|
||||||
|
│ ├── templates/ # テンプレート集
|
||||||
|
│ └── scripts/ # 便利スクリプト
|
||||||
|
└── tools/ # ツール比較・移行ガイド
|
||||||
|
├── migration/ # 外部ツールからの移行
|
||||||
|
└── comparison/ # 機能比較表
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🤝 コントリビューション
|
||||||
|
|
||||||
|
このプロジェクトは、GitHub機能の理解を深めたい開発者のためのリソースです。新しいケーススタディ、機能の発見、ベストプラクティスなど、あらゆる貢献を歓迎します。
|
||||||
|
|
||||||
|
### 貢献方法
|
||||||
|
1. このリポジトリをフォーク
|
||||||
|
2. Feature branchを作成 (`git checkout -b feature/amazing-discovery`)
|
||||||
|
3. 変更をコミット (`git commit -m 'Add: 新しいGitHub活用法'`)
|
||||||
|
4. ブランチをプッシュ (`git push origin feature/amazing-discovery`)
|
||||||
|
5. Pull Requestを作成
|
||||||
|
|
||||||
|
## 📄 ライセンス
|
||||||
|
|
||||||
|
MIT License - 詳細は[LICENSE](LICENSE)ファイルを参照してください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
> 💡 **Note**: このプロジェクトは継続的に更新されます。最新のGitHub機能や新しい活用方法を随時追加していきます。
|
||||||
1319
docs/GITHUB_COMPLETE_GUIDE.md
Normal file
1319
docs/GITHUB_COMPLETE_GUIDE.md
Normal file
File diff suppressed because it is too large
Load diff
31
docs/Gemfile
Normal file
31
docs/Gemfile
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
# GitHub Pages用Gemfile
|
||||||
|
|
||||||
|
source "https://rubygems.org"
|
||||||
|
|
||||||
|
# Jekyll
|
||||||
|
gem "jekyll", "~> 4.3.0"
|
||||||
|
|
||||||
|
# GitHub Pages
|
||||||
|
gem "github-pages", group: :jekyll_plugins
|
||||||
|
|
||||||
|
# Jekyll plugins
|
||||||
|
group :jekyll_plugins do
|
||||||
|
gem "jekyll-feed", "~> 0.12"
|
||||||
|
gem "jekyll-sitemap"
|
||||||
|
gem "jekyll-seo-tag"
|
||||||
|
gem "jekyll-remote-theme"
|
||||||
|
end
|
||||||
|
|
||||||
|
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
|
||||||
|
# and associated library.
|
||||||
|
platforms :mingw, :x64_mingw, :mswin, :jruby do
|
||||||
|
gem "tzinfo", ">= 1", "< 3"
|
||||||
|
gem "tzinfo-data"
|
||||||
|
end
|
||||||
|
|
||||||
|
# Performance-booster for watching directories on Windows
|
||||||
|
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
|
||||||
|
|
||||||
|
# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
|
||||||
|
# do not have a Java counterpart.
|
||||||
|
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
|
||||||
44
docs/README.md
Normal file
44
docs/README.md
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
# 📚 GitHub Research Tool - ドキュメント
|
||||||
|
|
||||||
|
このディレクトリには、GitHub機能の詳細なドキュメントが含まれています。
|
||||||
|
|
||||||
|
## 📁 ディレクトリ構成
|
||||||
|
|
||||||
|
### 📘 features/
|
||||||
|
GitHub機能別の詳細ドキュメント
|
||||||
|
- リポジトリ管理
|
||||||
|
- Issue管理
|
||||||
|
- Pull Request
|
||||||
|
- GitHub Actions
|
||||||
|
- Projects
|
||||||
|
- セキュリティ機能
|
||||||
|
- その他の機能
|
||||||
|
|
||||||
|
### 📓 case-studies/
|
||||||
|
実践的なケーススタディ集
|
||||||
|
- 新機能開発フロー
|
||||||
|
- バグ修正プロセス
|
||||||
|
- リリース管理
|
||||||
|
- チーム開発
|
||||||
|
- オープンソースプロジェクト管理
|
||||||
|
|
||||||
|
### 🔧 workflows/
|
||||||
|
GitHub Actionsワークフロー例
|
||||||
|
- CI/CDパイプライン
|
||||||
|
- 自動テスト
|
||||||
|
- リリース自動化
|
||||||
|
- セキュリティスキャン
|
||||||
|
- 通知とレポート
|
||||||
|
|
||||||
|
## 🎯 使い方
|
||||||
|
|
||||||
|
1. **初心者の方**: `features/`から基本機能を学習
|
||||||
|
2. **実践したい方**: `case-studies/`で実例を確認
|
||||||
|
3. **自動化したい方**: `workflows/`でActions設定を参照
|
||||||
|
|
||||||
|
## 📝 ドキュメント規約
|
||||||
|
|
||||||
|
- 各ドキュメントは実践的な例を含む
|
||||||
|
- スクリーンショットや図解を活用
|
||||||
|
- コマンドやコードは実行可能な形で記載
|
||||||
|
- 外部ツールとの比較を含める
|
||||||
71
docs/_config.yml
Normal file
71
docs/_config.yml
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
# GitHub Research Tool - Website Configuration
|
||||||
|
|
||||||
|
title: "GitHub完全活用ガイド"
|
||||||
|
description: "外部ツールに依存せず、GitHub一つで開発業務を完結させるための網羅的解説書"
|
||||||
|
url: "https://marketing-shibata50.github.io"
|
||||||
|
baseurl: "/github-research-tool"
|
||||||
|
|
||||||
|
# GitHub Pages settings
|
||||||
|
remote_theme: "pages-themes/minimal@v0.2.0"
|
||||||
|
plugins:
|
||||||
|
- jekyll-remote-theme
|
||||||
|
- jekyll-sitemap
|
||||||
|
- jekyll-feed
|
||||||
|
- jekyll-seo-tag
|
||||||
|
|
||||||
|
# Navigation
|
||||||
|
header_pages:
|
||||||
|
- index.md
|
||||||
|
- features/01-repository-basics.md
|
||||||
|
- features/02-issues-management.md
|
||||||
|
- GITHUB_COMPLETE_GUIDE.md
|
||||||
|
|
||||||
|
# GitHub repository
|
||||||
|
github:
|
||||||
|
repository_name: github-research-tool
|
||||||
|
repository_url: https://github.com/marketing-shibata50/github-research-tool
|
||||||
|
|
||||||
|
# Author
|
||||||
|
author:
|
||||||
|
name: "GitHub Research Team"
|
||||||
|
email: "research@github-tools.com"
|
||||||
|
|
||||||
|
# Site settings
|
||||||
|
markdown: kramdown
|
||||||
|
highlighter: rouge
|
||||||
|
kramdown:
|
||||||
|
input: GFM
|
||||||
|
syntax_highlighter: rouge
|
||||||
|
|
||||||
|
# Include/Exclude files
|
||||||
|
include:
|
||||||
|
- _pages
|
||||||
|
- assets
|
||||||
|
|
||||||
|
exclude:
|
||||||
|
- vendor
|
||||||
|
- README.md
|
||||||
|
- Gemfile
|
||||||
|
- Gemfile.lock
|
||||||
|
- node_modules
|
||||||
|
- package.json
|
||||||
|
|
||||||
|
# Collections
|
||||||
|
collections:
|
||||||
|
guides:
|
||||||
|
output: true
|
||||||
|
permalink: /:collection/:name/
|
||||||
|
examples:
|
||||||
|
output: true
|
||||||
|
permalink: /:collection/:name/
|
||||||
|
|
||||||
|
# SEO
|
||||||
|
lang: ja
|
||||||
|
timezone: Asia/Tokyo
|
||||||
|
|
||||||
|
# Google Analytics (optional)
|
||||||
|
# google_analytics: UA-XXXXXXXXX-X
|
||||||
|
|
||||||
|
# Social
|
||||||
|
social:
|
||||||
|
github: marketing-shibata50
|
||||||
413
docs/features/01-repository-basics.md
Normal file
413
docs/features/01-repository-basics.md
Normal file
|
|
@ -0,0 +1,413 @@
|
||||||
|
# 📁 GitHub リポジトリ基礎
|
||||||
|
|
||||||
|
GitHubリポジトリの基本的な機能と操作方法を網羅的に解説します。
|
||||||
|
|
||||||
|
## 🎯 学習目標
|
||||||
|
|
||||||
|
- リポジトリの作成から管理まで一連の操作をマスター
|
||||||
|
- ブランチ戦略の理解と実践
|
||||||
|
- タグとリリースの効果的な活用
|
||||||
|
- 外部ツールとの違いを理解
|
||||||
|
|
||||||
|
## 📚 目次
|
||||||
|
|
||||||
|
1. [リポジトリ作成・初期設定](#1-リポジトリ作成初期設定)
|
||||||
|
2. [ブランチ管理](#2-ブランチ管理)
|
||||||
|
3. [コミット管理](#3-コミット管理)
|
||||||
|
4. [タグ・リリース管理](#4-タグリリース管理)
|
||||||
|
5. [リポジトリ設定](#5-リポジトリ設定)
|
||||||
|
6. [外部ツールとの比較](#6-外部ツールとの比較)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. リポジトリ作成・初期設定
|
||||||
|
|
||||||
|
### 🚀 新規リポジトリ作成
|
||||||
|
|
||||||
|
#### Web UIでの作成
|
||||||
|
```markdown
|
||||||
|
1. GitHub.com にログイン
|
||||||
|
2. 右上の「+」→「New repository」
|
||||||
|
3. 必要な設定を入力：
|
||||||
|
- Repository name: プロジェクト名
|
||||||
|
- Description: プロジェクトの説明
|
||||||
|
- Public/Private: 公開範囲
|
||||||
|
- README: 初期化オプション
|
||||||
|
- .gitignore: 言語・フレームワーク選択
|
||||||
|
- License: ライセンス選択
|
||||||
|
```
|
||||||
|
|
||||||
|
#### CLI (GitHub CLI) での作成
|
||||||
|
```bash
|
||||||
|
# 基本的なリポジトリ作成
|
||||||
|
gh repo create my-project --public --description "プロジェクトの説明"
|
||||||
|
|
||||||
|
# README、.gitignore、ライセンス付きで作成
|
||||||
|
gh repo create my-project --public --add-readme --gitignore Node --license MIT
|
||||||
|
|
||||||
|
# ローカルディレクトリから作成
|
||||||
|
gh repo create --source=. --public --push
|
||||||
|
```
|
||||||
|
|
||||||
|
### 🔧 初期設定のベストプラクティス
|
||||||
|
|
||||||
|
#### 1. README.md の充実
|
||||||
|
```markdown
|
||||||
|
# プロジェクト名
|
||||||
|
|
||||||
|
## 概要
|
||||||
|
プロジェクトの目的と機能の簡潔な説明
|
||||||
|
|
||||||
|
## インストール
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
基本的な使い方のサンプル
|
||||||
|
|
||||||
|
## 貢献方法
|
||||||
|
コントリビューションガイドライン
|
||||||
|
|
||||||
|
## ライセンス
|
||||||
|
ライセンス情報
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2. .gitignore の設定
|
||||||
|
```bash
|
||||||
|
# GitHub提供のテンプレートを使用
|
||||||
|
curl -s https://api.github.com/gitignore/templates/Node > .gitignore
|
||||||
|
|
||||||
|
# 独自の設定を追加
|
||||||
|
echo "# Custom ignores
|
||||||
|
*.log
|
||||||
|
.env.local
|
||||||
|
dist/" >> .gitignore
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. ブランチ管理
|
||||||
|
|
||||||
|
### 🌳 ブランチ戦略
|
||||||
|
|
||||||
|
#### Git Flow
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A[main] --> B[develop]
|
||||||
|
B --> C[feature/login]
|
||||||
|
B --> D[feature/payment]
|
||||||
|
C --> B
|
||||||
|
D --> B
|
||||||
|
B --> E[release/v1.0]
|
||||||
|
E --> A
|
||||||
|
E --> B
|
||||||
|
A --> F[hotfix/security-fix]
|
||||||
|
F --> A
|
||||||
|
F --> B
|
||||||
|
```
|
||||||
|
|
||||||
|
#### GitHub Flow (推奨)
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A[main] --> B[feature/new-component]
|
||||||
|
B --> C[Pull Request]
|
||||||
|
C --> D[Code Review]
|
||||||
|
D --> E[Merge to main]
|
||||||
|
E --> F[Deploy]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 📋 ブランチ操作
|
||||||
|
|
||||||
|
#### ローカルでのブランチ作成
|
||||||
|
```bash
|
||||||
|
# 新しいブランチを作成して切り替え
|
||||||
|
git checkout -b feature/user-authentication
|
||||||
|
|
||||||
|
# または（Git 2.23以降）
|
||||||
|
git switch -c feature/user-authentication
|
||||||
|
|
||||||
|
# リモートにプッシュ
|
||||||
|
git push -u origin feature/user-authentication
|
||||||
|
```
|
||||||
|
|
||||||
|
#### GitHub Web UIでのブランチ作成
|
||||||
|
```markdown
|
||||||
|
1. リポジトリページで「main」ブランチ選択部分をクリック
|
||||||
|
2. 新しいブランチ名を入力
|
||||||
|
3. 「Create branch: branch-name from main」をクリック
|
||||||
|
```
|
||||||
|
|
||||||
|
#### GitHub CLI でのブランチ作成
|
||||||
|
```bash
|
||||||
|
# ブランチ作成とチェックアウト
|
||||||
|
gh repo fork --clone
|
||||||
|
cd repository-name
|
||||||
|
git checkout -b feature/new-feature
|
||||||
|
|
||||||
|
# 変更をプッシュ
|
||||||
|
git push origin feature/new-feature
|
||||||
|
```
|
||||||
|
|
||||||
|
### 🛡️ ブランチ保護設定
|
||||||
|
|
||||||
|
#### main ブランチの保護
|
||||||
|
```markdown
|
||||||
|
1. Settings → Branches
|
||||||
|
2. 「Add rule」をクリック
|
||||||
|
3. Branch name pattern: `main`
|
||||||
|
4. 設定項目：
|
||||||
|
✅ Require a pull request before merging
|
||||||
|
✅ Require approvals (推奨: 1人以上)
|
||||||
|
✅ Dismiss stale PR approvals when new commits are pushed
|
||||||
|
✅ Require status checks to pass before merging
|
||||||
|
✅ Require branches to be up to date before merging
|
||||||
|
✅ Require conversation resolution before merging
|
||||||
|
✅ Restrict pushes that create files larger than 100MB
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. コミット管理
|
||||||
|
|
||||||
|
### 📝 効果的なコミットメッセージ
|
||||||
|
|
||||||
|
#### Conventional Commits 形式
|
||||||
|
```bash
|
||||||
|
# 形式: <type>[optional scope]: <description>
|
||||||
|
|
||||||
|
git commit -m "feat(auth): add user authentication system"
|
||||||
|
git commit -m "fix(api): resolve timeout issue in user endpoint"
|
||||||
|
git commit -m "docs: update README with installation guide"
|
||||||
|
git commit -m "refactor(utils): simplify date formatting function"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### タイプ一覧
|
||||||
|
- `feat`: 新機能
|
||||||
|
- `fix`: バグ修正
|
||||||
|
- `docs`: ドキュメント変更
|
||||||
|
- `style`: コードスタイル変更（機能に影響なし）
|
||||||
|
- `refactor`: リファクタリング
|
||||||
|
- `test`: テスト追加・修正
|
||||||
|
- `chore`: ビルド・設定ファイル変更
|
||||||
|
|
||||||
|
### 🔍 コミット履歴の管理
|
||||||
|
|
||||||
|
#### 履歴の確認
|
||||||
|
```bash
|
||||||
|
# グラフィカルな履歴表示
|
||||||
|
git log --graph --oneline --all
|
||||||
|
|
||||||
|
# 特定のファイルの履歴
|
||||||
|
git log --follow -- path/to/file
|
||||||
|
|
||||||
|
# GitHub CLI での履歴確認
|
||||||
|
gh repo view --web
|
||||||
|
```
|
||||||
|
|
||||||
|
#### コミットの修正
|
||||||
|
```bash
|
||||||
|
# 最後のコミットメッセージを修正
|
||||||
|
git commit --amend -m "corrected commit message"
|
||||||
|
|
||||||
|
# 複数のコミットを整理（インタラクティブリベース）
|
||||||
|
git rebase -i HEAD~3
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. タグ・リリース管理
|
||||||
|
|
||||||
|
### 🏷️ タグの作成と管理
|
||||||
|
|
||||||
|
#### セマンティックバージョニング
|
||||||
|
```bash
|
||||||
|
# アノテートタグの作成
|
||||||
|
git tag -a v1.0.0 -m "Version 1.0.0 - Initial release"
|
||||||
|
|
||||||
|
# ライトウェイトタグの作成
|
||||||
|
git tag v1.0.1
|
||||||
|
|
||||||
|
# タグをリモートにプッシュ
|
||||||
|
git push origin v1.0.0
|
||||||
|
|
||||||
|
# すべてのタグをプッシュ
|
||||||
|
git push origin --tags
|
||||||
|
```
|
||||||
|
|
||||||
|
#### GitHub CLI でのタグ作成
|
||||||
|
```bash
|
||||||
|
# タグ作成とリリース同時作成
|
||||||
|
gh release create v1.0.0 --title "Version 1.0.0" --notes "初回リリース"
|
||||||
|
|
||||||
|
# プレリリース作成
|
||||||
|
gh release create v1.1.0-beta --prerelease --title "Beta Release" --notes "ベータ版"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 📦 リリース管理
|
||||||
|
|
||||||
|
#### GitHub Releases の活用
|
||||||
|
```markdown
|
||||||
|
1. リポジトリページ → Releases → Create a new release
|
||||||
|
2. 設定項目：
|
||||||
|
- Tag version: v1.0.0
|
||||||
|
- Release title: Version 1.0.0 - New Features
|
||||||
|
- Description: リリースノート（変更点、新機能など）
|
||||||
|
- Attach binaries: ビルド成果物のアップロード
|
||||||
|
- Pre-release: ベータ版の場合はチェック
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 自動リリースノート生成
|
||||||
|
```yaml
|
||||||
|
# .github/release.yml
|
||||||
|
changelog:
|
||||||
|
exclude:
|
||||||
|
labels:
|
||||||
|
- ignore-for-release
|
||||||
|
categories:
|
||||||
|
- title: Breaking Changes 🛠
|
||||||
|
labels:
|
||||||
|
- Semver-Major
|
||||||
|
- breaking-change
|
||||||
|
- title: Exciting New Features 🎉
|
||||||
|
labels:
|
||||||
|
- Semver-Minor
|
||||||
|
- enhancement
|
||||||
|
- title: Bug Fixes 🐛
|
||||||
|
labels:
|
||||||
|
- Semver-Patch
|
||||||
|
- bug
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. リポジトリ設定
|
||||||
|
|
||||||
|
### ⚙️ 一般設定
|
||||||
|
|
||||||
|
#### 基本情報の設定
|
||||||
|
```markdown
|
||||||
|
Settings → General:
|
||||||
|
- Repository name: 名前変更
|
||||||
|
- Description: 説明文
|
||||||
|
- Website: プロジェクトURL
|
||||||
|
- Topics: 検索用タグ
|
||||||
|
- Include in the home page: 個人ページでの表示設定
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 機能の有効/無効
|
||||||
|
```markdown
|
||||||
|
Features:
|
||||||
|
✅ Wikis: プロジェクトドキュメント
|
||||||
|
✅ Issues: バグ報告・機能要望
|
||||||
|
✅ Sponsorships: スポンサー機能
|
||||||
|
✅ Preserve this repository: アーカイブ設定
|
||||||
|
✅ Discussions: コミュニティディスカッション
|
||||||
|
|
||||||
|
Pull Requests:
|
||||||
|
✅ Allow merge commits
|
||||||
|
✅ Allow squash merging
|
||||||
|
✅ Allow rebase merging
|
||||||
|
✅ Always suggest updating pull request branches
|
||||||
|
✅ Automatically delete head branches
|
||||||
|
```
|
||||||
|
|
||||||
|
### 🔐 セキュリティ設定
|
||||||
|
|
||||||
|
#### セキュリティ機能の有効化
|
||||||
|
```markdown
|
||||||
|
Settings → Security:
|
||||||
|
✅ Dependency graph: 依存関係の可視化
|
||||||
|
✅ Dependabot alerts: 脆弱性アラート
|
||||||
|
✅ Dependabot security updates: 自動セキュリティアップデート
|
||||||
|
✅ Dependabot version updates: 依存関係の自動更新
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 外部ツールとの比較
|
||||||
|
|
||||||
|
### 📊 機能比較表
|
||||||
|
|
||||||
|
| 機能 | GitHub | GitLab | Bitbucket | SVN | 備考 |
|
||||||
|
|------|--------|--------|-----------|-----|------|
|
||||||
|
| リポジトリホスティング | ✅ | ✅ | ✅ | ❌ | GitHubは最大規模 |
|
||||||
|
| ブランチ管理 | ✅ | ✅ | ✅ | ❌ | SVNはtrunk/branches |
|
||||||
|
| タグ・リリース | ✅ | ✅ | ✅ | ✅ | GitHubのReleasesが最も充実 |
|
||||||
|
| Web UI | ✅ | ✅ | ✅ | ❌ | GitHubが最もユーザーフレンドリー |
|
||||||
|
| CLI ツール | ✅ | ✅ | ❌ | ❌ | GitHub CLIが最も強力 |
|
||||||
|
| ブランチ保護 | ✅ | ✅ | ✅ | ❌ | セキュリティルールの充実度 |
|
||||||
|
|
||||||
|
### 🔄 移行時のポイント
|
||||||
|
|
||||||
|
#### SVN → Git 移行
|
||||||
|
```bash
|
||||||
|
# SVNリポジトリをGitに変換
|
||||||
|
git svn clone http://svn.example.com/project
|
||||||
|
|
||||||
|
# GitHubリポジトリを作成
|
||||||
|
gh repo create migrated-project --public
|
||||||
|
|
||||||
|
# コードをプッシュ
|
||||||
|
git remote add origin https://github.com/username/migrated-project.git
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 他のGitホスティングサービスからの移行
|
||||||
|
```bash
|
||||||
|
# 既存リポジトリをクローン
|
||||||
|
git clone --mirror https://gitlab.com/user/old-repo.git
|
||||||
|
|
||||||
|
# GitHubに新しいリポジトリを作成
|
||||||
|
gh repo create new-repo --public
|
||||||
|
|
||||||
|
# ミラーをプッシュ
|
||||||
|
cd old-repo.git
|
||||||
|
git remote set-url origin https://github.com/user/new-repo.git
|
||||||
|
git push --mirror
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎓 実践演習
|
||||||
|
|
||||||
|
### 演習1: リポジトリ作成から保護設定まで
|
||||||
|
1. 新しいリポジトリを作成
|
||||||
|
2. README、.gitignore、ライセンスを設定
|
||||||
|
3. developブランチを作成
|
||||||
|
4. main ブランチに保護ルールを設定
|
||||||
|
|
||||||
|
### 演習2: ブランチ戦略の実践
|
||||||
|
1. feature ブランチを作成
|
||||||
|
2. 機能を実装してコミット
|
||||||
|
3. プルリクエストを作成
|
||||||
|
4. マージ後のブランチクリーンアップ
|
||||||
|
|
||||||
|
### 演習3: リリース管理
|
||||||
|
1. セマンティックバージョンでタグ作成
|
||||||
|
2. リリースノートを作成
|
||||||
|
3. バイナリファイルの添付
|
||||||
|
4. 自動リリースノート設定
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔗 関連リソース
|
||||||
|
|
||||||
|
- [GitHub Docs - Repositories](https://docs.github.com/en/repositories)
|
||||||
|
- [GitHub CLI Manual](https://cli.github.com/manual/)
|
||||||
|
- [Git Documentation](https://git-scm.com/doc)
|
||||||
|
- [Semantic Versioning](https://semver.org/)
|
||||||
|
- [Conventional Commits](https://www.conventionalcommits.org/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 まとめ
|
||||||
|
|
||||||
|
GitHub リポジトリの基本機能をマスターすることで：
|
||||||
|
|
||||||
|
✅ **効率的なコード管理** - ブランチ戦略によるチーム開発の最適化
|
||||||
|
✅ **品質保証** - ブランチ保護とレビュープロセスによる品質維持
|
||||||
|
✅ **リリース管理** - タグとリリース機能による体系的なバージョン管理
|
||||||
|
✅ **セキュリティ** - 適切な設定による安全なコード管理
|
||||||
|
|
||||||
|
次は[Issue管理編](02-issues-management.md)で、プロジェクト管理の基礎を学習しましょう。
|
||||||
593
docs/features/02-issues-management.md
Normal file
593
docs/features/02-issues-management.md
Normal file
|
|
@ -0,0 +1,593 @@
|
||||||
|
# 🎫 GitHub Issues 管理
|
||||||
|
|
||||||
|
GitHub Issuesを活用したプロジェクト管理とタスク追跡の完全ガイド。外部のプロジェクト管理ツールを使わずに、効率的な開発プロセスを構築する方法を学習します。
|
||||||
|
|
||||||
|
## 🎯 学習目標
|
||||||
|
|
||||||
|
- Issuesを使った効果的なタスク管理
|
||||||
|
- ラベル・マイルストーン・プロジェクトとの連携
|
||||||
|
- テンプレートによる標準化
|
||||||
|
- 自動化による効率向上
|
||||||
|
- 外部ツール（Jira等）との比較理解
|
||||||
|
|
||||||
|
## 📚 目次
|
||||||
|
|
||||||
|
1. [Issues基本操作](#1-issues基本操作)
|
||||||
|
2. [ラベル管理](#2-ラベル管理)
|
||||||
|
3. [マイルストーン管理](#3-マイルストーン管理)
|
||||||
|
4. [Issueテンプレート](#4-issueテンプレート)
|
||||||
|
5. [プロジェクトとの連携](#5-プロジェクトとの連携)
|
||||||
|
6. [自動化・効率化](#6-自動化効率化)
|
||||||
|
7. [外部ツールとの比較](#7-外部ツールとの比較)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Issues基本操作
|
||||||
|
|
||||||
|
### 📝 Issue作成
|
||||||
|
|
||||||
|
#### Web UIでの作成
|
||||||
|
```markdown
|
||||||
|
1. リポジトリページ → Issues → New issue
|
||||||
|
2. 入力項目：
|
||||||
|
- Title: 簡潔で分かりやすいタイトル
|
||||||
|
- Comment: 詳細な説明（Markdown記法使用可能）
|
||||||
|
- Assignees: 担当者の指定
|
||||||
|
- Labels: 分類用ラベル
|
||||||
|
- Projects: 関連プロジェクト
|
||||||
|
- Milestone: 対象マイルストーン
|
||||||
|
```
|
||||||
|
|
||||||
|
#### GitHub CLI での作成
|
||||||
|
```bash
|
||||||
|
# 基本的なIssue作成
|
||||||
|
gh issue create --title "バグ修正: ログイン機能が動作しない" --body "ログインボタンをクリックしても反応がない"
|
||||||
|
|
||||||
|
# テンプレートを使用してIssue作成
|
||||||
|
gh issue create --template bug_report.md
|
||||||
|
|
||||||
|
# ラベルと担当者を指定
|
||||||
|
gh issue create --title "新機能: ユーザープロフィール" --label "enhancement,frontend" --assignee username
|
||||||
|
```
|
||||||
|
|
||||||
|
### 🔍 Issue検索・フィルタリング
|
||||||
|
|
||||||
|
#### 高度な検索クエリ
|
||||||
|
```bash
|
||||||
|
# オープンなIssuesのみ
|
||||||
|
is:open is:issue
|
||||||
|
|
||||||
|
# 自分が担当のIssues
|
||||||
|
is:issue assignee:@me
|
||||||
|
|
||||||
|
# 特定のラベルが付いたIssues
|
||||||
|
is:issue label:bug
|
||||||
|
|
||||||
|
# 複数条件の組み合わせ
|
||||||
|
is:issue is:open label:enhancement assignee:username
|
||||||
|
|
||||||
|
# 作成日でフィルタ
|
||||||
|
is:issue created:>2024-01-01
|
||||||
|
|
||||||
|
# コメント数でフィルタ
|
||||||
|
is:issue comments:>5
|
||||||
|
|
||||||
|
# マイルストーンでフィルタ
|
||||||
|
is:issue milestone:"Version 2.0"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### GitHub CLI での検索
|
||||||
|
```bash
|
||||||
|
# オープンなバグIssuesを表示
|
||||||
|
gh issue list --label bug --state open
|
||||||
|
|
||||||
|
# 自分が担当のIssuesを表示
|
||||||
|
gh issue list --assignee @me
|
||||||
|
|
||||||
|
# JSONで出力（スクリプト処理用）
|
||||||
|
gh issue list --json number,title,labels,assignees
|
||||||
|
```
|
||||||
|
|
||||||
|
### 💬 Issue管理
|
||||||
|
|
||||||
|
#### コメントとやり取り
|
||||||
|
```markdown
|
||||||
|
# メンション機能
|
||||||
|
@username こちらの件、確認をお願いします。
|
||||||
|
|
||||||
|
# 他のIssue参照
|
||||||
|
この問題は #123 と関連があります。
|
||||||
|
|
||||||
|
# コミット参照
|
||||||
|
この修正は a1b2c3d で対応済みです。
|
||||||
|
|
||||||
|
# PR参照
|
||||||
|
修正は #45 で対応中です。
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Issue状態管理
|
||||||
|
```bash
|
||||||
|
# CLI でIssueをクローズ
|
||||||
|
gh issue close 123 --comment "修正が完了しました"
|
||||||
|
|
||||||
|
# 理由を指定してクローズ
|
||||||
|
gh issue close 123 --reason "completed" # または "not planned"
|
||||||
|
|
||||||
|
# Issueを再オープン
|
||||||
|
gh issue reopen 123
|
||||||
|
|
||||||
|
# 担当者を変更
|
||||||
|
gh issue edit 123 --add-assignee newuser --remove-assignee olduser
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. ラベル管理
|
||||||
|
|
||||||
|
### 🏷️ 効果的なラベル体系
|
||||||
|
|
||||||
|
#### 推奨ラベル構成
|
||||||
|
```yaml
|
||||||
|
# 種類別（Type）
|
||||||
|
- bug: バグ報告
|
||||||
|
- enhancement: 新機能・改善
|
||||||
|
- documentation: ドキュメント関連
|
||||||
|
- question: 質問・サポート
|
||||||
|
- duplicate: 重複Issue
|
||||||
|
|
||||||
|
# 優先度別（Priority）
|
||||||
|
- priority:high: 緊急度高
|
||||||
|
- priority:medium: 通常優先度
|
||||||
|
- priority:low: 低優先度
|
||||||
|
|
||||||
|
# 状態別（Status）
|
||||||
|
- status:ready: 作業可能
|
||||||
|
- status:in-progress: 作業中
|
||||||
|
- status:blocked: ブロックされている
|
||||||
|
- status:review: レビュー待ち
|
||||||
|
|
||||||
|
# 領域別（Area）
|
||||||
|
- area:frontend: フロントエンド
|
||||||
|
- area:backend: バックエンド
|
||||||
|
- area:api: API関連
|
||||||
|
- area:ui-ux: UI/UX
|
||||||
|
- area:performance: パフォーマンス
|
||||||
|
- area:security: セキュリティ
|
||||||
|
|
||||||
|
# サイズ別（Effort）
|
||||||
|
- size:small: 小規模（1-2日）
|
||||||
|
- size:medium: 中規模（3-5日）
|
||||||
|
- size:large: 大規模（1週間以上）
|
||||||
|
```
|
||||||
|
|
||||||
|
#### ラベル作成と管理
|
||||||
|
```bash
|
||||||
|
# GitHub CLI でラベル作成
|
||||||
|
gh label create "priority:high" --color "FF0000" --description "緊急度の高いタスク"
|
||||||
|
|
||||||
|
# 既存ラベルの編集
|
||||||
|
gh label edit "bug" --color "FF6B6B" --description "バグ報告"
|
||||||
|
|
||||||
|
# ラベル一覧表示
|
||||||
|
gh label list
|
||||||
|
|
||||||
|
# ラベル削除
|
||||||
|
gh label delete "outdated-label"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 🎨 ラベルの色分けとベストプラクティス
|
||||||
|
|
||||||
|
#### 色分けの推奨方式
|
||||||
|
```markdown
|
||||||
|
🔴 高優先度・緊急: #FF0000 (赤)
|
||||||
|
🟠 中優先度: #FFA500 (オレンジ)
|
||||||
|
🟡 低優先度: #FFFF00 (黄)
|
||||||
|
🟢 完了・承認: #00FF00 (緑)
|
||||||
|
🔵 情報・質問: #0000FF (青)
|
||||||
|
🟣 進行中: #800080 (紫)
|
||||||
|
⚫ ブロック・問題: #000000 (黒)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. マイルストーン管理
|
||||||
|
|
||||||
|
### 🎯 マイルストーンの設計
|
||||||
|
|
||||||
|
#### 効果的なマイルストーン例
|
||||||
|
```markdown
|
||||||
|
# バージョンベース
|
||||||
|
- v1.0.0 - 初回リリース (2024-03-01)
|
||||||
|
- v1.1.0 - 機能追加 (2024-04-15)
|
||||||
|
- v2.0.0 - メジャーアップデート (2024-06-30)
|
||||||
|
|
||||||
|
# 機能ベース
|
||||||
|
- User Authentication System
|
||||||
|
- Payment Integration
|
||||||
|
- Mobile App Support
|
||||||
|
|
||||||
|
# 時期ベース
|
||||||
|
- Q1 2024 Goals
|
||||||
|
- Summer Release
|
||||||
|
- Year-end Cleanup
|
||||||
|
```
|
||||||
|
|
||||||
|
#### マイルストーン作成と管理
|
||||||
|
```bash
|
||||||
|
# マイルストーン作成
|
||||||
|
gh issue create-milestone "v1.0.0" --description "初回リリース" --due-date "2024-03-01"
|
||||||
|
|
||||||
|
# マイルストーン一覧
|
||||||
|
gh issue list-milestones
|
||||||
|
|
||||||
|
# Issueをマイルストーンに割り当て
|
||||||
|
gh issue edit 123 --milestone "v1.0.0"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 📊 進捗管理
|
||||||
|
|
||||||
|
#### マイルストーン進捗の可視化
|
||||||
|
```markdown
|
||||||
|
# マイルストーンページで確認できる情報：
|
||||||
|
- 全体の進捗率（パーセンテージ）
|
||||||
|
- オープン・クローズされたIssue数
|
||||||
|
- 期限までの残り時間
|
||||||
|
- 各Issueの状態
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Issueテンプレート
|
||||||
|
|
||||||
|
### 📄 テンプレート作成
|
||||||
|
|
||||||
|
#### バグ報告テンプレート
|
||||||
|
```yaml
|
||||||
|
# .github/ISSUE_TEMPLATE/bug_report.yml
|
||||||
|
name: 🐛 バグ報告
|
||||||
|
description: バグを報告するためのテンプレート
|
||||||
|
title: "[BUG] "
|
||||||
|
labels: ["bug", "needs-triage"]
|
||||||
|
assignees:
|
||||||
|
- maintainer-username
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |
|
||||||
|
バグを報告いただき、ありがとうございます。以下の情報を詳しく記入してください。
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: bug-description
|
||||||
|
attributes:
|
||||||
|
label: 🐛 バグの説明
|
||||||
|
description: バグの詳細な説明を記入してください
|
||||||
|
placeholder: 何が起こっているか、期待される動作との違いを説明
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: reproduction-steps
|
||||||
|
attributes:
|
||||||
|
label: 🔄 再現手順
|
||||||
|
description: バグを再現する手順を記入してください
|
||||||
|
placeholder: |
|
||||||
|
1. ○○のページに移動
|
||||||
|
2. ○○をクリック
|
||||||
|
3. ○○を入力
|
||||||
|
4. エラーが発生
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: expected-behavior
|
||||||
|
attributes:
|
||||||
|
label: ✅ 期待される動作
|
||||||
|
description: 本来はどのような動作を期待していましたか？
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: environment
|
||||||
|
attributes:
|
||||||
|
label: 🖥️ 環境情報
|
||||||
|
description: 環境に関する情報
|
||||||
|
placeholder: |
|
||||||
|
- OS: [例: Windows 10, macOS 13.0, Ubuntu 20.04]
|
||||||
|
- ブラウザ: [例: Chrome 108, Firefox 107, Safari 16]
|
||||||
|
- バージョン: [例: v1.2.3]
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: additional-context
|
||||||
|
attributes:
|
||||||
|
label: 📋 追加情報
|
||||||
|
description: スクリーンショット、ログ、その他関連情報があれば記入してください
|
||||||
|
placeholder: エラーメッセージ、スクリーンショットなど
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 機能要求テンプレート
|
||||||
|
```yaml
|
||||||
|
# .github/ISSUE_TEMPLATE/feature_request.yml
|
||||||
|
name: ✨ 機能要求
|
||||||
|
description: 新機能や改善の要求
|
||||||
|
title: "[FEATURE] "
|
||||||
|
labels: ["enhancement", "needs-discussion"]
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |
|
||||||
|
新機能の提案をありがとうございます！
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: problem-description
|
||||||
|
attributes:
|
||||||
|
label: 🎯 解決したい問題
|
||||||
|
description: この機能によってどのような問題を解決したいですか？
|
||||||
|
placeholder: 現在困っていることや、改善したい点を説明してください
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: proposed-solution
|
||||||
|
attributes:
|
||||||
|
label: 💡 提案する解決策
|
||||||
|
description: どのような機能や改善を提案しますか？
|
||||||
|
placeholder: 具体的な機能の説明や実装案があれば記入してください
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: alternatives
|
||||||
|
attributes:
|
||||||
|
label: 🔄 代替案
|
||||||
|
description: 他に考えられる解決策があれば記入してください
|
||||||
|
placeholder: 別のアプローチや既存の回避策など
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: additional-context
|
||||||
|
attributes:
|
||||||
|
label: 📋 追加情報
|
||||||
|
description: 参考資料、モックアップ、外部リンクなど
|
||||||
|
placeholder: 関連するリンクやファイルがあれば記入してください
|
||||||
|
```
|
||||||
|
|
||||||
|
### ⚙️ テンプレート設定
|
||||||
|
|
||||||
|
#### 設定ファイルの作成
|
||||||
|
```yaml
|
||||||
|
# .github/ISSUE_TEMPLATE/config.yml
|
||||||
|
blank_issues_enabled: false
|
||||||
|
contact_links:
|
||||||
|
- name: 💬 Q&A ディスカッション
|
||||||
|
url: https://github.com/username/repo/discussions
|
||||||
|
about: 質問がある場合はこちらをご利用ください
|
||||||
|
- name: 📖 ドキュメント
|
||||||
|
url: https://docs.example.com
|
||||||
|
about: 使い方やAPIドキュメントはこちら
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. プロジェクトとの連携
|
||||||
|
|
||||||
|
### 📋 GitHub Projects 連携
|
||||||
|
|
||||||
|
#### Issueの自動プロジェクト追加
|
||||||
|
```yaml
|
||||||
|
# .github/workflows/add-to-project.yml
|
||||||
|
name: Add Issue to Project
|
||||||
|
on:
|
||||||
|
issues:
|
||||||
|
types: [opened]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
add-to-project:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/add-to-project@v0.4.0
|
||||||
|
with:
|
||||||
|
project-url: https://github.com/users/username/projects/1
|
||||||
|
github-token: ${{ secrets.ADD_TO_PROJECT_TOKEN }}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### ラベルベースの自動ワークフロー
|
||||||
|
```yaml
|
||||||
|
# ラベルに応じて列を移動
|
||||||
|
name: Move Issue Based on Label
|
||||||
|
on:
|
||||||
|
issues:
|
||||||
|
types: [labeled]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
move-issue:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
if: github.event.label.name == 'in-progress'
|
||||||
|
steps:
|
||||||
|
- name: Move to In Progress
|
||||||
|
uses: leonsteinhaeuser/project-beta-automations@v2.0.1
|
||||||
|
with:
|
||||||
|
gh_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
user: username
|
||||||
|
project_id: 1
|
||||||
|
resource_node_id: ${{ github.event.issue.node_id }}
|
||||||
|
status_value: "In Progress"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 自動化・効率化
|
||||||
|
|
||||||
|
### 🤖 GitHub Actions による自動化
|
||||||
|
|
||||||
|
#### Issue自動ラベリング
|
||||||
|
```yaml
|
||||||
|
# .github/workflows/label-issues.yml
|
||||||
|
name: Auto Label Issues
|
||||||
|
on:
|
||||||
|
issues:
|
||||||
|
types: [opened]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
label:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/labeler@v4
|
||||||
|
with:
|
||||||
|
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
configuration-path: .github/labeler.yml
|
||||||
|
```
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# .github/labeler.yml
|
||||||
|
"area:frontend":
|
||||||
|
- "**/*.js"
|
||||||
|
- "**/*.vue"
|
||||||
|
- "**/*.css"
|
||||||
|
|
||||||
|
"area:backend":
|
||||||
|
- "**/*.py"
|
||||||
|
- "**/*.go"
|
||||||
|
- "**/*.java"
|
||||||
|
|
||||||
|
"documentation":
|
||||||
|
- "**/*.md"
|
||||||
|
- "docs/**/*"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 古いIssueの自動クローズ
|
||||||
|
```yaml
|
||||||
|
# .github/workflows/stale-issues.yml
|
||||||
|
name: Close Stale Issues
|
||||||
|
on:
|
||||||
|
schedule:
|
||||||
|
- cron: '0 0 * * 0' # 毎週日曜日
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
stale:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/stale@v8
|
||||||
|
with:
|
||||||
|
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
stale-issue-message: |
|
||||||
|
このIssueは60日間活動がありません。
|
||||||
|
7日以内に活動がない場合、自動的にクローズされます。
|
||||||
|
close-issue-message: |
|
||||||
|
このIssueは非アクティブのため自動的にクローズされました。
|
||||||
|
days-before-stale: 60
|
||||||
|
days-before-close: 7
|
||||||
|
```
|
||||||
|
|
||||||
|
### 📊 Issue分析・レポート
|
||||||
|
|
||||||
|
#### CLI による統計取得
|
||||||
|
```bash
|
||||||
|
# Issue統計を取得するスクリプト
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
echo "=== Issue Statistics ==="
|
||||||
|
echo "Total Issues: $(gh issue list --limit 1000 --json number | jq length)"
|
||||||
|
echo "Open Issues: $(gh issue list --state open --limit 1000 --json number | jq length)"
|
||||||
|
echo "Closed Issues: $(gh issue list --state closed --limit 1000 --json number | jq length)"
|
||||||
|
|
||||||
|
echo -e "\n=== Issues by Label ==="
|
||||||
|
gh issue list --limit 1000 --json labels | jq -r '.[].labels[].name' | sort | uniq -c | sort -nr
|
||||||
|
|
||||||
|
echo -e "\n=== Issues by Assignee ==="
|
||||||
|
gh issue list --limit 1000 --json assignees | jq -r '.[].assignees[].login' | sort | uniq -c | sort -nr
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 外部ツールとの比較
|
||||||
|
|
||||||
|
### 📊 機能比較表
|
||||||
|
|
||||||
|
| 機能 | GitHub Issues | Jira | Trello | Linear | 備考 |
|
||||||
|
|------|---------------|------|--------|--------|------|
|
||||||
|
| 基本的なIssue管理 | ✅ | ✅ | ✅ | ✅ | 全て対応 |
|
||||||
|
| カスタムフィールド | ❌ | ✅ | ❌ | ✅ | GitHubはラベルで代用 |
|
||||||
|
| ワークフロー管理 | ⚠️ | ✅ | ⚠️ | ✅ | GitHubはActionsで実現 |
|
||||||
|
| 時間トラッキング | ❌ | ✅ | ⚠️ | ✅ | 外部サービス連携が必要 |
|
||||||
|
| レポート機能 | ⚠️ | ✅ | ❌ | ✅ | APIやInsightsを活用 |
|
||||||
|
| マイルストーン | ✅ | ✅ | ❌ | ✅ | GitHubのマイルストーン機能 |
|
||||||
|
| サブタスク | ❌ | ✅ | ✅ | ✅ | GitHubはタスクリストで代用 |
|
||||||
|
| コード連携 | ✅ | ⚠️ | ❌ | ⚠️ | GitHubが最も強力 |
|
||||||
|
| コスト | 無料〜 | 有料 | 無料〜 | 有料 | GitHubがコスト効率良い |
|
||||||
|
|
||||||
|
### 🔄 Jira からの移行
|
||||||
|
|
||||||
|
#### 移行チェックリスト
|
||||||
|
```markdown
|
||||||
|
✅ Issue種別 → ラベルでの分類方法決定
|
||||||
|
✅ ワークフロー → GitHub Projects V2 での再現
|
||||||
|
✅ カスタムフィールド → ラベルやマイルストーンでの代替
|
||||||
|
✅ レポート → GitHub API + スクリプトでの実現
|
||||||
|
✅ 時間管理 → 外部サービス連携の検討
|
||||||
|
✅ 権限管理 → リポジトリレベルでの設定調整
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 移行スクリプト例
|
||||||
|
```python
|
||||||
|
# jira_to_github.py
|
||||||
|
import requests
|
||||||
|
import json
|
||||||
|
|
||||||
|
def migrate_issues(jira_url, github_repo, token):
|
||||||
|
# Jira API からIssue取得
|
||||||
|
jira_issues = fetch_jira_issues(jira_url)
|
||||||
|
|
||||||
|
for issue in jira_issues:
|
||||||
|
# GitHub Issue 形式に変換
|
||||||
|
github_issue = {
|
||||||
|
'title': issue['fields']['summary'],
|
||||||
|
'body': convert_description(issue['fields']['description']),
|
||||||
|
'labels': map_jira_labels(issue['fields']['labels'])
|
||||||
|
}
|
||||||
|
|
||||||
|
# GitHub API でIssue作成
|
||||||
|
create_github_issue(github_repo, github_issue, token)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎓 実践演習
|
||||||
|
|
||||||
|
### 演習1: Issue管理システム構築
|
||||||
|
1. バグ報告と機能要求のテンプレートを作成
|
||||||
|
2. 体系的なラベル分類を設計
|
||||||
|
3. マイルストーンを設定してIssueを分類
|
||||||
|
|
||||||
|
### 演習2: 自動化ワークフロー作成
|
||||||
|
1. 新しいIssueの自動ラベリング設定
|
||||||
|
2. 古いIssueの自動クローズ設定
|
||||||
|
3. プロジェクトボードとの連携設定
|
||||||
|
|
||||||
|
### 演習3: レポート・分析
|
||||||
|
1. Issue統計取得スクリプトの作成
|
||||||
|
2. 進捗レポートの自動生成
|
||||||
|
3. チームパフォーマンス分析
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔗 関連リソース
|
||||||
|
|
||||||
|
- [GitHub Docs - Issues](https://docs.github.com/en/issues)
|
||||||
|
- [GitHub Issues Templates](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests)
|
||||||
|
- [GitHub Projects Documentation](https://docs.github.com/en/issues/planning-and-tracking-with-projects)
|
||||||
|
- [GitHub CLI Issues](https://cli.github.com/manual/gh_issue)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 まとめ
|
||||||
|
|
||||||
|
GitHub Issues を効果的に活用することで：
|
||||||
|
|
||||||
|
✅ **統一されたタスク管理** - 外部ツール不要でプロジェクト管理
|
||||||
|
✅ **コードとの密接な連携** - コミット・PRとのシームレスな連携
|
||||||
|
✅ **自動化による効率化** - GitHub Actions による作業自動化
|
||||||
|
✅ **コスト削減** - 有料ツールからの移行によるコスト最適化
|
||||||
|
✅ **チーム協調** - 透明性の高い情報共有とコミュニケーション
|
||||||
|
|
||||||
|
次は[Pull Request編](03-pull-requests.md)で、コードレビューとマージプロセスを学習しましょう。
|
||||||
261
docs/index.md
Normal file
261
docs/index.md
Normal file
|
|
@ -0,0 +1,261 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
title: "GitHub完全活用ガイド"
|
||||||
|
description: "外部ツールに依存せず、GitHub一つで開発業務を完結させるための網羅的解説書"
|
||||||
|
---
|
||||||
|
|
||||||
|
# 🚀 GitHub完全活用ガイド
|
||||||
|
|
||||||
|
> **GitHub機能を網羅的に理解し、開発プロセスを最適化するための実践的解説書**
|
||||||
|
|
||||||
|
<div class="hero-section">
|
||||||
|
<h2>🎯 このサイトで学べること</h2>
|
||||||
|
<div class="features-grid">
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>🔧 実務で使える設定</h3>
|
||||||
|
<p>すぐに実装できる設定例とベストプラクティス</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>💰 コスト削減</h3>
|
||||||
|
<p>外部ツール費用を年間37%削減する方法</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>📈 効率化</h3>
|
||||||
|
<p>開発フローを2倍高速化するワークフロー</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>🛡️ セキュリティ</h3>
|
||||||
|
<p>企業レベルのセキュリティを無料で実現</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📚 メインコンテンツ
|
||||||
|
|
||||||
|
### 🎯 [完全活用ガイド](GITHUB_COMPLETE_GUIDE.html)
|
||||||
|
**GitHub機能の全体像から実装まで網羅した決定版ガイド**
|
||||||
|
- 全10章で構成された包括的な解説
|
||||||
|
- 実際のコード例とスクリーンショット付き
|
||||||
|
- 段階的な実装計画とチェックリスト
|
||||||
|
|
||||||
|
### 📖 機能別詳細ガイド
|
||||||
|
|
||||||
|
<div class="guide-links">
|
||||||
|
<a href="features/01-repository-basics.html" class="guide-link">
|
||||||
|
<h4>📁 リポジトリ基礎</h4>
|
||||||
|
<p>作成から保護設定まで基本操作をマスター</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="features/02-issues-management.html" class="guide-link">
|
||||||
|
<h4>🎫 Issues管理</h4>
|
||||||
|
<p>Jiraを完全代替するタスク管理システム</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="guide-link coming-soon">
|
||||||
|
<h4>🔄 Pull Request</h4>
|
||||||
|
<p>効率的なコードレビューフロー（準備中）</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="guide-link coming-soon">
|
||||||
|
<h4>📋 GitHub Projects</h4>
|
||||||
|
<p>アジャイル開発のためのプロジェクト管理（準備中）</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🎓 学習の進め方
|
||||||
|
|
||||||
|
### 初心者の方
|
||||||
|
1. **[リポジトリ基礎](features/01-repository-basics.html)** で基本操作を習得
|
||||||
|
2. **[Issues管理](features/02-issues-management.html)** でタスク管理を体験
|
||||||
|
3. **[完全ガイド](GITHUB_COMPLETE_GUIDE.html)** で全体像を把握
|
||||||
|
|
||||||
|
### 経験者の方
|
||||||
|
1. **[完全ガイド](GITHUB_COMPLETE_GUIDE.html)** で新機能をチェック
|
||||||
|
2. **外部ツール代替戦略** で移行計画を立案
|
||||||
|
3. **実務ケーススタディ** で最適な導入方法を選択
|
||||||
|
|
||||||
|
### チームリーダーの方
|
||||||
|
1. **コスト分析** で導入効果を試算
|
||||||
|
2. **段階的移行計画** でリスクを最小化
|
||||||
|
3. **実装チェックリスト** で確実な導入を実現
|
||||||
|
|
||||||
|
## 🎉 導入効果の実例
|
||||||
|
|
||||||
|
<div class="stats-section">
|
||||||
|
<div class="stat-item">
|
||||||
|
<h3>37%</h3>
|
||||||
|
<p>年間コスト削減</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<h3>2倍</h3>
|
||||||
|
<p>開発速度向上</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<h3>50%</h3>
|
||||||
|
<p>障害対応時間短縮</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<h3>85%</h3>
|
||||||
|
<p>Issue解決率向上</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🔗 クイックスタート
|
||||||
|
|
||||||
|
すぐに始めたい方は、以下の手順で進めてください：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. 新しいリポジトリを作成
|
||||||
|
gh repo create my-project --public
|
||||||
|
|
||||||
|
# 2. 基本設定を適用
|
||||||
|
git clone https://github.com/username/my-project
|
||||||
|
cd my-project
|
||||||
|
|
||||||
|
# 3. Issue管理を開始
|
||||||
|
gh issue create --title "プロジェクト初期設定" --body "GitHub機能の設定を開始"
|
||||||
|
```
|
||||||
|
|
||||||
|
詳細な手順は **[完全ガイド](GITHUB_COMPLETE_GUIDE.html)** をご覧ください。
|
||||||
|
|
||||||
|
## 📞 サポート・質問
|
||||||
|
|
||||||
|
- **GitHub Issues**: バグ報告・機能要望
|
||||||
|
- **GitHub Discussions**: 質問・アイデア共有
|
||||||
|
- **GitHub Wiki**: FAQ・トラブルシューティング
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<h2>🚀 今すぐ始めよう！</h2>
|
||||||
|
<p>GitHub一つで完結する開発環境を構築し、<br>生産性とコスト効率を劇的に改善しましょう。</p>
|
||||||
|
<a href="GITHUB_COMPLETE_GUIDE.html" class="cta-button">完全ガイドを読む</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* ヒーローセクション */
|
||||||
|
.hero-section {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h3 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ガイドリンク */
|
||||||
|
.guide-links {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-link {
|
||||||
|
display: block;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border: 2px solid #e1e4e8;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-link:hover {
|
||||||
|
border-color: #0366d6;
|
||||||
|
box-shadow: 0 4px 12px rgba(3, 102, 214, 0.15);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-link.coming-soon {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-link h4 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: #0366d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 統計セクション */
|
||||||
|
.stats-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item h3 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: #28a745;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item p {
|
||||||
|
color: #586069;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CTAセクション */
|
||||||
|
.footer-cta {
|
||||||
|
background: #f6f8fa;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button {
|
||||||
|
display: inline-block;
|
||||||
|
background: #28a745;
|
||||||
|
color: white;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 1rem;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover {
|
||||||
|
background: #218838;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* レスポンシブ対応 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.features-grid,
|
||||||
|
.guide-links,
|
||||||
|
.stats-section {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
64
examples/README.md
Normal file
64
examples/README.md
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
# 🛠️ GitHub Research Tool - 実装例
|
||||||
|
|
||||||
|
このディレクトリには、実際に使用できるGitHub機能の実装例が含まれています。
|
||||||
|
|
||||||
|
## 📁 ディレクトリ構成
|
||||||
|
|
||||||
|
### ⚙️ actions/
|
||||||
|
GitHub Actions設定ファイル集
|
||||||
|
- **ci.yml** - 基本的なCI/CDパイプライン
|
||||||
|
- **release.yml** - 自動リリース
|
||||||
|
- **security.yml** - セキュリティスキャン
|
||||||
|
- **deploy.yml** - デプロイ自動化
|
||||||
|
- **parallel-dev.yml** - AI駆動並列開発
|
||||||
|
|
||||||
|
### 📄 templates/
|
||||||
|
GitHubテンプレート集
|
||||||
|
- **Issue テンプレート**
|
||||||
|
- バグ報告用
|
||||||
|
- 機能要望用
|
||||||
|
- 質問用
|
||||||
|
- **Pull Request テンプレート**
|
||||||
|
- **CODEOWNERS** - コードレビュー担当者設定
|
||||||
|
- **.github/FUNDING.yml** - スポンサー設定
|
||||||
|
|
||||||
|
### 📜 scripts/
|
||||||
|
便利なスクリプト集
|
||||||
|
- **setup-repo.sh** - リポジトリ初期化
|
||||||
|
- **create-release.sh** - リリース作成
|
||||||
|
- **sync-fork.sh** - フォーク同期
|
||||||
|
- **cleanup-branches.sh** - ブランチクリーンアップ
|
||||||
|
|
||||||
|
## 🚀 使い方
|
||||||
|
|
||||||
|
### 1. テンプレートのコピー
|
||||||
|
```bash
|
||||||
|
# Issue テンプレートをコピー
|
||||||
|
cp examples/templates/.github/ISSUE_TEMPLATE/* .github/ISSUE_TEMPLATE/
|
||||||
|
|
||||||
|
# PR テンプレートをコピー
|
||||||
|
cp examples/templates/.github/pull_request_template.md .github/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. GitHub Actionsの設定
|
||||||
|
```bash
|
||||||
|
# CI/CDワークフローをコピー
|
||||||
|
cp examples/actions/ci.yml .github/workflows/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. スクリプトの実行
|
||||||
|
```bash
|
||||||
|
# リポジトリを初期化
|
||||||
|
bash examples/scripts/setup-repo.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
## ⚠️ 注意事項
|
||||||
|
|
||||||
|
- 使用前にプロジェクトに応じてカスタマイズしてください
|
||||||
|
- シークレット情報は絶対に含めないでください
|
||||||
|
- ライセンスや利用規約を確認してください
|
||||||
|
|
||||||
|
## 🤝 コントリビューション
|
||||||
|
|
||||||
|
新しい実装例やテンプレートの追加を歓迎します！
|
||||||
|
プルリクエストを作成する前に、既存の例を参考にしてください。
|
||||||
162
practice-project/README.md
Normal file
162
practice-project/README.md
Normal file
|
|
@ -0,0 +1,162 @@
|
||||||
|
# 🎯 Personal Task Manager - GitHub機能実践プロジェクト
|
||||||
|
|
||||||
|
> GitHub機能を体系的に学習するための実践プロジェクト
|
||||||
|
|
||||||
|
## 🎯 プロジェクト概要
|
||||||
|
|
||||||
|
シンプルなタスク管理アプリケーションを通じて、GitHub のすべての主要機能を実際に体験・習得します。
|
||||||
|
|
||||||
|
## 🏗️ プロジェクト構成
|
||||||
|
|
||||||
|
```
|
||||||
|
personal-task-manager/
|
||||||
|
├── index.html # メインページ
|
||||||
|
├── style.css # スタイルシート
|
||||||
|
├── script.js # JavaScript ロジック
|
||||||
|
├── package.json # Node.js設定（Actions用）
|
||||||
|
├── .github/
|
||||||
|
│ ├── workflows/ # GitHub Actions
|
||||||
|
│ ├── ISSUE_TEMPLATE/ # Issueテンプレート
|
||||||
|
│ └── pull_request_template.md
|
||||||
|
├── docs/ # GitHub Pages用
|
||||||
|
└── tests/ # テストファイル
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎓 学習目標と体験する機能
|
||||||
|
|
||||||
|
### Phase 1: 基本機能の体験
|
||||||
|
- [x] **リポジトリ作成** - 設定とクローン
|
||||||
|
- [ ] **Issues管理** - バグ報告、機能要望、タスク作成
|
||||||
|
- [ ] **Projects** - かんばんボードでタスク進行管理
|
||||||
|
- [ ] **ブランチ管理** - feature ブランチでの開発
|
||||||
|
|
||||||
|
### Phase 2: コラボレーション機能
|
||||||
|
- [ ] **Pull Request** - コードレビューフロー体験
|
||||||
|
- [ ] **テンプレート** - Issue/PR テンプレートの活用
|
||||||
|
- [ ] **ラベル・マイルストーン** - プロジェクト管理の体系化
|
||||||
|
- [ ] **レビュー機能** - サジェスト機能の活用
|
||||||
|
|
||||||
|
### Phase 3: 自動化・デプロイ
|
||||||
|
- [ ] **GitHub Actions** - CI/CDパイプライン構築
|
||||||
|
- [ ] **自動テスト** - コード品質の自動チェック
|
||||||
|
- [ ] **GitHub Pages** - 自動デプロイメント
|
||||||
|
- [ ] **セキュリティ** - Dependabot、Code scanning
|
||||||
|
|
||||||
|
## 🚀 実装予定機能
|
||||||
|
|
||||||
|
### 基本機能
|
||||||
|
- ✅ タスクの追加・編集・削除
|
||||||
|
- ✅ タスクの完了状態管理
|
||||||
|
- ✅ カテゴリ別フィルタリング
|
||||||
|
- ✅ ローカルストレージでの永続化
|
||||||
|
|
||||||
|
### 発展機能（GitHub機能習得用）
|
||||||
|
- ⏳ タスクの優先度設定
|
||||||
|
- ⏳ 期限管理機能
|
||||||
|
- ⏳ 進捗レポート表示
|
||||||
|
- ⏳ データエクスポート機能
|
||||||
|
|
||||||
|
## 📋 開発フロー（GitHub機能実践）
|
||||||
|
|
||||||
|
### 1. Issue駆動開発
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A[Issue作成] --> B[ラベル付与]
|
||||||
|
B --> C[Projects追加]
|
||||||
|
C --> D[ブランチ作成]
|
||||||
|
D --> E[実装]
|
||||||
|
E --> F[PR作成]
|
||||||
|
F --> G[レビュー]
|
||||||
|
G --> H[マージ]
|
||||||
|
H --> I[Issue クローズ]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. ブランチ戦略
|
||||||
|
```
|
||||||
|
main : プロダクションコード
|
||||||
|
develop : 開発版（統合テスト）
|
||||||
|
feature/* : 機能開発用
|
||||||
|
hotfix/* : 緊急修正用
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 自動化フロー
|
||||||
|
```yaml
|
||||||
|
# CI/CD パイプライン
|
||||||
|
1. コミット → 自動テスト実行
|
||||||
|
2. PR作成 → コードスキャン + レビュー
|
||||||
|
3. mainマージ → 自動デプロイ（GitHub Pages）
|
||||||
|
4. リリース → 自動タグ作成 + チェンジログ生成
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎯 GitHub機能習得チェックリスト
|
||||||
|
|
||||||
|
### 基本操作
|
||||||
|
- [ ] リポジトリ作成・クローン
|
||||||
|
- [ ] ブランチ作成・切り替え
|
||||||
|
- [ ] コミット・プッシュ
|
||||||
|
- [ ] Issue作成・管理
|
||||||
|
|
||||||
|
### プロジェクト管理
|
||||||
|
- [ ] GitHub Projects セットアップ
|
||||||
|
- [ ] Issue テンプレート作成
|
||||||
|
- [ ] ラベル体系の構築
|
||||||
|
- [ ] マイルストーン設定
|
||||||
|
|
||||||
|
### コラボレーション
|
||||||
|
- [ ] Pull Request作成
|
||||||
|
- [ ] コードレビュー
|
||||||
|
- [ ] サジェスト機能使用
|
||||||
|
- [ ] コンフリクト解決
|
||||||
|
|
||||||
|
### 自動化
|
||||||
|
- [ ] GitHub Actions セットアップ
|
||||||
|
- [ ] CI/CD パイプライン構築
|
||||||
|
- [ ] 自動テスト実装
|
||||||
|
- [ ] 自動デプロイ設定
|
||||||
|
|
||||||
|
### セキュリティ・品質
|
||||||
|
- [ ] Dependabot 有効化
|
||||||
|
- [ ] Code scanning 設定
|
||||||
|
- [ ] Branch protection 設定
|
||||||
|
- [ ] Secret管理
|
||||||
|
|
||||||
|
### 公開・ドキュメント
|
||||||
|
- [ ] GitHub Pages デプロイ
|
||||||
|
- [ ] README 充実
|
||||||
|
- [ ] Wiki 作成
|
||||||
|
- [ ] Release 作成
|
||||||
|
|
||||||
|
## 🎮 次のアクション
|
||||||
|
|
||||||
|
1. **今すぐ試せること**:
|
||||||
|
```bash
|
||||||
|
# このプロジェクトをクローン
|
||||||
|
git clone https://github.com/your-username/personal-task-manager
|
||||||
|
cd personal-task-manager
|
||||||
|
|
||||||
|
# 最初のIssueを作成
|
||||||
|
gh issue create --title "タスク追加機能の実装" --body "ユーザーが新しいタスクを追加できる機能を実装する"
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **最初の1週間で体験する機能**:
|
||||||
|
- Issues でタスク管理
|
||||||
|
- Projects でかんばん作成
|
||||||
|
- 基本的なHTML/CSS/JS開発
|
||||||
|
- Pull Request フロー
|
||||||
|
|
||||||
|
3. **2週間目で学ぶ高度な機能**:
|
||||||
|
- GitHub Actions 設定
|
||||||
|
- 自動テスト・デプロイ
|
||||||
|
- セキュリティ機能
|
||||||
|
- パフォーマンス最適化
|
||||||
|
|
||||||
|
## 💡 学習のコツ
|
||||||
|
|
||||||
|
1. **小さく始める** - 最初は基本機能のみ実装
|
||||||
|
2. **実際に使う** - 本物のタスク管理に活用
|
||||||
|
3. **記録する** - 体験したことを都度ドキュメント化
|
||||||
|
4. **実験する** - 新しい機能を積極的に試す
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
このプロジェクトを通じて、理論だけでなく実践的なGitHub活用スキルを身につけましょう！
|
||||||
143
practice-project/index.html
Normal file
143
practice-project/index.html
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ja">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Personal Task Manager</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>🎯 Personal Task Manager</h1>
|
||||||
|
<p>GitHub機能学習用タスク管理アプリ</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- タスク追加フォーム -->
|
||||||
|
<section class="add-task-section">
|
||||||
|
<h2>新しいタスクを追加</h2>
|
||||||
|
<form id="addTaskForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" id="taskTitle" placeholder="タスクタイトル" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<textarea id="taskDescription" placeholder="詳細説明（任意）"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<select id="taskCategory">
|
||||||
|
<option value="feature">新機能</option>
|
||||||
|
<option value="bug">バグ修正</option>
|
||||||
|
<option value="improvement">改善</option>
|
||||||
|
<option value="documentation">ドキュメント</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<select id="taskPriority">
|
||||||
|
<option value="low">低優先度</option>
|
||||||
|
<option value="medium" selected>中優先度</option>
|
||||||
|
<option value="high">高優先度</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button type="submit">タスクを追加</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- フィルタリング -->
|
||||||
|
<section class="filter-section">
|
||||||
|
<h2>フィルタ</h2>
|
||||||
|
<div class="filters">
|
||||||
|
<select id="categoryFilter">
|
||||||
|
<option value="all">すべてのカテゴリ</option>
|
||||||
|
<option value="feature">新機能</option>
|
||||||
|
<option value="bug">バグ修正</option>
|
||||||
|
<option value="improvement">改善</option>
|
||||||
|
<option value="documentation">ドキュメント</option>
|
||||||
|
</select>
|
||||||
|
<select id="statusFilter">
|
||||||
|
<option value="all">すべての状態</option>
|
||||||
|
<option value="todo">TODO</option>
|
||||||
|
<option value="in-progress">進行中</option>
|
||||||
|
<option value="done">完了</option>
|
||||||
|
</select>
|
||||||
|
<select id="priorityFilter">
|
||||||
|
<option value="all">すべての優先度</option>
|
||||||
|
<option value="high">高優先度</option>
|
||||||
|
<option value="medium">中優先度</option>
|
||||||
|
<option value="low">低優先度</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- タスクリスト -->
|
||||||
|
<section class="tasks-section">
|
||||||
|
<h2>タスク一覧</h2>
|
||||||
|
<div class="task-board">
|
||||||
|
<div class="task-column" data-status="todo">
|
||||||
|
<h3>📋 TODO</h3>
|
||||||
|
<div class="task-list" id="todoTasks"></div>
|
||||||
|
</div>
|
||||||
|
<div class="task-column" data-status="in-progress">
|
||||||
|
<h3>🔄 進行中</h3>
|
||||||
|
<div class="task-list" id="inProgressTasks"></div>
|
||||||
|
</div>
|
||||||
|
<div class="task-column" data-status="done">
|
||||||
|
<h3>✅ 完了</h3>
|
||||||
|
<div class="task-list" id="doneTasks"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 統計情報 -->
|
||||||
|
<section class="stats-section">
|
||||||
|
<h2>統計</h2>
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<h3>総タスク数</h3>
|
||||||
|
<span id="totalTasks">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<h3>完了タスク</h3>
|
||||||
|
<span id="completedTasks">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<h3>進行中</h3>
|
||||||
|
<span id="inProgressCount">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<h3>完了率</h3>
|
||||||
|
<span id="completionRate">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>GitHub機能学習プロジェクト - Personal Task Manager</p>
|
||||||
|
<p>Issues、Projects、Actions、Pages の実践的な学習を目的としています</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- タスクテンプレート -->
|
||||||
|
<template id="taskTemplate">
|
||||||
|
<div class="task-card" draggable="true">
|
||||||
|
<div class="task-header">
|
||||||
|
<span class="task-id"></span>
|
||||||
|
<span class="task-priority"></span>
|
||||||
|
<span class="task-category"></span>
|
||||||
|
</div>
|
||||||
|
<h4 class="task-title"></h4>
|
||||||
|
<p class="task-description"></p>
|
||||||
|
<div class="task-meta">
|
||||||
|
<span class="task-created"></span>
|
||||||
|
<div class="task-actions">
|
||||||
|
<button class="edit-btn" title="編集">✏️</button>
|
||||||
|
<button class="delete-btn" title="削除">🗑️</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
412
practice-project/script.js
Normal file
412
practice-project/script.js
Normal file
|
|
@ -0,0 +1,412 @@
|
||||||
|
// Personal Task Manager - GitHub学習用JavaScript
|
||||||
|
|
||||||
|
class TaskManager {
|
||||||
|
constructor() {
|
||||||
|
this.tasks = this.loadTasks();
|
||||||
|
this.taskIdCounter = this.getNextTaskId();
|
||||||
|
this.initializeApp();
|
||||||
|
}
|
||||||
|
|
||||||
|
// アプリケーション初期化
|
||||||
|
initializeApp() {
|
||||||
|
this.setupEventListeners();
|
||||||
|
this.renderTasks();
|
||||||
|
this.updateStats();
|
||||||
|
this.setupDragAndDrop();
|
||||||
|
}
|
||||||
|
|
||||||
|
// イベントリスナー設定
|
||||||
|
setupEventListeners() {
|
||||||
|
// タスク追加フォーム
|
||||||
|
document.getElementById('addTaskForm').addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
this.addTask();
|
||||||
|
});
|
||||||
|
|
||||||
|
// フィルタ変更
|
||||||
|
document.getElementById('categoryFilter').addEventListener('change', () => this.applyFilters());
|
||||||
|
document.getElementById('statusFilter').addEventListener('change', () => this.applyFilters());
|
||||||
|
document.getElementById('priorityFilter').addEventListener('change', () => this.applyFilters());
|
||||||
|
|
||||||
|
// タスク操作（イベント委譲）
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (e.target.classList.contains('edit-btn')) {
|
||||||
|
this.editTask(e.target.closest('.task-card').dataset.taskId);
|
||||||
|
}
|
||||||
|
if (e.target.classList.contains('delete-btn')) {
|
||||||
|
this.deleteTask(e.target.closest('.task-card').dataset.taskId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// タスク追加
|
||||||
|
addTask() {
|
||||||
|
const title = document.getElementById('taskTitle').value.trim();
|
||||||
|
const description = document.getElementById('taskDescription').value.trim();
|
||||||
|
const category = document.getElementById('taskCategory').value;
|
||||||
|
const priority = document.getElementById('taskPriority').value;
|
||||||
|
|
||||||
|
if (!title) {
|
||||||
|
alert('タスクタイトルを入力してください');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const task = {
|
||||||
|
id: this.taskIdCounter++,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
category,
|
||||||
|
priority,
|
||||||
|
status: 'todo',
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
updatedAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
this.tasks.push(task);
|
||||||
|
this.saveTasks();
|
||||||
|
this.renderTasks();
|
||||||
|
this.updateStats();
|
||||||
|
this.clearForm();
|
||||||
|
|
||||||
|
// GitHub風の成功メッセージ（実際のGitHubではIssue作成時に表示される）
|
||||||
|
this.showNotification(`タスク #${task.id} を作成しました`, 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
// タスク編集
|
||||||
|
editTask(taskId) {
|
||||||
|
const task = this.tasks.find(t => t.id === parseInt(taskId));
|
||||||
|
if (!task) return;
|
||||||
|
|
||||||
|
const newTitle = prompt('タスクタイトル:', task.title);
|
||||||
|
if (newTitle === null) return;
|
||||||
|
|
||||||
|
const newDescription = prompt('タスク説明:', task.description);
|
||||||
|
if (newDescription === null) return;
|
||||||
|
|
||||||
|
task.title = newTitle.trim();
|
||||||
|
task.description = newDescription.trim();
|
||||||
|
task.updatedAt = new Date().toISOString();
|
||||||
|
|
||||||
|
this.saveTasks();
|
||||||
|
this.renderTasks();
|
||||||
|
this.showNotification(`タスク #${task.id} を更新しました`, 'info');
|
||||||
|
}
|
||||||
|
|
||||||
|
// タスク削除
|
||||||
|
deleteTask(taskId) {
|
||||||
|
const task = this.tasks.find(t => t.id === parseInt(taskId));
|
||||||
|
if (!task) return;
|
||||||
|
|
||||||
|
if (confirm(`タスク「${task.title}」を削除しますか？`)) {
|
||||||
|
this.tasks = this.tasks.filter(t => t.id !== parseInt(taskId));
|
||||||
|
this.saveTasks();
|
||||||
|
this.renderTasks();
|
||||||
|
this.updateStats();
|
||||||
|
this.showNotification(`タスク #${task.id} を削除しました`, 'warning');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// タスクレンダリング
|
||||||
|
renderTasks() {
|
||||||
|
const todoContainer = document.getElementById('todoTasks');
|
||||||
|
const inProgressContainer = document.getElementById('inProgressTasks');
|
||||||
|
const doneContainer = document.getElementById('doneTasks');
|
||||||
|
|
||||||
|
// コンテナをクリア
|
||||||
|
todoContainer.innerHTML = '';
|
||||||
|
inProgressContainer.innerHTML = '';
|
||||||
|
doneContainer.innerHTML = '';
|
||||||
|
|
||||||
|
// フィルタリングされたタスクを取得
|
||||||
|
const filteredTasks = this.getFilteredTasks();
|
||||||
|
|
||||||
|
// 各タスクをレンダリング
|
||||||
|
filteredTasks.forEach(task => {
|
||||||
|
const taskElement = this.createTaskElement(task);
|
||||||
|
|
||||||
|
switch (task.status) {
|
||||||
|
case 'todo':
|
||||||
|
todoContainer.appendChild(taskElement);
|
||||||
|
break;
|
||||||
|
case 'in-progress':
|
||||||
|
inProgressContainer.appendChild(taskElement);
|
||||||
|
break;
|
||||||
|
case 'done':
|
||||||
|
doneContainer.appendChild(taskElement);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// タスク要素作成
|
||||||
|
createTaskElement(task) {
|
||||||
|
const template = document.getElementById('taskTemplate');
|
||||||
|
const taskElement = template.content.cloneNode(true);
|
||||||
|
const taskCard = taskElement.querySelector('.task-card');
|
||||||
|
|
||||||
|
taskCard.dataset.taskId = task.id;
|
||||||
|
taskCard.dataset.status = task.status;
|
||||||
|
|
||||||
|
// タスク情報を設定
|
||||||
|
taskElement.querySelector('.task-id').textContent = `#${task.id}`;
|
||||||
|
taskElement.querySelector('.task-title').textContent = task.title;
|
||||||
|
taskElement.querySelector('.task-description').textContent = task.description || '説明なし';
|
||||||
|
|
||||||
|
// 優先度設定
|
||||||
|
const priorityElement = taskElement.querySelector('.task-priority');
|
||||||
|
priorityElement.textContent = this.getPriorityLabel(task.priority);
|
||||||
|
priorityElement.className = `task-priority ${task.priority}`;
|
||||||
|
|
||||||
|
// カテゴリ設定
|
||||||
|
const categoryElement = taskElement.querySelector('.task-category');
|
||||||
|
categoryElement.textContent = this.getCategoryLabel(task.category);
|
||||||
|
categoryElement.className = `task-category ${task.category}`;
|
||||||
|
|
||||||
|
// 作成日時
|
||||||
|
taskElement.querySelector('.task-created').textContent =
|
||||||
|
new Date(task.createdAt).toLocaleDateString('ja-JP');
|
||||||
|
|
||||||
|
return taskElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
// フィルタリング適用
|
||||||
|
applyFilters() {
|
||||||
|
this.renderTasks();
|
||||||
|
}
|
||||||
|
|
||||||
|
// フィルタリングされたタスク取得
|
||||||
|
getFilteredTasks() {
|
||||||
|
const categoryFilter = document.getElementById('categoryFilter').value;
|
||||||
|
const statusFilter = document.getElementById('statusFilter').value;
|
||||||
|
const priorityFilter = document.getElementById('priorityFilter').value;
|
||||||
|
|
||||||
|
return this.tasks.filter(task => {
|
||||||
|
const matchesCategory = categoryFilter === 'all' || task.category === categoryFilter;
|
||||||
|
const matchesStatus = statusFilter === 'all' || task.status === statusFilter;
|
||||||
|
const matchesPriority = priorityFilter === 'all' || task.priority === priorityFilter;
|
||||||
|
|
||||||
|
return matchesCategory && matchesStatus && matchesPriority;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 統計更新
|
||||||
|
updateStats() {
|
||||||
|
const totalTasks = this.tasks.length;
|
||||||
|
const completedTasks = this.tasks.filter(t => t.status === 'done').length;
|
||||||
|
const inProgressTasks = this.tasks.filter(t => t.status === 'in-progress').length;
|
||||||
|
const completionRate = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
|
||||||
|
|
||||||
|
document.getElementById('totalTasks').textContent = totalTasks;
|
||||||
|
document.getElementById('completedTasks').textContent = completedTasks;
|
||||||
|
document.getElementById('inProgressCount').textContent = inProgressTasks;
|
||||||
|
document.getElementById('completionRate').textContent = `${completionRate}%`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ドラッグ&ドロップ設定
|
||||||
|
setupDragAndDrop() {
|
||||||
|
// タスクカードのドラッグ開始
|
||||||
|
document.addEventListener('dragstart', (e) => {
|
||||||
|
if (e.target.classList.contains('task-card')) {
|
||||||
|
e.target.classList.add('dragging');
|
||||||
|
e.dataTransfer.setData('text/plain', e.target.dataset.taskId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ドラッグ終了
|
||||||
|
document.addEventListener('dragend', (e) => {
|
||||||
|
if (e.target.classList.contains('task-card')) {
|
||||||
|
e.target.classList.remove('dragging');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ドロップゾーンの設定
|
||||||
|
document.querySelectorAll('.task-column').forEach(column => {
|
||||||
|
column.addEventListener('dragover', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
column.classList.add('drag-over');
|
||||||
|
});
|
||||||
|
|
||||||
|
column.addEventListener('dragleave', (e) => {
|
||||||
|
if (!column.contains(e.relatedTarget)) {
|
||||||
|
column.classList.remove('drag-over');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
column.addEventListener('drop', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
column.classList.remove('drag-over');
|
||||||
|
|
||||||
|
const taskId = e.dataTransfer.getData('text/plain');
|
||||||
|
const newStatus = column.dataset.status;
|
||||||
|
this.updateTaskStatus(parseInt(taskId), newStatus);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// タスクステータス更新
|
||||||
|
updateTaskStatus(taskId, newStatus) {
|
||||||
|
const task = this.tasks.find(t => t.id === taskId);
|
||||||
|
if (!task || task.status === newStatus) return;
|
||||||
|
|
||||||
|
const oldStatus = task.status;
|
||||||
|
task.status = newStatus;
|
||||||
|
task.updatedAt = new Date().toISOString();
|
||||||
|
|
||||||
|
this.saveTasks();
|
||||||
|
this.renderTasks();
|
||||||
|
this.updateStats();
|
||||||
|
|
||||||
|
// GitHub風のステータス更新メッセージ
|
||||||
|
this.showNotification(
|
||||||
|
`タスク #${taskId} を ${this.getStatusLabel(oldStatus)} から ${this.getStatusLabel(newStatus)} に移動しました`,
|
||||||
|
'info'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ユーティリティ関数
|
||||||
|
getPriorityLabel(priority) {
|
||||||
|
const labels = {
|
||||||
|
'high': '高',
|
||||||
|
'medium': '中',
|
||||||
|
'low': '低'
|
||||||
|
};
|
||||||
|
return labels[priority] || priority;
|
||||||
|
}
|
||||||
|
|
||||||
|
getCategoryLabel(category) {
|
||||||
|
const labels = {
|
||||||
|
'feature': '新機能',
|
||||||
|
'bug': 'バグ',
|
||||||
|
'improvement': '改善',
|
||||||
|
'documentation': 'ドキュメント'
|
||||||
|
};
|
||||||
|
return labels[category] || category;
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusLabel(status) {
|
||||||
|
const labels = {
|
||||||
|
'todo': 'TODO',
|
||||||
|
'in-progress': '進行中',
|
||||||
|
'done': '完了'
|
||||||
|
};
|
||||||
|
return labels[status] || status;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通知表示（GitHub風）
|
||||||
|
showNotification(message, type = 'info') {
|
||||||
|
// 簡易的な通知実装
|
||||||
|
const notification = document.createElement('div');
|
||||||
|
notification.className = `notification notification-${type}`;
|
||||||
|
notification.textContent = message;
|
||||||
|
notification.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #0366d6;
|
||||||
|
color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||||
|
z-index: 1000;
|
||||||
|
max-width: 300px;
|
||||||
|
animation: slideIn 0.3s ease-out;
|
||||||
|
`;
|
||||||
|
|
||||||
|
// タイプ別スタイル
|
||||||
|
const colors = {
|
||||||
|
'success': '#28a745',
|
||||||
|
'warning': '#ffd33d',
|
||||||
|
'error': '#d73a49',
|
||||||
|
'info': '#0366d6'
|
||||||
|
};
|
||||||
|
if (colors[type]) {
|
||||||
|
notification.style.background = colors[type];
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.appendChild(notification);
|
||||||
|
|
||||||
|
// 3秒後に削除
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.remove();
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// フォームクリア
|
||||||
|
clearForm() {
|
||||||
|
document.getElementById('addTaskForm').reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
// データ永続化
|
||||||
|
saveTasks() {
|
||||||
|
localStorage.setItem('github-learning-tasks', JSON.stringify(this.tasks));
|
||||||
|
localStorage.setItem('github-learning-task-counter', this.taskIdCounter.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
loadTasks() {
|
||||||
|
const saved = localStorage.getItem('github-learning-tasks');
|
||||||
|
return saved ? JSON.parse(saved) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
getNextTaskId() {
|
||||||
|
const saved = localStorage.getItem('github-learning-task-counter');
|
||||||
|
return saved ? parseInt(saved) : 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// デモデータ生成（学習用）
|
||||||
|
generateSampleTasks() {
|
||||||
|
const sampleTasks = [
|
||||||
|
{
|
||||||
|
id: this.taskIdCounter++,
|
||||||
|
title: 'GitHub Issues の基本操作を学習',
|
||||||
|
description: 'Issue の作成、編集、クローズの方法を実践で学ぶ',
|
||||||
|
category: 'documentation',
|
||||||
|
priority: 'high',
|
||||||
|
status: 'todo',
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
updatedAt: new Date().toISOString()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: this.taskIdCounter++,
|
||||||
|
title: 'Pull Request のワークフローを実践',
|
||||||
|
description: 'ブランチ作成からマージまでの一連の流れを体験',
|
||||||
|
category: 'feature',
|
||||||
|
priority: 'high',
|
||||||
|
status: 'in-progress',
|
||||||
|
createdAt: new Date(Date.now() - 86400000).toISOString(),
|
||||||
|
updatedAt: new Date().toISOString()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: this.taskIdCounter++,
|
||||||
|
title: 'GitHub Actions でCI/CDを設定',
|
||||||
|
description: '自動テストとデプロイの仕組みを構築',
|
||||||
|
category: 'improvement',
|
||||||
|
priority: 'medium',
|
||||||
|
status: 'todo',
|
||||||
|
createdAt: new Date(Date.now() - 172800000).toISOString(),
|
||||||
|
updatedAt: new Date(Date.now() - 172800000).toISOString()
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
if (this.tasks.length === 0) {
|
||||||
|
this.tasks = sampleTasks;
|
||||||
|
this.saveTasks();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// アプリケーション開始
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const taskManager = new TaskManager();
|
||||||
|
|
||||||
|
// デモデータ生成（初回のみ）
|
||||||
|
taskManager.generateSampleTasks();
|
||||||
|
taskManager.renderTasks();
|
||||||
|
taskManager.updateStats();
|
||||||
|
|
||||||
|
// グローバルに公開（デバッグ用）
|
||||||
|
window.taskManager = taskManager;
|
||||||
|
|
||||||
|
console.log('🎯 Personal Task Manager が起動しました！');
|
||||||
|
console.log('GitHub機能学習用のタスク管理アプリです。');
|
||||||
|
console.log('タスクを追加して、GitHub の各機能を実践的に学習しましょう！');
|
||||||
|
});
|
||||||
377
practice-project/style.css
Normal file
377
practice-project/style.css
Normal file
|
|
@ -0,0 +1,377 @@
|
||||||
|
/* Personal Task Manager - GitHub学習用スタイル */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #0366d6;
|
||||||
|
--secondary-color: #586069;
|
||||||
|
--success-color: #28a745;
|
||||||
|
--warning-color: #ffd33d;
|
||||||
|
--danger-color: #d73a49;
|
||||||
|
--background-color: #f6f8fa;
|
||||||
|
--card-background: #ffffff;
|
||||||
|
--border-color: #e1e4e8;
|
||||||
|
--text-primary: #24292e;
|
||||||
|
--text-secondary: #586069;
|
||||||
|
--shadow: 0 1px 3px rgba(27, 31, 35, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ヘッダー */
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--card-background);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header p {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* セクション共通スタイル */
|
||||||
|
section {
|
||||||
|
background: var(--card-background);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
section h2 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-bottom: 2px solid var(--primary-color);
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* フォーム */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea,
|
||||||
|
.form-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group textarea:focus,
|
||||||
|
.form-group select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #0256cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* フィルタ */
|
||||||
|
.filters {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* タスクボード */
|
||||||
|
.task-board {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-column {
|
||||||
|
background: var(--background-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-column h3 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
background: var(--card-background);
|
||||||
|
border-radius: 6px;
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-list {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* タスクカード */
|
||||||
|
.task-card {
|
||||||
|
background: var(--card-background);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: grab;
|
||||||
|
transition: all 0.2s;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card:hover {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
box-shadow: 0 2px 8px rgba(27, 31, 35, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-id {
|
||||||
|
font-family: 'Monaco', 'Menlo', monospace;
|
||||||
|
background: var(--background-color);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-priority {
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-priority.high {
|
||||||
|
background: var(--danger-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-priority.medium {
|
||||||
|
background: var(--warning-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-priority.low {
|
||||||
|
background: var(--success-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-category {
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-category.feature {
|
||||||
|
background: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-category.bug {
|
||||||
|
background: #d73a49;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-category.improvement {
|
||||||
|
background: #0366d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-category.documentation {
|
||||||
|
background: #6f42c1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-description {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-actions button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-actions button:hover {
|
||||||
|
background: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 統計 */
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--background-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card span {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* フッター */
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 20px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ドラッグ&ドロップ */
|
||||||
|
.task-column.drag-over {
|
||||||
|
background: rgba(3, 102, 214, 0.1);
|
||||||
|
border: 2px dashed var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card.dragging {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* レスポンシブ */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-board {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* アニメーション */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card {
|
||||||
|
animation: slideIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GitHub風のボタン */
|
||||||
|
.github-btn {
|
||||||
|
background: #f6f8fa;
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-btn:hover {
|
||||||
|
background: #e1e4e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-btn.primary {
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-btn.success {
|
||||||
|
background: var(--success-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-btn.danger {
|
||||||
|
background: var(--danger-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
0
test
Normal file
0
test
Normal file
59
tools/README.md
Normal file
59
tools/README.md
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
# 🔧 GitHub Research Tool - ツール比較・移行ガイド
|
||||||
|
|
||||||
|
このディレクトリには、外部ツールからGitHub機能への移行ガイドと比較資料が含まれています。
|
||||||
|
|
||||||
|
## 📁 ディレクトリ構成
|
||||||
|
|
||||||
|
### 🔄 migration/
|
||||||
|
外部ツールからの移行ガイド
|
||||||
|
- **jira-to-github.md** - Jira → GitHub Projects
|
||||||
|
- **jenkins-to-actions.md** - Jenkins → GitHub Actions
|
||||||
|
- **confluence-to-wiki.md** - Confluence → GitHub Wiki
|
||||||
|
- **slack-to-github.md** - Slack → GitHub Notifications
|
||||||
|
- **sonarqube-to-github.md** - SonarQube → GitHub Code Scanning
|
||||||
|
|
||||||
|
### ⚖️ comparison/
|
||||||
|
ツール機能比較表
|
||||||
|
- **project-management.md** - プロジェクト管理ツール比較
|
||||||
|
- **ci-cd-tools.md** - CI/CDツール比較
|
||||||
|
- **documentation-tools.md** - ドキュメントツール比較
|
||||||
|
- **security-tools.md** - セキュリティツール比較
|
||||||
|
- **cost-analysis.md** - コスト分析
|
||||||
|
|
||||||
|
## 🎯 このディレクトリの目的
|
||||||
|
|
||||||
|
### 1. 移行の支援
|
||||||
|
既存のツールからGitHubへの移行を、具体的な手順とともにサポート
|
||||||
|
|
||||||
|
### 2. 機能比較の明確化
|
||||||
|
各ツールの機能をGitHub機能と詳細に比較し、代替可能性を検証
|
||||||
|
|
||||||
|
### 3. 意思決定の支援
|
||||||
|
組織でのツール選択における判断材料を提供
|
||||||
|
|
||||||
|
## 🚀 活用方法
|
||||||
|
|
||||||
|
### 移行を検討している場合
|
||||||
|
1. `migration/`で該当ツールの移行ガイドを確認
|
||||||
|
2. `comparison/`で機能の対応関係を把握
|
||||||
|
3. 実際の移行計画を立案
|
||||||
|
|
||||||
|
### 新規ツール選択の場合
|
||||||
|
1. `comparison/`で各ツールの特徴を比較
|
||||||
|
2. プロジェクトの要件と照らし合わせ
|
||||||
|
3. GitHub機能での実現可能性を検証
|
||||||
|
|
||||||
|
## 📊 評価指標
|
||||||
|
|
||||||
|
各比較では以下の観点で評価：
|
||||||
|
|
||||||
|
- **機能完全性** - 必要な機能がすべて揃っているか
|
||||||
|
- **学習コスト** - 習得にかかる時間と労力
|
||||||
|
- **運用コスト** - ライセンス費用や保守費用
|
||||||
|
- **統合性** - 他のツールとの連携のしやすさ
|
||||||
|
- **スケーラビリティ** - 組織拡大への対応能力
|
||||||
|
|
||||||
|
## 🤝 コントリビューション
|
||||||
|
|
||||||
|
新しいツールの比較や移行体験談など、あらゆる情報を歓迎します。
|
||||||
|
実際の移行経験に基づいた知見は特に価値があります。
|
||||||
Loading…
Add table
Add a link
Reference in a new issue