Lovable.dev 入門：アイデアからアプリへ

# Lovable.dev 入門：アイデアからアプリへ

私はフリーランスのビジネス用にシンプルなカスタマーポータルを構築しようと、真っ白な画面を見つめていたのを覚えています。私はプロの開発者ではありません。HTMLとCSSを少し知っている程度で、フルスタックのWebアプリを構築するのは不可能に感じられました。そんな時、Lovable.dev を発見し、すべてが変わりました。これが、アイデアから実際のアプリまでの、私のリアルなステップバイステップの旅です。

## 前提条件

始める前に、以下が必要です：

1. **Lovable.dev アカウント** – [lovable.dev](https://lovable.dev) でサインアップ。無料ティアでも完全なアプリを構築するのに十分です。

2. **明確なアイデア** – 私は付箋に「カスタマーポータル：ログイン、ダッシュボード、請求書アップロード」と書いていました。それで十分です。

3. **Web の基本的な理解** – コーディングは不要ですが、「ボタン」や「フォーム」が何かを知っていると役立ちます。

4. **GitHub アカウント（オプション）** – バージョン管理とデプロイ用ですが、開始には必須ではありません。

5. **忍耐** – 最初のアプリは完璧ではありません。私のものもそうでした。

> **警告：** Lovable.dev は強力ですが、魔法ではありません。アプリのロジックとユーザーフローを自分で考える必要があります。AI は構築を支援しますが、あなたは依然としてアーキテクトです。

## ステップ 1：新規プロジェクトを開始

初めてログインしたとき、すっきりとしたダッシュボードが表示されました。私が行ったことは次のとおりです：

1. 右上隅の **「新規プロジェクト」** ボタンをクリック。

2. プロジェクトに名前を付けます。私は「FreelancePortal」と名付けました。

3. テンプレートを選択。完全に制御したかったので、**「ブランクアプリ」** から始めました。

4. **「プロジェクトを作成」** をクリック。


ワークスペースが開き、左側にシンプルなサイドバー（アプリの構造）、右側にプレビューペインが表示されました。簡略化された VS Code のように、親しみやすく感じました。

## ステップ 2：プロンプトでアプリを定義

ここが魔法の起こる場所です。コードを書く代わりに、欲しいものを説明します。私は下部のチャットインターフェースに次のように入力しました：

```

「FreelancePortal」という Web アプリを作成し、以下を含める：

- ログインページ（メール + パスワード）

- 総収入、未処理の請求書、最近のクライアントを表示するダッシュボード

- 請求書をアップロードするページ（PDF のみ）

- ページ間のナビゲーション

- 青を原色とした、清潔でプロフェッショナルなデザイン

```

AI はすぐにコードの生成を開始しました。サイドバーにファイルが表示されるのを見ました：`LoginPage.tsx`、`Dashboard.tsx`、`InvoiceUpload.tsx`。プレビューペインはリアルタイムで更新されました。


> **警告：** プロンプトは具体的に。最初に「素敵なダッシュボード」と言ったら、1990 年代のスプレッドシートのようなものができました。詳細を多く提供するほど、結果は良くなります。

## ステップ 3：生成されたコードをカスタマイズ

AI はしっかりした基盤を提供しましたが、調整が必要でした。以下が改良方法です：

1. **サイドバーの任意のファイルをクリック** してエディタで開く。

2. **チャットでプロンプトを修正** して変更を加える。例えば、次のように入力しました：

```

ダッシュボードのレイアウトを3列グリッドに変更。月次収入を示すグラフを追加。

```

3. **コードを直接編集** して正確に制御したい場合。CSS を編集して原色を青から `#2D6A4F`（フォレストグリーン）に変更しました：

```css

:root {

--primary: #2D6A4F;

--primary-hover: #1B4332;

}

```

エディタはリアルタイムプレビューをサポートしているため、すべての変更が即座に右側に表示されました。ボタンの移動、フォントサイズの調整、ツールチップの追加など、約30分間繰り返し調整しました。

## ステップ 4：ユーザー認証を追加

すべてのアプリにはユーザーが必要です。シンプルなプロンプトで認証を追加しました：

```

ユーザー認証を追加し、以下を含める：

- サインアップページ（名前、メール、パスワード）

- ログインページ

- メールによるパスワードリセット

- ログインユーザーのみアクセス可能なダッシュボードルートを保護

- バックエンドに Supabase を使用

```

Lovable.dev は自動的に Supabase を統合しました。新しいファイルが表示されました：`AuthContext.tsx`、`supabaseC