INTERACTIVE TOOLS

GitHub インタラクティブツール編

Pages / Actions / Releases / Projects

Pages Actions Releases Projects

→ キーで次へ

この編の全体像

ゴール: GitHubの便利ツールを理解し、コードを書く以外の作業を自動化・効率化できるようになる

HOSTING

GitHub Pages

リポジトリから無料で静的サイトを公開。設定・カスタムドメイン・デプロイの流れ
→ コードを書いたら世界に公開できる。サーバー不要で即デプロイ

CI/CD

GitHub Actions

YAMLでワークフローを定義し、テスト・ビルド・デプロイを自動実行
→ pushするだけでテスト・デプロイが自動実行される。手作業ミスをなくす

VERSIONING

Releases

セマンティックバージョニングでタグ付け。バイナリやアセットを添付して配布
→ ユーザーにバージョンごとの成果物を配布できる。変更履歴も明確に

MANAGEMENT

Packages & Projects

npm/Dockerのパッケージ管理と、カンバンボードによるタスク管理を一元化
→ コード・パッケージ・タスクをGitHub上で完結。ツール分散を防ぐ

HOSTING

GitHub Pages とは

無料の静的サイトホスティング

  • リポジトリから直接Webサイトを公開
  • HTML / CSS / JS の静的サイトに対応
  • Jekyll によるブログ構築も可能
  • HTTPS が標準で有効
  • 完全無料（パブリックリポジトリ）

URL パターン

ユーザーサイト

username.github.io

プロジェクトサイト

username.github.io/repo-name

例: lutelute.github.io/2048_project

SETUP

Pages 設定方法

⚙️ Settings / Pages
GitHub Pages
Source
Build and deployment
Branch
公開するブランチを選択
Custom domain
独自ドメインを設定（オプション）

Settings → Pages → Branch を選んで Save するだけ!

DEMO

Pages デプロイの流れ

pages-demo
Push
→
GitHub 検出
→
Build
→
Deploy
→
🌐 Live!

CUSTOM DOMAIN

カスタムドメイン設定

設定手順

  • DNS プロバイダで CNAME レコードを追加
  • www.example.com → username.github.io
  • Settings → Pages → Custom domain に入力
  • Enforce HTTPS にチェック

Apex ドメインの場合

A レコードで GitHub の IP を指定:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

※ HTTPS 証明書は自動発行されます

CI/CD

GitHub Actions とは

自動化プラットフォーム

リポジトリ内のイベントをトリガーにして、
ワークフローを自動実行する CI/CD ツール

トリガーの例

  • push — コードをプッシュした時
  • pull_request — PR が作成された時
  • schedule — 定期実行（cron）
  • workflow_dispatch — 手動実行

主な用途

  • テストの自動実行
  • コードの品質チェック（lint）
  • ビルド & デプロイ
  • リリースの自動化
  • 依存パッケージの更新チェック
  • Docker イメージのビルド

無料枠 パブリックリポジトリは無制限

YAML SYNTAX

ワークフローの書き方

.github/workflows/ci.yml
name: CI Pipeline # ワークフロー名
 
on: # トリガー条件
  push:
  branches: [ main ]
  pull_request:
  branches: [ main ]
 
jobs: # 実行するジョブ
  test:
  runs-on: ubuntu-latest # 実行環境
  steps:
  - uses: actions/checkout@v4 # コード取得
  - uses: actions/setup-node@v4
  with:
  node-version: 20
  - run: npm install # 依存関係インストール
  - run: npm test # テスト実行

ファイルを .github/workflows/ に置くだけで有効化!

DEMO

Actions 実行デモ

actions-demo
git push
→
Trigger
→
Run Tests
→
Build
→
Deploy

VERSIONING

Releases とは

バージョン管理と配布

特定の時点のコードに「バージョン番号」を付けて
正式なリリースとして公開する機能

  • Git タグと連動
  • リリースノートを記述可能
  • バイナリやアセットを添付可能
  • 自動リリースノート生成

セマンティックバージョニング

v1.2.3
1
MAJOR
破壊的変更
.
2
MINOR
機能追加
.
3
PATCH
バグ修正

semver.org に基づく命名規則

DEMO

リリース作成デモ

releases-demo

REGISTRY

GitHub Packages

パッケージレジストリ

GitHub に直接パッケージを公開・管理できるサービス

  • npm / Maven / NuGet / RubyGems 対応
  • Docker コンテナレジストリ（ghcr.io）
  • リポジトリと統合された権限管理
  • GitHub Actions から簡単にパブリッシュ

対応フォーマット

npm JavaScript / TypeScript
Maven Java / Kotlin
Docker コンテナイメージ
RubyGems Ruby
NuGet C# / .NET

PROJECT MANAGEMENT

GitHub Projects

Issue や PR をカンバンボードで管理

📋 Todo 3

ユーザー認証の実装
bug
API ドキュメント作成
docs
パフォーマンス最適化
enhancement

🔄 In Progress 2

ダッシュボード UI
feature
テストカバレッジ向上
test

✅ Done 4

初期セットアップ
setup
CI/CD パイプライン構築
infra

ドラッグ&ドロップで Issue のステータスを変更可能

SUMMARY

まとめ

Pages

リポジトリから無料で静的サイトを公開。設定は Branch を選ぶだけ。

Actions

YAML でワークフローを定義し、テスト・ビルド・デプロイを自動化。

Releases

セマンティックバージョニングでコードをタグ付け・配布。

Packages

npm / Docker などのパッケージをリポジトリと統合して管理。

Projects

カンバンボードで Issue や PR を視覚的にプロジェクト管理。

これらのツールを組み合わせて開発ワークフローを効率化しよう!

Appendix: コマンドリファレンス

コマンド 説明
git add 変更をステージングエリアに追加
git commit -m "msg" ステージングした変更を履歴に記録
git push origin main ローカルの変更をGitHubにプッシュ
git push origin <tag> タグをリモートにプッシュ
git tag -a v1.0.0 -m "msg" 注釈付きタグを作成（バージョン管理用）
gh release create GitHubリリースを作成（GitHub CLI）
gh release upload リリースにアセット（バイナリ等）を追加
npm install 依存パッケージをインストール
npm test テストスクリプトを実行
1 / 15
← → キーで移動