はじめに
プログラミング経験ゼロ。Node.jsって何？GitHubって何？
そんな状態から、AIの Claude と二人三脚で 世界平和のWebアプリ を作って公開しました。
費用は 0円、期間は 3日 です。
この記事は、完全な初心者がAIとどうやってアプリを作ったのか、つまずいたポイントも含めて全部書きます。「自分もアプリ作ってみたいけど、プログラミングわからない...」という人の背中を押せたら嬉しいです。
🔗 完成したアプリ → Peace Chain — 平和の連鎖
🕊️ 作ったもの
「Peace Chain（平和の連鎖）」 — 小さな親切を投稿して、連鎖させるアプリ
主な機能
- 📝 親切な行動を投稿（カテゴリ・絵文字付き）
- 🔗 誰かの親切に触発されたら「つなげる」で連鎖
- 👍 いいねボタン
- 🏆 いいねランキング（トップ3を表彰）
- 🌍 8言語対応（日・英・中・韓・西・仏・アラビア・ヒンディー）
- 🔄 投稿の自動翻訳（どの言語で書いても読める）
- 📧 いいね・連鎖されたらメール通知
- 🔐 ユーザー認証（アカウント作成・ログイン）
使った技術（全部無料）
| 何に使ったか | サービス |
|---|---|
| アプリ本体 | React + TypeScript |
| データベース | Supabase |
| 公開 | Vercel |
| メール | Brevo |
| 翻訳 | MyMemory API |
| コード管理 | GitHub |
| 開発パートナー | Claude（AI） |
📅 全記録
【1日目】ゼロからアプリ表示まで
ステップ1：AIに相談する
Claudeにこう言いました：
「世界平和のためのアプリを作りたい」
するとAIが30個のアイデアを出してくれました。その中から 「平和の連鎖」 を選びました。
💡 ポイント： 最初から完璧なアイデアじゃなくていい。AIにたくさん案を出してもらって、ピンとくるものを選ぶ。
ステップ2：Node.jsのインストール
AIが「このコマンドを実行して」と言ってきたけど：
npm : 用語 'npm' は認識されません
Node.jsが入ってなかった。 そもそもNode.jsが何かもわからなかった。
AIに「入れ方を教えて」と聞いて、https://nodejs.org からダウンロード → インストール。ここからスタートでした。
⚠️ つまずきポイント①： 環境構築が最初の壁。でもAIに聞けば一つずつ解決できる。「何がわからないかわからない」状態でもOK。
ステップ3：アプリを作る
AIがコードを全部書いてくれました。私がやったのは：
- AIが「このコマンドを実行して」→ コマンドプロンプトにコピペ
- AIが「このファイルを作って」→ 自動で作成される
- エラーが出たら → AIにスクリーンショットを送る
これの繰り返しです。
npm create vite@latest peace-chain -- --template react-ts
cd peace-chain
npm install
npm run dev
ブラウザに 自分のアプリが表示された 瞬間は感動しました。
ステップ4：機能を追加していく
AIに要望を伝えるだけ：
「新しい投稿が上に来るようにしたい」
「多言語対応にしたい」
「いいねボタンをつけたい」
「デザインを優しくスタイリッシュにして」
するとAIがコードを修正してくれる。私はブラウザで確認して、気に入らなければフィードバック。この繰り返しで、どんどんアプリが進化していきました。
【2日目】データベースと認証
ステップ5：Supabaseでデータベース
最初はブラウザのローカルストレージにデータを保存していたので、自分のPCでしか見れませんでした。
世界中の人に使ってもらいたい → データベースが必要 → Supabase（無料）
Supabaseのアカウントを作って、AIが教えてくれたSQLをコピペして実行。これだけでデータベースが完成。
CREATE TABLE kindnesses (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
author TEXT NOT NULL,
description TEXT NOT NULL,
category TEXT NOT NULL,
parent_id UUID REFERENCES kindnesses(id),
emoji TEXT DEFAULT '🕊️',
likes INT DEFAULT 0,
created_at TIMESTAMPTZ DEFAULT NOW()
);
SQLって何？って状態でしたが、AIが全部書いてくれるので問題なし。
ステップ6：ユーザー認証
「誰でも投稿できるけど、なりすましは防ぎたい」→ Supabaseの認証機能を使用。
メールアドレスとパスワードでアカウント作成・ログインができるようになりました。
ステップ7：メール通知（ここが一番苦労した）
自分の投稿にいいねや連鎖がついたらメールで通知する機能。これが 最大の難関 でした。
失敗の連続：
| 試行 | 結果 |
|---|---|
| Resendで送信 | ❌ 無料プランは本人にしか送れない |
| Brevoに切り替え | ❌ APIキーの種類を間違えた（SMTP用を使ってた） |
| 正しいAPIキーで再挑戦 | ❌ 送信者メールが未認証 |
| 送信者を認証して再挑戦 | ❌ いいね数が0のまま通知される |
| トリガー名を変更 | ✅ やっと成功！ |
5回失敗して、やっとメールが届きました。
AIがいなかったら絶対に解決できなかったと思います。毎回エラーのスクリーンショットを送って、AIが原因を分析して、次の手を教えてくれました。
💡 ポイント： エラーが出ても諦めない。スクリーンショットをAIに送れば、大抵は解決策を教えてくれる。
【3日目】翻訳機能と公開
ステップ8：自動翻訳
日本語で書いた投稿が、英語や韓国語で読める。言語の壁を超えて親切が連鎖していく。
MyMemory APIという無料の翻訳サービスを使いました。これもAIが全部実装。
ステップ9：世界に公開！
GitHub にコードを上げて、Vercel で公開。
git add -A
git commit -m "世界平和アプリ完成"
git push
Vercelが自動でビルド → 公開。URLが発行されて、世界中からアクセスできる ようになりました。
...と言いたいところですが、ここでもエラー：
- ❌ ビルドコマンドの権限エラー →
npxを付けて解決 - ❌ GitHubアカウントの権限問題 → リポジトリを作り直して解決
- ❌ ブランチが見つからない → pushし直して解決
3回失敗して、やっとデプロイ成功。
公開URL → https://peace-chain-2026.vercel.app/ 🎉
📊 数字で振り返る
| 項目 | 数字 |
|---|---|
| プログラミング経験 | 0年 |
| 開発期間 | 3日 |
| 費用 | 0円 |
| 書いたコードの行数 | 0行（全部AI） |
| AIに送ったメッセージ | 100回以上 |
| 遭遇したエラー | 20個以上 |
| 対応言語 | 8言語 |
| 諦めた回数 | 0回 |
🤔 やってみて思ったこと
AIは「翻訳者」だった
プログラミングは「外国語」みたいなものだと思いました。
私には 「こういうアプリが作りたい」 というイメージがある。でもそれをコンピュータが理解できる言語（コード）に変換できない。
AIは、その 翻訳 をしてくれました。
「いいねボタンが欲しい」→ コードに翻訳
「メールで通知したい」→ コードに翻訳
「デザインを優しくして」→ コードに翻訳
大事なのは「何を作りたいか」
技術的な知識は全部AIが持っています。React、TypeScript、SQL、API...全部AIが知っています。
でも 「世界平和のアプリを作りたい」 というビジョンは、AIからは出てきません。
「いいねされたら感謝のメールを送りたい」 というアイデアも、AIからは出てきません。
ビジョンとアイデアは人間の仕事。実装はAIの仕事。
これが2026年のアプリ開発だと実感しました。
エラーは怖くない
20個以上のエラーに遭遇しましたが、全部解決できました。
秘訣は スクリーンショットを撮ってAIに送る こと。これだけ。
エラーメッセージの意味がわからなくても、AIが読み解いてくれます。
🏁 これからやりたい人へ
必要なもの
- ✅ パソコン（WindowsでもMacでも）
- ✅ 「何か作りたい」という気持ち
- ✅ AIチャット（Claude、ChatGPT など）
不要なもの
- ❌ プログラミングの知識
- ❌ お金
- ❌ 特別な才能
コツ
- 最初の一歩は「AIに相談する」 — 「こういうアプリ作りたい」と言うだけ
- エラーが出たらスクショを送る — AIが解決してくれる
- 完璧を求めない — まず動くものを作って、少しずつ改善
- 諦めない — エラーは必ず解決できる
🕊️ 最後に
世界平和は大きすぎるテーマかもしれません。
でも、 「電車で席を譲った」「落とし物を届けた」「笑顔で挨拶した」 — そんな小さな親切を投稿して、それが誰かの次の親切につながっていく。
そんなアプリを、プログラミング未経験の私でも作れました。
あなたも、何か作ってみませんか？
あなたの親切を、世界に届けてください。 🌍✨