目次
はじめに
本記事では、ClaudeDesktopのMCP機能を使って、完全ローカルで動作するCRUD（Create/Read/Update/Delete）アプリを自動生成したプロセスを紹介します。
前編・中編では、MCPを使ってファイルの読み書きや自動要約などを実現してきました。今回はその応用編として、「アプリケーションのひな型をAIに生成させる」ことに挑戦します。
本記事は以下のような構成で進めます。
この記事でわかること
・ClaudeMCPを使ってHTML/JSアプリを自動生成する手順
・localStorageを活用したデータ永続化の仕組み
・HTMLとJavaScriptで構成されたシンプルなCRUDアプリの構造
・保守性・拡張性を意識した設計ポイント
想定読者
・ClaudeDesktopを使い始めたばかりの方
・MCPを使って実用的なアプリ生成を試してみたい方
・JavaScriptの基本操作を学びたい初心者
・ノーコードでは物足りないが、フルコードはハードルが高いと感じている方
1.CRUDアプリとは？
CRUDとは、以下の4つの基本的なデータ操作の頭文字を取った用語です。
・Create（作成）新しいデータを追加する
・Read（読み取り）データを表示・取得する
・Update（更新）既存のデータを編集する
・Delete（削除）データを削除する
今回はこの機能をすべて備えたユーザー管理アプリを、Claudeに一括生成してもらいました。
2.Claudeへの指示と生成プロセス
Claudeには、以下のような自然言語で指示を出しました。
シンプルなCRUDアプリを作ってください。
・index.htmlとscript.jsに分割
・名前とメールアドレスを登録・表示・編集・削除できる
・データ保存はlocalStorageを使用
・HTMLとJavaScriptだけで完結
この指示で、以下のファイル構成が生成されました。
crud-app/
├── index.html # メインのHTMLファイル
└── script.js # JavaScript機能ファイル
実行には特別な環境は不要で、index.htmlをブラウザで開くだけでそのまま動作します。
3.アプリの仕様
基本機能
・ユーザーの名前とメールアドレスを管理
・新規ユーザーの追加
・ユーザー一覧の表示
・ユーザー情報の編集
・ユーザーの削除
4.実際の使用感
①名前とメールを入力し「追加」ボタンを押す
②一覧にユーザーが表示される
③編集ボタンを押すとフォームが切り替わる
④削除ボタンを押すと確認ダイアログが出る
⑤データはブラウザに保存されるためリロードしても消えない
さいごに
ClaudeMCPとlocalStorageを組み合わせることで、完全ローカルで動作するCRUDアプリが自動生成できました。
「MCPで作って、ブラウザで開くだけ」という簡潔なワークフローで、Web開発の第一歩を体感できます。
