lovableってなんだ？何ができるんだ？

## 概要

lovableについて調べて、ちょっと触ってみた。

## 雑な調査

オフィシャルのURL↓

https://lovable.dev/

↑のリンク先のファーストビューを見るだけでなんとなくわかる。これはおそらく生成AIを使い、自然言語でアイデアを伝えるとアウトプットとしてWebアプリを作ってくれるのではないか？？

公式ドキュメント↓

https://docs.lovable.dev/introduction

## 体験

後々ログインを求められても面倒なので、GitHubのアカウントを使って登録・ログインしておいた。
それでは早速、ファーストビューの入力欄に自然言語で入力してサービスを作ってもらおう。

下記の内容を記載してEnterを押下した。（変換のためにEnterを押下したりすると生成が走ってしまうっぽいので↓の内容をコピペしてからEnterを押下して生成を依頼した。）

```
「かわいいトイプードルの画像をランダムで表示するWebアプリケーションを作ってください。」
```

![CleanShot 2025-03-22 at 10.40.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d70dcd89-fa4f-42d2-99a9-45be87a9f965.png)

Enterを押下して少し待つとコードの生成が始まる。走り切るまで少し待ってみる。

![CleanShot 2025-03-22 at 10.42.23.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/46eb43c2-3c71-4975-b577-cd7a6983fb89.gif)

コードの生成が終わるとプレビューが表示される。どうやらここで操作が試せるようだ。（画像がトイプードルではないが、おそらくフリーのワンちゃんの画像を取ってくるAPI（Dog API）を使っているはずで、トイプードルの判定を行うことが難しいためこのようになっているんだと思う。）

![CleanShot 2025-03-22 at 10.45.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/e8e50b59-ffc9-48db-b845-ea13d87af113.png)

操作してみた。同じ犬の画像が連続して表示されてしまう事があるが、これが自動で作れるのは本当にすごい。

![CleanShot 2025-03-22 at 10.46.54.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b2971431-5eeb-4182-8da9-b0fee812b789.gif)

トイプードルの判定は難しいのかなと思い、下記の内容を入力して再生成をお願いしてみた。

```
今回のwebアプリケーションはトイプードルの画像のみを表示しようと思っていました。しかし、気が変わりました。いろいろな犬の画像をランダムに表示してほしいです。画面内部のテキストも含めて変更してください。
```

![CleanShot 2025-03-22 at 10.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/04849724-451a-4bba-b69c-91af24c7482e.png)

ものの数十秒でコードの再生が行われ、プレビュー画面に反映された。ただ、表示画像が連続して同様のものが出てしまう問題がある。これを改善してほしいので下記の様にお願いしてみる。

```
非常に良さそうです。
ただ、「次の犬」のボタンを押下した際、稀に同様の犬の画像が表示されてしまいます。厳密にランダムに犬の画像を表示するように変更してください。
```

↓依頼から生成完了までをノーカットで（gifだと画質が荒いためわかりにくいかも。）

![CleanShot 2025-03-22 at 10.55.59.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/bd08165f-f2cb-4f1e-8dfd-70f6dc67a74f.gif)

「確実に異なる犬の画像が表示されるように変更しました。」と言われたが、改善してなさそう。でもすごい。本当にすごい。
どうやら生成したコードが見れるらしいので確認してみようと思う。画面上にコードが見れそうなボタンを発見、ホバーすると「Code viewer」と出たので押して見る。

![CleanShot 2025-03-22 at 10.59.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8c78e35f-63a7-4e7f-9b80-2a0428659f87.png)

コードがを見ることができた。laravel.mixがscssやjsをトランスパイルしたあとのようなファイルを想像していた。（人間が読むことを想定せず、ワンラインでバーっと書かれてるイメージ）これなら全然読める。この画面で人間が手を加えることこそできないが、Githubのリポジトリと同期すれば人間もコードをいじれそう。

![CleanShot 2025-03-22 at 11.01.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f184a3ac-0cb3-4826-9c1e-3c2bb52c5717.png)

ちょっと質問してみよう。下記の内容を聞いてみた。コードを見ればわかるのかもしれないがこの辺も雑に聞いてみる。

```
私はバックエンドエンジニアで、フロントエンドのコードをあまり良く知りません。差し支えなければ今回生成してくれたWebアプリケーションはどのような技術スタックで作成したか教えていただけませんか？
```

すぐ返事が来た。間違えていないように思える。

![CleanShot 2025-03-22 at 11.05.59.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4ed42cee-4f9c-4eaa-aef7-6b0a56b438ff.gif)

返事の内容を記載しておく。

```
このWebアプリケーションは、モダンなフロントエンド技術スタックを使用して構築されています。主な技術要素は以下の通りです：

React - ユーザーインターフェイスを構築するためのJavaScriptライブラリです。コンポーネントベースのアーキテクチャを採用しており、UIの再利用可能な部品を作成できます。
TypeScript - JavaScriptに静的型付けを追加した言語です。開発時のエラー検出やコード補完などの機能により、より堅牢なアプリケーション開発をサポートします。
Vite - モダンなフロントエンドツールで、高速な開発サーバーとビルドツールを提供します。従来のツールと比較して非常に高速に動作します。
Tailwind CSS - ユーティリティファーストのCSSフレームワークで、HTMLに直接クラスを追加することでスタイリングを行います。カスタムデザインを素早く実装できます。
shadcn/ui - 美しくアクセシブルなUIコンポーネントライブラリで、Tailwind CSSをベースにしています。ボタンやカードなどの再利用可能なコンポーネントを提供します。
React Router - 画面遷移を管理するためのライブラリです。シングルページアプリケーション(SPA)を実現します。
React Query - サーバーの状態管理、データフェッチング、キャッシングなどを容易にするライブラリです。
```

最後にGitHubと同期をしてみて本当にコードを自分で変更できるようになるのか試してみる。まずは方法を雑に聞いてみる。

```
ありがとうございます。
このコードを人間である私も手を加えたいです。どうしたらいいですか？
```

１つ目の手順で下記のように返ってきた。もしかして設定次第で直接編集できるのか？案内された方法で試してみよう。

```
1. Lovableプロジェクト内で編集
Lovableプロジェクトのページ（https://lovable.dev/projects/36d0f1e9-1bc6-4332-a14a-e8450b841d2c）にアクセスして、右上にある「Dev Mode」トグルをクリックすると、コードエディタが表示されます。アカウント設定の「Labs」で「Enable Code Editing」が有効になっていれば、直接コードを編集できます。
```

lovableのアカウント設定に移動してみる。左上のアイコンから「Account Settings」をクリック。

![CleanShot 2025-03-22 at 11.14.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/1a4cad83-2a4d-47dc-ae1e-62af8820c72b.png)

ん〜〜〜〜残念、、！「Enable Code Editing」の設定はなさそう！おしい！

![CleanShot 2025-03-22 at 11.16.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d49f7958-b134-4652-af82-b583d2a82ecf.png)

GitHubにコードを上げてもらおうと思う。
Code viewerの右上にGitHubのボタンがあるので押して見る。

![CleanShot 2025-03-22 at 11.19.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f57a9777-6da9-4232-bbbb-7674c4ceecb2.png)

「Connect to GitHub」をクリック

![CleanShot 2025-03-22 at 11.20.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/adb47dc2-8657-4b83-88f9-2a237ab42183.png)

GitHubアカウントの選択と権限周りの承認を求められるので自己判断で「Install & Authorize」を押下

![CleanShot 2025-03-22 at 11.22.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/20042957-2b7f-471d-9134-0e6ab8d00cc4.png)

画面を更新してもう一度GitHubボタンをクリック、ユーザーをクリック

![CleanShot 2025-03-22 at 11.23.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/85e7a813-cbd4-48a8-bc21-502f5698ca94.png)

リポジトリが作られたっぽい。「View on GitHub」をクリックして見に行ってみる。

![CleanShot 2025-03-22 at 11.24.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/56afdd20-d8fe-4627-a168-925d63987654.png)

すごい、作られてる。README.mdもあるしコミットも一括でコミットされているのではなく、指示に沿った修正コミットが作られている。

![CleanShot 2025-03-22 at 11.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/6c258378-52d6-420d-ac98-01cd3e9121d4.png)
![CleanShot 2025-03-22 at 11.26.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/e5cec28e-2064-49ea-928d-c4826ad955cb.png)

GitHubで直接人間がコードを編集してみて、それがlovableに反映されるのか見てみよう。
まずは`src/pages/Index.tsx`をlovable側で確認する。下記の状態。↓

![CleanShot 2025-03-22 at 11.30.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/467bbb40-0dc6-42bc-83a2-e89b74194b7e.png)

1行目に適当にコメント追加してmainブランチでコミット

![CleanShot 2025-03-22 at 11.31.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/7dd54f42-dc45-4f3d-92a1-ec479beb3976.png)

その後lovableに戻って見てみると、特に画面更新などをしなくても人間が追加したコメントが1行目に入っていた。すごすぎる。これなら生成AIくんと一緒にプロダクトを作ることができそう。

![CleanShot 2025-03-22 at 11.32.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/2d1542ad-d2b5-46e0-9960-99250fe24959.png)

いい時代だなぁ

## もっとできることはたくさんありそう

ドキュメントを見る限りもっとできることはたくさんありそう。今回のようなトイアプリの作成にとどまらず、本格的なアプリケーションの生成なんかも容易にできそうだった。
気になったのが、Stripeのコード不要な支払いリンクを渡せばチェックアウトフローも生成も可能らしい。

https://docs.lovable.dev/tips-tricks/setting-up-payments

## ちょっとだけイケてない点

日本語入力に対応こそしているものの、変換時にスペースキーを押下すると内容が送られてしまい、生成AIくんを混乱させてしまう。（もしかすると設定次第かも。）
今のところメモ帳などに記載してコピペして会話している。