Zenn
📱

Claude Code × GitHub × Netlifyで実現するVibe Coding

に公開
GitHub
Netlify
Claude
Claude Code
tech

2025年5月25日現在、私のVibe Codingスタイルはかつてないほど快適になりました。
その鍵は、Claude Code × GitHub × Netlifyの組み合わせです。私にめちゃくちゃ刺さっています。
その理由は、ほぼスマホ1台で開発からデプロイまで完結するようになったことで、いつでもどこでも開発できる環境を手に入れたからです。

対象読者

  • スマホから開発したい人
  • 隙間時間で開発したい人
  • 思いついたら即プロトタイピングしたい人
  • AI×ノーコードに興味がある人

Claude Code × GitHub × Netlifyで行う開発

この組み合わせにおいて、それぞれのツールの役割は以下の通りです。

  • Claude CodeでAIと会話しながらコード生成
  • GitHubがコード・Issue・Pull Requestの管理を一元化
  • Netlifyがデプロイ＆プレビュー環境を自動化

開発・デプロイの手順

私が実践している開発の流れを紹介します。
参考までに、AIで作成した電卓アプリケーションを用意しました。
レポジトリ：https://github.com/konny0311/ai_generated_calculator
アプリケーション：https://ai-generated-calculator.netlify.app

1. Claude Codeでアプリケーションを作成

Claude Codeをインストールし、Claudeへ作りたいアプリケーションの内容を伝えるだけです。あとはよしなにClaudeがアプリケーションを作成してくれます。

実際のプロンプト

Create a simple calculator application working on browser and push it to a new github repo named "ai_generated_calculator"

私はこのプロセスをまだPCで実行していますが、スマホからClaude Codeを利用している事例もあるので今後挑戦したいです。

事例：スマホ片手にフリースタイルでAI Agentでコーディングする環境をつくる。

2. GitHubのリポジトリへプッシュ

シンプルな電卓アプリケーションが完成しました。Claudeが出力したコードをGitHubのレポジトリにpushします。これもClaude Codeから実行できます。「レポジトリ作ってpushして。」と伝えるだけです。(作業1のプロンプト内でpush依頼済み)


Claude Codeが作った電卓アプリケーション

3. NetlifyとGitHubを連携してデプロイ

NetlifyのコンソールからGitHubレポジトリを連携します。この作業だけで、Netlifyを利用して簡単にアプリケーションをデプロイしホスティングすることができます。

4. アプリの改善案をIssueに記載

1発で完璧なアプリケーションを作成することは難しいので、使ってみて気になる点をレポジトリのIssueに記載します。
ダークモードとライトモードを切り替える機能を記載します。

Feature of light/dark mode: An user can switch light/dark modes.

https://github.com/konny0311/ai_generated_calculator/issues/1

5. Claude CodeとGitHubを連携

GitHubでClaudeを利用するため、連携設定を行います。Claude Codeを開いて/install-github-appを実行し、必要な手順に従います。
大まかには以下の内容です。

  • ClaudeがGitHubレポジトリで実行する権限を許可
  • Claudeが自動作成するプルリクエストをマージ(GitHub Actionsを設定する)

GitHub Actions - Anthropic

このステップを経て、IssueからClaudeへ作業を依頼する準備が完了しました。

6. Claudeに改善を依頼

改善に取り組むIssueで@claudeとメンションし、作業を指示するだけでIssueの内容を読み取って変更案を理解し、コーディングが始まります。


実際の依頼

7. 作業ブランチのプルリクエストを作成

作業が完了するとClaudeが作業ブランチにコミットしてくれるので、そのブランチのプルリクエストを作成します。

8. Netlify botがプルリクエストをビルド＆プレビューURLを発行

プルリクエストが作られるとNetlifyがビルドを実行し、確認用のURLが生成されます。

9. プルリクエスト確認

コード変更内容を確認し、Netlifyが生成したプレビューURLを開いて動作も確認します。


ライトモードが追加され、モード切り替えボタンが電卓右上に表示

10. 問題なければプルリクエストをマージ→Netlifyが本番デプロイ

問題なければマージしてNetlifyでデプロイ&公開、問題があれば解決するまでClaudeに修正依頼します。

まとめ：開発がとても楽しくなった

この仕組みによって、開発という行為が「思いついたときにスマホで指示するだけ」のカジュアルな体験になりました。
PCを開きがっつり集中して個人開発に取り組む時間を、私はプライベートで確保することがなかなかできません。家庭ではいつも1歳と2歳の幼児に揉みくちゃにされています。
しかし、今回スマホで完結する環境を構築したことで、隙間時間に開発を進めることができるようになりました。
これは私にとって革命的です。思いついたアイデアをすぐに試すことができるので、とてもワクワクしています。

Discussion