2025/03/28

テクノロジー

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に作ってもらうことも検討しようと思います!

    最後まで見ていただきありがとうございました🙇

    外部リンク

    lovable公式サイト

    ※本記事は2025年03月時点の情報です。

    著者:マイナビエンジニアブログ編集部