Lovable.dev 入門：アイデアからアプリへ
私はフリーランスのビジネス用にシンプルなカスタマーポータルを構築しようと、真っ白な画面を見つめていたのを覚えています。私はプロの開発者ではありません。HTMLとCSSを少し知っている程度で、フルスタックのWebアプリを構築するのは不可能に感じられました。そんな時、Lovable.dev を発見し、すべてが変わりました。これが、アイデアから実際のアプリまでの、私のリアルなステップバイステップの旅です。
前提条件
始める前に、以下が必要です：
- Lovable.dev アカウント – lovable.dev でサインアップ。無料ティアでも完全なアプリを構築するのに十分です。
- 明確なアイデア – 私は付箋に「カスタマーポータル：ログイン、ダッシュボード、請求書アップロード」と書いていました。それで十分です。
- Web の基本的な理解 – コーディングは不要ですが、「ボタン」や「フォーム」が何かを知っていると役立ちます。
- GitHub アカウント（オプション） – バージョン管理とデプロイ用ですが、開始には必須ではありません。
- 忍耐 – 最初のアプリは完璧ではありません。私のものもそうでした。
警告： Lovable.dev は強力ですが、魔法ではありません。アプリのロジックとユーザーフローを自分で考える必要があります。AI は構築を支援しますが、あなたは依然としてアーキテクトです。
ステップ 1：新規プロジェクトを開始
初めてログインしたとき、すっきりとしたダッシュボードが表示されました。私が行ったことは次のとおりです：
- 右上隅の 「新規プロジェクト」 ボタンをクリック。
- プロジェクトに名前を付けます。私は「FreelancePortal」と名付けました。
- テンプレートを選択。完全に制御したかったので、「ブランクアプリ」 から始めました。
- 「プロジェクトを作成」 をクリック。
ワークスペースが開き、左側にシンプルなサイドバー（アプリの構造）、右側にプレビューペインが表示されました。簡略化された VS Code のように、親しみやすく感じました。
ステップ 2：プロンプトでアプリを定義
ここが魔法の起こる場所です。コードを書く代わりに、欲しいものを説明します。私は下部のチャットインターフェースに次のように入力しました：
「FreelancePortal」という Web アプリを作成し、以下を含める：
- ログインページ（メール + パスワード）
- 総収入、未処理の請求書、最近のクライアントを表示するダッシュボード
- 請求書をアップロードするページ（PDF のみ）
- ページ間のナビゲーション
- 青を原色とした、清潔でプロフェッショナルなデザイン
AI はすぐにコードの生成を開始しました。サイドバーにファイルが表示されるのを見ました：LoginPage.tsx、Dashboard.tsx、InvoiceUpload.tsx。プレビューペインはリアルタイムで更新されました。
警告： プロンプトは具体的に。最初に「素敵なダッシュボード」と言ったら、1990 年代のスプレッドシートのようなものができました。詳細を多く提供するほど、結果は良くなります。
ステップ 3：生成されたコードをカスタマイズ
AI はしっかりした基盤を提供しましたが、調整が必要でした。以下が改良方法です：
- サイドバーの任意のファイルをクリック してエディタで開く。
- チャットでプロンプトを修正 して変更を加える。例えば、次のように入力しました：
ダッシュボードのレイアウトを3列グリッドに変更。月次収入を示すグラフを追加。 - コードを直接編集 して正確に制御したい場合。CSS を編集して原色を青から
#2D6A4F（フォレストグリーン）に変更しました：:root { --primary: #2D6A4F; --primary-hover: #1B4332; }
エディタはリアルタイムプレビューをサポートしているため、すべての変更が即座に右側に表示されました。ボタンの移動、フォントサイズの調整、ツールチップの追加など、約30分間繰り返し調整しました。
ステップ 4：ユーザー認証を追加
すべてのアプリにはユーザーが必要です。シンプルなプロンプトで認証を追加しました：
ユーザー認証を追加し、以下を含める：
- サインアップページ（名前、メール、パスワード）
- ログインページ
- メールによるパスワードリセット
- ログインユーザーのみアクセス可能なダッシュボードルートを保護
- バックエンドに Supabase を使用
Lovable.dev は自動的に Supabase を統合しました。新しいファイルが表示されました：AuthContext.tsx、`supabaseC