lovableを使って爆速でWebアプリをAIに開発してもらう方法

この記事の目次
マイナビジョブサーチ担当のM.Sです。
"余暇で何か物作りをしよう" となったときにどうしても時間が足りなくなりますよね... 😢
今回は、lovableを使って簡単にWebアプリケーションを生成してみようと思います。
lovableとは
lovableは、2024年11月にGPTエンジニアからリブランディングされて公開されたツールになります。
lovable公式サイト
下記がlovableの特徴です。
- Webアプリ開発、動作確認、デプロイまでlovableのみで完結できる
- シンプルなプロンプトでウェブサイト生成できる
- デザイン面で他のツールより優れている
- Figmaから書き出すことができる
- テンプレートから開発を開始できる
費用面的には、使い放題ではないスターターでも$20と少しお高めですが、払う価値があるくらいすごいツールだと思います。

lovableでWebアプリを作成してみよう
今回は、このような TODO のアプリケーションを作成してみようと思います。
やり方の手順としては、下記のような感じです。
- ChatGPTを使って要件定義する
- lovableで開発してもらう
- 細かいチューニング
要件定義
簡単にこんな感じに要件を設定してみました。
データの形は、lovableがよしなにやってくれるので、外側の仕様を中心に定義してみました。
## 概要
TODOリストアプリ
## 技術
- React
- Supabase
## 機能
- タスクを追加することができる
- タスクを削除することができる
- BackLogのようにドラックアンドドロップでタスクのステータスを変更することができる
- supabaseで非同期のステータス更新
- TODOリストのステータス
- 未着手
- 処置中
- 完了
## デザイン
- モダンでかっこいいデザイン
- 白黒基調のシンプルな配色
lovableに開発してもらう
先ほどの要件定義のプロンプトをそのまま、lovableに投げてみます。
先ほどのプロンプトを投げるといい感じに、TODOリストのUIを作成してくれました。
プレビューのところまでは、チャットと同時に作成してくれます。

挙動を見ると分かるように、かなりモダンな感じで作られています。
コマンド一発でこれが実装できるのはかなりすごいですね...
次にsupabaseとの連携も行っていこうと思います。
現状では、ローカルでデータが保存されているだけなので、supabaseも実装していきます。
lovable上のsupabaseボタンから連携を行っていきます。


コードを修正したら、対象のsupabase側でテーブルを用意します。
supabaseのSQL Editorで、lovableから吐き出されたSQLをそのまま実行します。



supabaseの設定まで完了するとこんな感じになります。
ログイン機能などが備わっていないものの、バックエンドの実装までは簡単にできました。
すごいですね...😳
細かいチューニング
細かいチューニングに関しては、GitHubを通して行うか、lovableのチャットで行うかになります。
lovable上のGitHubボタンからGitHubを登録すると、GitHubで修正してmainブランチにプッシュされたものを確認し、lovable上に反映させてくれます。

大きな部分はlovableで、細かい部分はGitHubで自分でソースを修正することで、効率よく開発できそうですね。
デプロイ
ちなみにパブリッシュボタンからは、デプロイも簡単に行うことができます。

かかった時間
実際にかかった時間を測っていたのですが、だいたいこれくらいでした。
- 要件定義: 10分
- 開発時間: 20分
簡易的とはいえ、FE/BE込みのWebアプリを30分くらいで作るのはかなり難しいと思います...
コードの質はどうなのか
今回のファイルの出力は、こんな感じになっていました。
一般的なディレクトリ構成になっていて、追加開発や細かいチューニングもしやすそうです。
taskory-dash
├── node_modules
├── public
└── src
├── components
│ ├── ui
│ │ └── // 細かいUIが入っている
│ ├── Column.tsx
│ └── Task.tsx
├── hooks
│ ├── use-mobile.tsx
│ └── use-toast.ts
├── lib
│ ├── supabase.ts
│ └── utils.ts
├── types
│ └──task.ts
└── pages
├── Index.tsx
├── App.css
├── App.tsx
├── index.css
├── main.tsx
└── vite-env.d.ts
下記は、TODOのタスクカードの部分です。修正しやすそうですね。
/comopnents/ui/Task.tsx
import { Card } from "@/components/ui/card";
import { Draggable } from "@hello-pangea/dnd";
interface TaskProps {
id: string;
content: string;
index: number;
onDelete: (id: string) => void;
}
export const Task = ({ id, content, index, onDelete }: TaskProps) => {
return (
<Draggable draggableId={id} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className="mb-2"
>
<Card className="p-4 hover:shadow-md transition-shadow bg-white">
<div className="flex justify-between items-center">
<p className="text-sm text-gray-800">{content}</p>
<button
onClick={() => onDelete(id)}
className="text-red-500 hover:text-red-700 transition-colors"
>
×
</button>
</div>
</Card>
</div>
)}
</Draggable>
);
};
まとめ
お値段がかなり高め + 課金版でも使い放題ではないですが、ノーコードで開発もしくは、大枠を作ってもらうというところは、使えそうなのかなと思いました。
今後何か作ってみたいものがあれば、lovableに作ってもらうことも検討しようと思います!
最後まで見ていただきありがとうございました🙇
外部リンク
※本記事は2025年03月時点の情報です。