Day 12 - 12/12

PC/スマホシームレス開発ガイド - Claude Code × GitHub で実現する新しい開発スタイル

Next.jsTypeScriptTailwindCSSVercel

Claude CodeGenSpark

PC/スマホシームレス開発ガイド - Claude Code × GitHub で実現する新しい開発スタイル

概要

PCとスマホを自在に行き来しながら開発できる環境の構築ガイドです。Claude Code × GitHub × Vercel/Railwayを組み合わせて、場所を選ばない開発スタイルを実現します。

背景

GensparkのAIデベロッパーで様々なAIモデル（Claude、Gemini、Codexなど）を試した結果、Claude Opus 4が最も優れていると感じました。この体験をClaude Codeでも再現できないかと考え、現状の最適解をガイドとしてまとめました。

主な特徴

シームレスな開発: PCで始めた作業をスマホで続けられる

PRプレビュー機能: Vercel連携でマージ前に画面確認可能

3種類のテンプレート: 目的に合わせてSimple/Fullstack/API-Readyを選択

具体的な手順: 環境構築からデプロイまで迷わず進められる

こんな人におすすめ

通勤中やカフェでもコーディングを続けたい人

Claude Codeを活用した開発フローを確立したい人

AIとの協働開発を効率化したい人

リンク

デモを見る GitHubで見る

制作時間

3時間

学んだこと・振り返り

技術的な学び

Vercelのプレビュー機能がシームレス開発のキーになる

静的HTMLとNext.jsが混在するリポジトリはVercel設定に注意が必要

テンプレート別にデプロイサービスを分けることで、ユーザーの混乱を防げる

AIとの協働で発見したこと

Claude Codeは「開発」だけでなく「環境構築のトラブルシューティング」にも強い

制限事項（PRマージ不可など）を理解した上でワークフローを設計することが重要

対話を重ねることで、最初は曖昧だった「シームレス開発」の定義が明確になった

次に活かせそうなポイント

Vercel + GitHub連携を前提とした開発フローの標準化

テンプレートリポジトリを活用したプロジェクト立ち上げの効率化

ガイド自体をVercelでホスティングし、PRプレビューで更新を確認する運用

メインAIツールの評価

Claude Code

⭐⭐⭐⭐⭐

良かった点

- GitHub連携が優秀で、PRの作成・プッシュまで自動化できる - 長いセッションでも文脈を保持し、継続的な改善が可能 - 「テンプレート別にデプロイサービスを分けたい」といった複雑な要件も的確に理解 - Vercelの設定トラブルシューティングなど、開発以外の相談にも対応

改善してほしい点

- Web版ではPRの自動マージができない（GitHub CLIが使えない制限） - mainブランチへの直接プッシュができないため、毎回マージ作業が必要 - Vercel CLIなど外部サービスのAPIアクセスに制限がある

総合コメント

GensparkでClaude Opus 4を使っていた体験に非常に近い。特にコードの品質と文脈理解力が優れている。Web版の制限（PRマージなど）はあるが、「開発作業」自体はPCでもスマホでもシームレスに行える。ガイド作成を通じて、Claude Codeの実用的なワークフローを確立できた。

公開日: 2025/12/12

PC/スマホ シームレス開発ガイド - Claude Code × GitHub で実現する新しい開発スタイル

概要

概要

背景