このリポジトリは、書籍「Vibe Coding で楽しく作る! Replit ではじめる本格 Web アプリケーション開発」のサポートサイトです。
2025年9月11日に Replit Agent 3 がリリースされ、画面構成やUI に大幅な変更が加えられました。書籍の内容と一部画面が異なる場合がありますので、以下の記事を参考にしてください:
👉 Replit Agent 3 UIの変更編(2025年9月11日)
主な変更点:
- アプリ選択項目が5つに拡充
- 2段階ビルドプロセス(「Start with a design」推奨)
- 3つの作業モード(Build/Plan/Edit)の追加
- 自動ブラウザテスト機能の搭載
- ファイルツリーUIの配置変更
- Deploy → Publish への名称変更
本書では、Replit を使用してゼロからプロフェッショナルレベルの Web アプリケーションを構築する方法を学習できます。特に Replit Agent などの AI 機能を活用した効率的な開発手法を重点的に解説しています。
書籍で紹介されている実用的なプロンプトやリンクを章ごとに整理しています。また、書籍発売後のReplitのバージョンアップなどを紹介しています:
- 第 2 章: Replit でアプリを作ろう - 基本的な計算機アプリの開発
- 第 3 章: 外部 API とライブラリ活用 - イベント企画書クリエイター、ドキュメントマスター、美容室の予約フォーム
- 第 4 章: データ活用型アプリケーション開発 - 食事バランスナビ、スマート名刺管理、AIリアルタイム翻訳機
- 第 5 章: ビジネスアプリ開発 - YouTube トランスレーター Plus
- 第 7 章: AI 活用テクニック - 効果的なプロンプティングの 5 つの原則
- 第 8 章: Replit の未来とこれからの学習 - スマートフォン開発、ネイティブアプリ作成
- 基本的な計算機アプリの開発
- 履歴機能の追加
- Replit Agent の基本的な使い方
- イベント企画書クリエイター: OpenAI API を使った企画書自動生成
- ドキュメントマスター: markitdown ライブラリと OpenAI API の連携
- 美容室の予約フォーム: Resend API を利用したメール送信機能
- 食事バランスナビ: データベース活用とグラフ表示
- スマート名刺管理: Notion API と連携したデータベース自動登録
- AIリアルタイム翻訳機: OpenAI Realtime API との連携
- YouTube トランスレーター Plus: Gemini API と認証機能
- SaaS サービスの基本構造
- サブスクリプションモデルの実装
- 効果的なプロンプティングの 5 つの原則
- 段階的に構築する(Checkpoint)
- 具体的な要件を指定する(Specify)
- 例を示す(Show)
- 簡潔に表現する(Simplify)
- 文脈を提供する(Select)
- Improve Prompt 機能の活用
- Assistant 機能の使い方
- スマートフォンからの開発: Replit アプリを使ったモバイル開発
- ネイティブアプリ作成: React Native と Expo を使った AI チャットボットアプリ開発
- 継続的な学習リソース: 公式ドキュメント、YouTube チャンネル、コミュニティフォーラム、筆者サイト
sample.pdf
- ドキュメントマスターアプリのテスト用サンプルファイル