  AI コーディング道場勉強会 #3 開発コンテナを活用し、並列で同じサービスを複数パターン構築 ※ このスライドは AI を活用して作成しているため一部事実と異なる部分あるかも知れません 2025 年 8 月 19 日 発表者 : はぶちん 

自己紹介 はぶちん  プロフィール バックエンド開発が得意なエンジニア。普段はクラウドインフラとコンテナ 技術を活用した業務システム開発に従事  趣味 つくばへの移住をきっかけにガーデニングにハマっています。  得意分野 開発環境整備・ Web アプリ設計・ AI ツール活用 

目次 1.  背景（ガーデニングと植物管理の課題） 2.  動機・課題認識 3.  各種 AI ツールの検証 4.  開発環境構築 5.  ツール活用（ Tsumiki, Serena ） 6.  並列開発の実践 7.  振り返りと今後の展望 8.  おまけ：プールで VibeCoding 

背景（ガーデニングと植物管理の課題） ガーデニングとの出会い  つくばへの移住 リモート中心の働き方になったことをきっかけに、つくばに移住。豊かな自 然環境の中で新たな趣味としてガーデニングを始める。  ガーデニングの楽しさと課題 植物を育てる楽しさを発見する一方で、多くの植物の管理方法や水やりのタ イミングなど、様々な情報の管理が必要に。  記録管理の課題 植物の種類ごとの育て方の違いを覚えきれない Notion で台帳管理を始めたが入力が煩雑 手入れを忘れて野菜を枯らしてしまうことも 効率的な植物管理システムの必要性を強く感じていた Notion による植栽管理台帳 - 入力が手間で継続が難しい 

AI ツール検証： GeminiCLI GeminiCLI で開発したゲーム 豚のキャラクターが主人公の 2D アクションゲーム JavaScript + HTML5 Canvas での実装  AI ツール検証の背景 植物管理アプリ開発に向けて、まずは各種 AI ツールの特性と使い勝手を体験す るために、簡単なゲーム開発で検証。ちょうど Gemini CLI がリリースされた ところだったので採用。  GeminiCLI 開発プロセス ターミナルから Gemini AI と直接対話しながら開発を進行。ゲームのフレーム ワーク設計から、キャラクターの動き、衝突判定、スコア管理まで AI の提案を 取り入れながら実装。  ステップバイステップの指示でコード生成  エラー発生時の即時デバッグサポート  ゲームロジックの改善提案 

各種 AI ツールの検証 AI ツール実践：植物管理サービス開発の前段階  Claude Code 業務でも Terraform の変更などは主に ClaudeCode で行なっているので、親し みがあった。社内での知見が得やすかったので、バックエンドエンジニアの 知識を参考に Sub Agent や Slash Command を検証した。ピッグアドベンチ ャーゲームの開発では、座標や、描画のすり抜けなどに苦労した。  Gemini CLI ピッグアドベンチャーゲーム開発を通じて基本的なツール操作を習得。 Google アカウントを持っていれば無料で使えることと、後発だけあってコマ ンド操作が分かりやすかった。ピッグアドベンチャーの開発では ClaudeCode と同様に UI 周りで苦労した。  Replit Replit はサービスとしてあらゆるアプリ開発を行う上でのガイドが整っている 印象で、ピッグアドベンチャーも短期間で基本的な操作ができるようになっ た。 Replit で開発したゲーム 植物管理サービス開発へ向けた準備として、複数の AI ツールを実践的に活用。ピッグアドベン チャーゲーム開発は入門段階として取り組み、その後実際のプロジェクトでは、 Claude Code 環境認識 Hook や Gemini 自然語処理機能など、より高度な統合を実現。 

開発環境構築 安全かつ並列開発を可能とする環境の構築  Docker 統合環境の大幅改善 当初は ClaudeCode と DevContainer を試していたが、途中で docker-compose に移行  Docker Compose  Git Worktree 対応環境 ブランチベースのコンテナ管理を実現し、複数ブランチの並行開発を可能に。ブランチごとに 独立したポート割り当てとボリューム分離  Git Worktree  並行開発  MCP サーバー統合と Claude Code Playwright MCP （ E2E テスト） 、 Serena MCP （セマンティック検索） 、 Context7 MCP （ドキ ュメント）を統合。専用スクリプトと環境認識 Hook の実装  Playwright MCP  Serena MCP  Context7 MCP  Claude Code 開発環境構築のポイント  複数環境の並列運用  高速なブランチ切り替え  環境分離と安全性確保 

ツール活用（ Tsumiki, Serena ） クラスメソッド製の開発支援ツール  Tsumiki AI による開発支援ツール。 kairo コマンド群を活用して要件定義から設計、実 装まで、開発プロセス全体をサポート。複雑な機能を短期間で構築。  Serena LSP 対応の高度なコード支援ツール。 MCP 連携による効率的な開発環境を提 供。コンテキスト認識でインタラクティブな補助。  開発スタイルの違い Tsumiki はコマンドベースで高速な設計・実装、 Serena はエディタ統合で詳 細な対話型開発。ツールの特性を活かした適材適所の使い分けが効果的。 Tsumiki kairo コマンド活用 $ kairo-requirements # 要件定義ドキュメント作成 $ kairo-architecture # アーキテクチャ設計 $ kairo-tasks # タスク分割・優先度付け $ kairo-code # コード自動生成・実装 $ kairo-pr # PR レビュー・提案 Serena の開発アプローチ MCP 統合によるクラウドサービス連携 Playwright MCP による E2E テスト環境 Git Worktree による並行開発環境 PostgreSQL マイグレーションと DB 最適化 主要技術スタック  React 18  Go 1.25  PostgreSQL  Mantine UI Docker  JWT 認証  TDD 開発 

Tumiki で作成した成果物  Plant Manager Go + React による植物管理サービス。 JWT 認証、 TDD 開発（ 42 テストケース）を実装。 SQLite から PostgreSQL への移行、プリペアドステートメント、コネクションプール最適化を実現。  バックエンド  Go 1.25  Gin v1.9  GORM v1.30  PostgreSQL  JWT v5.2  フロントエンド  React v19.1  TypeScript v5.7  Vite v6.0  TanStack Query v5.84  Tailwind CSS v3.3  Lucide React v0.536  主要機能 植物データの登録・編集・削除 水やり・剪定などのケア記録管理 画像アップロードと表示機能 レスポンシブ対応 UI ランディングページ 

Serena で作成した成果物 Plant Care Manager Dev Container と Super Claude 環境を活用した先進的植物管理サービス。 MCP サーバー統合と Git Worktree によるマルチブランチ開発環境を実現。  実装機能 MCP 統合（ claude-swarm 、 Playwright 、 Serena ） マルチブランチ開発環境（ Git Worktree + Docker ） JWT 認証システム（ログイン・登録・パスワード検証）  技術スタック  バックエンド  Go 1.25  Gorilla Mux  PostgreSQL  Redis  JWT  golang-migrate  フロントエンド  React 19  TypeScript 5  Vite 4  Redux Toolkit 2  Tailwind CSS 4  Playwright  Vitest 2 

並列開発の実践 マルチブランチ開発環境の構築  Git Worktree による並列開発 同一リポジトリの複数ブランチを別々の作業ディレクトリで同時に開発 $ git worktree add ../plant-manager-tsumiki tsumiki-dev $ git worktree add ../plant-manager-serena serena-dev  docker-compose をシェルスクリプトで効率化 開発環境構築用スクリプトを作成し、よく使うコマンドをエイリアス化 開発環境独自の ClaudeCode の設定などを簡単に実現可能に 複数環境を同時に実行する場合の Port 競合を Hook で解決  Playwright MCP 統合 Playwright を導入しフロントエンドのテスト品質を向上 見た目の問題やフロント / バックエンド間の問題を AI が発見 各コンテナにインストールするとサイズが大きくなるため、専用の共通コンテナ を用意 docker-compose の例 volumes: postgres_data: name: plant-postgres-data-${WORKTREE_NUM:-main} redis_data: name: plant-redis-data-${WORKTREE_NUM:-main} go_modules: name: plant-go-modules-${WORKTREE_NUM:-main} services: app: ~~~ 中略~~~ ports: - "${FRONTEND_PORT:-5173}:5173" - "${BACKEND_PORT:-8080}:8080" - "${DEBUG_PORT:-2345}:2345" 環境変数による柔軟な設定  ボリュームの名前空間分離による衝突回避  環境変数による動的ポート割り当て  複数ブランチの同時起動を可能にする設計 

振り返りと今後の展望  技術的な学び  Docker Compose の複雑性 : 環境変数管理とマルチブランチ対応  Worktree の有用性 : 並行開発における効率的なブランチ管理  E2E テストの重要性 : フロントエンド開発の品質保証  型安全性の価値 : TypeScript によるランタイムエラー削減  プロジェクト管理の学び  段階的な実装 : 基本機能から徐々に拡張  ドキュメント化 : 開発の進捗と決定事項の記録  自動化の効果 : スクリプトによる作業効率化  テスト駆動開発 : 品質を保ちながらの開発 今後の実装予定  AI 機能  通知システム  データ分析 以下の機能を順次追加予定です：  Gemini API を使用した植物ケアアドバイス  水やりリマインダーなどのプッシュ通知  植物の成長データの可視化  ユーザー間での情報共有  React Native によるネイティブアプリ ツールごとの成果比較  Tumiki: アプリケーション全体の体系的構築に強み  Serena: リファクタリングとコード改善提案が優れている  今後 : 各ツールの長所を取り入れつつ独自ルールの構築も進めたい 

おまけ：プールで VibeCoding VibeTunnel が便利だった件  VibeTunnel + Tailscale 自宅のプールからでも開発環境に安全にアクセス。 VPN の設定不要で、どこからでも VibeCoding が可能に。  リモート開発の新たな形 庭のプールからでも Mac のターミナルにアクセスして開発を継続できる Tailscale を組み合わせれば出先でも結果を確認したり指示が可能に 開発環境を選ばない自由なワークスタイルの実現  VibeTunnel  Tailscale  リモートターミナル " 子どもを見ながら外でも開発ができる！ "