Cowork 2026年10月26日 9分で読めます

バイブコーディングで名刺管理アプリ開発｜試作と検証の記録

バイブコーディングで名刺管理アプリ開発｜試作と検証の記録

名刺管理アプリを使ってみたものの、自分の使い方にしっくりこない。そんなときに「自分で作れないかな」と思ったことはありませんか。

今回、Claude Codeとのバイブコーディングで名刺管理アプリの開発を試し、2回の開発指示で試作して、ブラウザで動作確認するところまでやってみました。この記事では、実際に使ったプロンプト、1回目で見つかった問題、2回目で直したこと、そして名刺という「他人の個人情報」を扱うときに気をつけたい点を正直にまとめます。

※バイブコーディングは、自然言語でAIにコードの生成・修正を依頼しながら開発を進める方法です。もともとはAIが書いたコードをあまり読まずに受け入れる進め方を指す言葉ですが、この記事ではコードと動作を確認しながら進めています。

バイブコーディングで名刺管理アプリ開発はできるのか

結論から言うと、「氏名・会社名などを登録して、検索・編集・削除できる」程度の小さな名刺管理アプリなら、2回の指示で動く形になりました。とはいえ、後述するように不具合が1つ残っていて、まだ「完成」とは言えません。

また、1回目の指示で出てきたものは、動くけれど「このまま使うのは怖い」状態でした。名刺の写真から文字を読み取るOCR機能や、スマホとの同期のような市販アプリの機能は、今回はまったく作っていません。あくまで「手入力で記録して探せる」最小限の試作です。

1回目のプロンプトと、見つかった3つの問題

最初に伝えたのは、次のような内容です。


名刺の情報を記録・検索できる、シンプルな名刺管理アプリを作ってください。

項目: 氏名・会社名・部署/役職・メール・電話・会った日・メモ
対象: 新しいHTMLファイル1つで作ってください
データの保存先: ブラウザのlocalStorageのみ（外部サーバーへの通信は行わない）
検索: 氏名と会社名で絞り込めるようにしてください

不明点があれば推測せず、確認事項として列挙してください。

入力フォーム・検索欄・名刺の一覧が並んだ1ファイルのアプリができました。見た目はそれらしく動きます。

そこで、手元のローカルサーバーで開き、架空のデータ（山田花子さん・サンプル商事など）を入れて試しました。すると、次の3つが見つかりました。

1. 空欄のまま「登録」を押すと、中身のない名刺が登録される。一覧に「（）/ / /」という謎のカードが残りました。

2. メモに `太字` と書くと、本当に太字で表示される。入力した文字がHTMLとして解釈されている状態です。今回は見た目が変わるだけでしたが、他人から受け取ったデータを取り込むような使い方をすると危険につながる書き方です。

3. 検索が大文字・小文字を区別する。「Example Inc.」を「example」で検索すると0件でした。

どれも、ぱっと画面を見ただけでは気づきにくい問題です。「動いた」と「安心して使える」は別物だと感じました。

2回目のプロンプトで直したこと

見つかった問題をそのまま伝え、足りない機能も追加してもらいました。


次の点を修正・追加してください。

1. 氏名が空のときは登録できないようにし、画面にエラーメッセージを出してください
2. 入力した文字がHTMLとして解釈されないよう、表示前にエスケープしてください
3. 検索は大文字/小文字・全角/半角の違いを区別せず、メモも検索対象にしてください
4. 各名刺に「編集」「削除」ボタンをつけてください
5. 削除の前に、対象の氏名と会社名を表示して確認ダイアログを出してください
6. 登録データをCSVファイルとして書き出すボタンをつけてください（Excelで開く前提で、文字化けしにくい形式で）

削除の対象は、このアプリ内に登録した名刺1件のみです。HTMLファイル自体やほかのファイルを削除・上書きする処理は追加しないでください。
既存ファイルを変更する前に、変更内容の要点を教えてください。
不明点があれば推測せず、確認事項として列挙してください。

修正後のアプリを、同じ架空データで確かめた結果がこちらです。確認環境は2026年10月時点のmacOS 26.6、Claude Code 2.1.268で、Claude Codeデスクトップアプリ内蔵のブラウザから、Pythonの簡易サーバー経由で開きました。表は「通常の操作」で確かめた範囲です。

確認したこと	結果
氏名が空のまま登録	「氏名は必須です」と表示され、登録されない
メモに `` タグを入力	太字にならず、文字としてそのまま表示
「ＥＸＡＭＰＬＥ」（全角）で検索	「Example Inc.」がヒット
役職を編集	件数は変わらず、内容だけ更新
削除で「キャンセル」	削除されない
削除で「OK」	1件だけ削除され、保存データからも消える
CSV書き出し	項目名の行とデータの行が出力される

一方で、確認を続けるうちに残っている不具合も見つかりました。「編集」を押した名刺を、そのまま削除してから新しい名刺を登録すると、その入力が保存されずに消えてしまうのです。編集中の状態が残ったままになっていることが原因で、まだ直せていません。

CSVについても、書き出したファイルを実際にExcelで開いて文字化けしないか、電話番号の先頭の0が消えないか、`=` で始まる入力が数式として解釈されないかは未確認です。スマホの画面での使いやすさも含めて、このあたりは「試行中」です。また、コードを読んだ範囲では、同じアプリを複数のタブで開いて操作すると変更が上書きされる可能性があるため、試すときは操作するタブを1つにしておくのが無難です。

自作するなら知っておきたい名刺データの注意点

名刺管理アプリならではの注意点が、名刺は自分ではなく相手の個人情報だということです。

調査ベースですが、名刺を検索できる形でデータ化すると、個人情報保護法でいう「個人情報データベース等」に当たる場合があると解説されています。個人情報保護委員会のFAQでは、従業者が私的に使うだけなら企業の個人情報データベース等には当たらないと考えられる一方、業務に使う場合は該当し得るとされています。仕事でもらった名刺を自作ツールに入れる場合は、勤務先のルールを先に確認しておくのが無難です。法律面の具体的な判断は、会社の担当部署や専門家への確認をおすすめします。

今回の試作で意識したのは、次の3点です。

**保存先をブラウザのlocalStorageに限定**し、外部サーバーへ送らない
**テストには架空のデータだけを使う**（実在の名刺は入力しない）
**CSVの書き出しは内容の退避用**と割り切り、共有フォルダなどに置かない

あわせて、localStorageは通常、ブラウザ（プロファイル）と、開いたURLのオリジン（プロトコル・ホスト・ポートの組み合わせ）ごとに保存されます。別のブラウザやポート番号で開くと、登録した名刺が見えなくなるので注意してください。ブラウザのデータを消去すると名刺も消えます。CSVで内容を退避することはできますが、この試作にはCSVを読み込んで復元する機能がまだないため、戻すには別途対応が必要です。

また、HTMLファイルをダブルクリックして直接開く形（アドレスバーが `file://` で始まる状態）では、localStorageの動作がブラウザによって異なるとMDNに記載されています。今回はローカルサーバー経由で開いて確認しました。

読者が自分の名刺管理アプリを作るためのプロンプト例

手順は、作業用フォルダを1つ作り、ターミナルで `cd “フォルダのパス”` と移動してから `claude` を起動し、以下を貼り付ける流れです。2回分の学びを最初から盛り込んだ形にしています。


自分専用の、シンプルな名刺管理アプリを作りたいです。

目的: もらった名刺の情報を記録して、あとから検索できるようにしたい
対象範囲: 今いる作業フォルダの中に、HTMLファイル1つとして新規作成してください（ファイル名は提案してください）
項目: 氏名（必須）・会社名・部署/役職・メール・電話・会った日・メモ
保存先: ブラウザのlocalStorageのみ。外部サーバーへの通信、外部ライブラリやCDNの読み込みは行わないでください
必ず入れてほしいこと:
- 氏名が空のときは登録できないようにする
- 入力内容は表示前にエスケープし、HTMLとして解釈されないようにする
- 検索は大文字/小文字・全角/半角を区別しない
今回は含めないもの: 編集・削除・CSV書き出しは、動作確認ができてから次の指示で追加します

作成前に、ファイル名・保存場所・画面構成の案を教えてください。
各名刺には重複しないIDを付けてください。
既存のファイルを変更・上書き・削除する場合は、作業前に対象ファイルと変更内容を表示し、私が承認するまで実行しないでください。
不明点があれば推測せず、確認事項として列挙してください。

ファイルができたら、ブラウザで開いて確認します。Python 3が入っているMacなら、別のターミナルで同じフォルダに `cd` してから次のコマンドを実行し、ブラウザで `http://127.0.0.1:8000/作成したファイル名.html` を開きます。終了するときはターミナルで `Ctrl + C` を押します（Windowsでは `python` や `py` コマンドになる場合があります。うまくいかなければ「このフォルダをローカルサーバーで開く方法を教えて」とClaude Codeに聞いてみてください）。


python3 -m http.server 8000 --bind 127.0.0.1

動作確認は、架空の名刺を2〜3件入れて「空欄で登録できないか」「再読み込みしても消えないか」「検索でヒットするか」を1つずつ見ていくのがおすすめです。うまく動かない場合は、ファイルパスに含まれるユーザー名などを伏せてから、エラーメッセージを貼って相談してみてください。

なお、ブラウザやOS、Claude Codeのバージョンによって挙動が変わる可能性があります（本記事の内容は2026年10月時点のものです）。

この記事のまとめ

バイブコーディングで、手入力型の小さな名刺管理アプリは2回の指示で動く形になった
1回目は「空欄登録」「HTMLがそのまま解釈される」「検索の大文字小文字」の3つの問題があった
問題を具体的に伝えると、2回目でまとめて直してもらえた
名刺は相手の個人情報なので、保存先・テストデータ・会社のルールに注意する
「編集中に削除」すると入力が消える不具合が残っており、Excelでの確認やスマホでの使い勝手もまだ試せていない

「動いた」で止めずに、意地悪な入力を少しだけ試してみる。それだけで、自作アプリの安心感はかなり変わると感じました。

同じように小さく作って直していく進め方は、バイブコーディングで家計簿アプリを作った話や、完璧を求めないバイブコーディングの結果でも紹介しています。あわせて読んでみてください。

なお、こうした「実際に手を動かして試す」体験は、学習アプリの形でも準備を進めています。公開時期は未定ですが、app.maahsachi.com（公開準備中）で試せるようになる予定です。

参考

[Window: localStorage プロパティ（MDN）](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage)
[個人情報保護委員会 FAQ Q1-37](https://www.ppc.go.jp/all_faq_index/faq1-q1-37/)
[「個人データ」とは何でしょうか?やさしく読む「個人情報保護法」（＠IT）](https://atmarkit.itmedia.co.jp/fsecurity/rensai/privacy02/privacy01.html)
[vibe coding（OpenSSF Glossary）](https://glossary.openssf.org/vibe-coding/)