Bootstrap → Tailwind CSS移行: アドミン画面優先対応

[jacopen]

Bootstrap → Tailwind CSS移行: アドミン画面優先対応

🎯 概要

Bootstrap 5.3.7から Tailwind CSSへの段階的移行を、アドミン画面から開始するプロポーザル

🏗️ アドミン画面から始める理由

• 限定的スコープ: 一般ユーザーに影響せずテスト可能
• シンプルなUI: 複雑なアニメーションやデザインが少ない
• 開発者使用: 問題があっても開発チームで対処可能
• 学習効果: Tailwindパターンを習得しやすい環境

📊 現状分析

アドミン画面の構造

• メインレイアウト: app/views/admin/_layout.html.erb (flexbox sidebar + main content)
• サイドバー: app/views/admin/_navigator.html.erb (固定幅250px、グレー背景)
• ナビアイテム: app/views/admin/_nav_item.html.erb (active状態管理)
• カスタムCSS: app/javascript/stylesheets/_admin.scss

使用中のBootstrapクラス

• レイアウト: container-fluid, row, col-*
• テーブル: table, table-striped
• ボタン: btn, btn-primary
• アラート: alert, alert-info
• フォーム: form-group, me-2

🚀 実装プラン

Phase 1: 基盤構築 (1-2日)

# Tailwind CSS導入
yarn add -D tailwindcss @tailwindcss/forms autoprefixer
npx tailwindcss init -p

Phase 2: 管理画面専用スタイル作成 (2-3日)

// app/javascript/stylesheets/admin_tailwind.scss
@tailwind base;
@tailwind components;  
@tailwind utilities;

@layer components {
  .admin-sidebar { @apply bg-gray-600 text-white w-64 min-h-screen; }
  .admin-nav-item { @apply block px-4 py-2 hover:bg-gray-700; }
  .admin-nav-active { @apply bg-gray-800 text-white; }
  .admin-table { @apply w-full border-collapse border border-gray-300; }
  .admin-btn-primary { @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600; }
}

Phase 3: コアレイアウト移行 (2-3日)

Before (Bootstrap)

<div id="admin" class="wrapper">
  <nav id="sidebar">...</nav>
  <div class="container-fluid right-pain">

After (Tailwind)

<div id="admin" class="flex min-h-screen">
  <nav class="admin-sidebar">...</nav>
  <div class="flex-1 p-6 bg-gray-50">

Phase 4: コンポーネント移行 (3-4日)

Bootstrap → Tailwind変換例

• table table-striped → admin-table
• btn btn-primary → admin-btn-primary
• alert alert-info → bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded
• row → grid grid-cols-12 gap-4 または flex
• col-12 → col-span-12 または w-full

Phase 5: 特殊機能移行 (2-3日)

• On Airボタン状態管理
• ドラッグ&ドロップスタイル
• 固定ナビゲーション
• レスポンシブ対応

📂 移行対象ファイル

第1段階 (3-4日)

• app/views/admin/_layout.html.erb
• app/views/admin/_navigator.html.erb
• app/views/admin/_nav_item.html.erb
• app/javascript/stylesheets/_admin.scss

第2段階 (4-5日)

• app/views/admin/show.html.erb (メインダッシュボード)
• app/views/admin/speakers/index.html.erb
• app/views/admin/talks/index.html.erb
• app/views/admin/announcements/index.html.erb

第3段階 (3-4日)

• フォーム系ページ
• 詳細・編集ページ
• 特殊機能ページ

🎨 期待される効果

即座に得られる効果

• バンドルサイズ削減: アドミン画面のBootstrap依存除去
• 開発速度向上: Tailwindのutility-firstアプローチ
• 一貫性: デザインシステムの統一

学習効果

• Tailwindパターン習得: メインサイト移行のベース
• コンポーネント設計: 再利用可能なTailwindクラス定義
• 移行ノウハウ: 本格移行前の問題発見

⏱️ 総工期: 2-3週間

段階	期間	内容
セットアップ	1-2日	Tailwind導入・設定
レイアウト	2-3日	メインレイアウト移行
コンポーネント	4-5日	テーブル・ボタン・フォーム
詳細ページ	3-4日	個別ページ移行
最適化	2-3日	パフォーマンス調整・テスト

✅ 完了条件

• アドミン画面で Bootstrap依存を完全除去
• 既存機能の動作確認完了
• Tailwind CSS設計パターンドキュメント作成
• メインサイト移行のロードマップ策定

この段階的アプローチにより、リスクを最小化しながらTailwind CSSの導入効果を検証できます。