Pull Request体験アプリ：教育目的のGitHubワークフロー学習ツール - ガジェット好きのプログラミングやってみた

概要

このアプリケーションは、GitHubのPull Requestワークフローを体験できる教育用Webアプリケーションです。実際のGitリポジトリに接続せず、完全にフロントエンドで動作するシミュレーションツールとして設計されています。

技術的特徴

🛠️ 使用技術

HTML5: セマンティックな構造
CSS3: モダンなスタイリング（Grid、Flexbox、アニメーション）
JavaScript (ES6+): インタラクティブな機能
外部依存なし: 純粋なWeb技術のみで実装

🎨 デザインの特徴

GitHubライクなダークテーマ

body {
  background-color: #0d1117;
  color: #e6edf3;
}

グラデーション効果

.header h1 {
  background: linear-gradient(135deg, #58a6ff, #f85149);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

スムーズなアニメーション

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

アーキテクチャ設計

📋 6ステップワークフロー

ブランチ作成 - 新しいフィーチャーブランチの作成体験
コード編集 - リアルタイムでのコード編集機能
コミット - 変更内容のコミット体験
Pull Request作成 - GitHub風のPR作成フォーム
差分表示 - 変更内容の可視化
マージ - Pull Requestのマージ体験

🔄 状態管理

let currentStep = 1;
let branchName = "";
let codeContent = "";
let commitMsg = "";

function updateStepStatus() {
  for (let i = 1; i <= 6; i++) {
    const step = document.getElementById(`step${i}`);
    if (i < currentStep) {
      step.classList.add("completed");
    } else if (i === currentStep) {
      step.classList.add("active");
    }
  }
}

主要機能の実装

🌿 ブランチ作成機能

バリデーション機能

function createBranch() {
  const branchName = document.getElementById("newBranchName").value.trim();
  
  if (!branchName) {
    alert("ブランチ名を入力してください");
    return;
  }
  
  // ブランチ名のバリデーション
  if (!/^[a-zA-Z0-9-_/]+$/.test(branchName)) {
    alert("ブランチ名には英数字、ハイフン、アンダースコア、スラッシュのみ使用できます");
    return;
  }
}

💾 コードエディタ

モナコフォント使用のコードエディタ

.code-input {
  font-family: "Monaco", "Menlo", monospace;
  background: transparent;
  color: #e6edf3;
  line-height: 1.45;
}

📝 差分表示機能

GitHubスタイルの差分表示

.diff-line.added {
  background: rgba(46, 160, 67, 0.15);
}

.diff-line.added::before {
  content: "+";
  color: #2ea043;
}

動的な差分生成

const diffLines = codeContent
  .split("\n")
  .map((line) => `<div class="diff-line added">+ ${line}</div>`)
  .join("");

UX設計のポイント

⏱️ 非同期体験の演出

function createBranch() {
  const btn = event.target;
  btn.innerHTML = '<span class="loading"></span> 作成中...';
  btn.disabled = true;

  setTimeout(() => {
    btn.innerHTML = "<span>✅</span> 作成完了";
    currentStep = 2;
    updateStepStatus();
  }, 1500);
}

🎯 段階的な情報開示

各ステップが完了するまで次のステップを非表示にし、学習者が迷わないような設計を採用しています。

🔄 リセット機能

function resetApp() {
  currentStep = 1;
  // 全てのフォームと状態をリセット
  document.getElementById("newBranchName").value = "";
  document.getElementById("codeEditor").value = "";
  // ボタン状態もリセット
  document.querySelectorAll(".btn").forEach((btn) => {
    btn.disabled = false;
  });
  updateStepStatus();
}

教育的価値

🎯 学習目標

Git基本概念: ブランチ、コミット、マージ
Pull Requestワークフロー: フィーチャーブランチからコードレビューまで
チーム開発: コラボレーションとコード品質向上

📚 安全な学習環境

実際のGitリポジトリを使わないため、失敗を恐れずに何度でも試行できる環境を提供しています。

パフォーマンス最適化

🚀 軽量設計

外部ライブラリなし: 依存関係ゼロで高速ロード
効率的なDOM操作: 必要最小限の要素更新
CSS最適化: GPU加速によるスムーズなアニメーション

🔒 セキュリティ考慮

function sanitizeInput(input) {
  return input.replace(/[<>]/g, "");
}

拡張可能性

🌍 多言語対応の準備

const translations = {
  ja: {
    createBranch: "ブランチを作成",
    saveChanges: "変更を保存",
  },
  en: {
    createBranch: "Create Branch",
    saveChanges: "Save Changes",
  },
};