Claude CodeとチャットだけでLINEリッチメニューエディタをプロダクトマネージャーが作ってみた

NOTE: この記事はLLMでコードを書かせた話をLLMでブログに書いています。（この行だけ人間が書いています）

はじめに

最近、Anthropic社が提供する Claude Code というAIアシスタントツールを使って、LINE Rich Menu Editorという完全なWebアプリケーションを、一切コードを書かずにチャットだけで開発・デプロイしてみました。

結論から言うと、機能としては完全に動作するシステムをリリースできました。 ただし、いくつか重要な学びもあったため、本記事ではその経験をまとめます。

開発したシステムの概要

システム構成

今回開発したのは、LINE公式アカウントの リッチメニューを視覚的に作成・管理できるWebアプリケーションです。

┌─────────────────┐
│  GitHub Pages   │ ← フロントエンド（React + TypeScript + Vite）
│  (Static Host)  │
└────────┬────────┘
         │ HTTPS
         ↓
┌─────────────────┐
│ Cloudflare      │ ← ステートレスプロキシ
│ Worker          │
└────────┬────────┘
         │ HTTPS
         ↓
┌─────────────────┐
│ LINE Messaging  │
│ API             │
└─────────────────┘

技術スタック

Frontend: React 18 + TypeScript + Vite
Backend: Cloudflare Workers (TypeScript)
Hosting: GitHub Pages
CI/CD: GitHub Actions
API: LINE Messaging API

主な機能

リッチメニューUIエディタ（ドラッグ＆ドロップ対応）
画像アップロード・検証
LINE API連携（作成／取得／削除／ユーザー紐付け）
既存リッチメニューの読み込み・編集
JSONのインポート／エクスポート
プライバシーポリシー・免責表示

チャットだけで実現した開発フロー

自分がやったこと

実際に私が行った作業は、以下だけです：

要件を日本語で指示
- 「LINE Rich MenuをWeb UIで作り、JSON化できる機能が欲しい」
- 「Cloudflare WorkerでLINE API連携したい」
- 「既存メニュー編集もしたい」
GUI上の最低限の設定
- GitHub Secrets に VITE_WORKER_URL を登録
- GitHub Pages を有効化
動作確認とフィードバック
- デプロイ後の確認
- 問題があればチャットで修正依頼

コードエディタは1回も開いていません。

Claude Codeが勝手にやってくれたこと

Claude Codeは以下を自動実装しました：

プロジェクト構成設計
31ファイル / 約7,000行のコード生成
TypeScript型設計
React UI実装
Cloudflare Workers実装
CORS・環境変数設定
GitHub Actions CI/CD構築
Git init〜Pushまで自動
README, LICENSE, DEPLOYMENT.md生成
Vite, Wrangler, tsconfig.json, gitignore など各種設定

さらに驚いた点：

GitHub Actionsのバージョン不整合 → 自動更新
GitHub Pagesの白画面問題 → vite base 設定を自動修正

私は何も言ってません。 Claudeがログを読み、原因を推理し、自発的に修正しました。

開発時間

要件定義→デプロイ完了まで、実質数時間。

従来開発なら 数日〜1週間レベルの作業量です。

チャット開発のメリット

1. 圧倒的スピード

ボイラープレート生成が一瞬
多ファイル修正が一度の指示で可能
ベストプラクティスを自動反映

2. 深い技術知識なしでも動くものが作れる

例えば私は：

Cloudflare Workersの深い仕様
GitHub ActionsのYAML構文
Viteのbaseパス設定

ほぼ知りませんでしたが、問題なく完成しました。

3. 日本語だけで開発できる

非エンジニアでも要件を言葉で説明できれば、システムが作れる可能性があります。

ただし、課題もある

1. 正しく動くかは結局テストするしかない

実際のAPIとの整合、CORS、画像処理、など テストしないと保証できません。

2. セキュリティの見落とし

レビューしないと、

不要権限
ハードコード秘密情報
CSRF / XSS / Injection

などのリスクに気付けません。

3. 不要コード・依存の混入

console.log や不要依存、コメント情報など、 コードを見ないと見つかりません。

4. 最終的に「理解してレビュー」する必要がある

本番運用なら必須です。 理由：

保守性
障害対応
セキュリティ
ステークホルダー説明責任

結論：AIチャット開発の正しい使い方

Claude Codeのようなツールは、

「開発速度を劇的に加速させるツール」 であり、 「全て任せればよい魔法」ではありません。

AI開発が向く用途

プロトタイピング
ボイラープレート生成
コーディング学習補助
ペアプログラミング

人間が必ずすべきこと

コードレビュー
統合テスト
設計判断
運用責任

最後に

Claude Codeを使ったチャット開発は明らかに未来です。 数千行のコードが自然言語から生成され、即デプロイできる体験は革新的でした。

しかし同時に、

エンジニアの価値は「書く力」から「判断力」へ移る。

という、静かなパラダイムシフトも感じました。

AI時代の開発者に求められるのは、 コードの書き方ではなく、システム全体を理解し意思決定する力なのかもしれません。

プロジェクトURL

🔗 https://toru-takahashi.github.io/line-richmenu-editor/ 🔗 https://github.com/toru-takahashi/line-richmenu-editor

※ 実際の経験に基づく記事ですが、セキュリティの都合上、一部情報を省略しています。

Secret Ninja Blog

プロダクトマネージャーしてます