概要
lovableについて調べて、ちょっと触ってみた。
雑な調査
オフィシャルのURL↓
↑のリンク先のファーストビューを見るだけでなんとなくわかる。これはおそらく生成AIを使い、自然言語でアイデアを伝えるとアウトプットとしてWebアプリを作ってくれるのではないか？？
公式ドキュメント↓
体験
後々ログインを求められても面倒なので、GitHubのアカウントを使って登録・ログインしておいた。
それでは早速、ファーストビューの入力欄に自然言語で入力してサービスを作ってもらおう。
下記の内容を記載してEnterを押下した。（変換のためにEnterを押下したりすると生成が走ってしまうっぽいので↓の内容をコピペしてからEnterを押下して生成を依頼した。）
「かわいいトイプードルの画像をランダムで表示するWebアプリケーションを作ってください。」
Enterを押下して少し待つとコードの生成が始まる。走り切るまで少し待ってみる。
コードの生成が終わるとプレビューが表示される。どうやらここで操作が試せるようだ。（画像がトイプードルではないが、おそらくフリーのワンちゃんの画像を取ってくるAPI（Dog API）を使っているはずで、トイプードルの判定を行うことが難しいためこのようになっているんだと思う。）
操作してみた。同じ犬の画像が連続して表示されてしまう事があるが、これが自動で作れるのは本当にすごい。
トイプードルの判定は難しいのかなと思い、下記の内容を入力して再生成をお願いしてみた。
今回のwebアプリケーションはトイプードルの画像のみを表示しようと思っていました。しかし、気が変わりました。いろいろな犬の画像をランダムに表示してほしいです。画面内部のテキストも含めて変更してください。
ものの数十秒でコードの再生が行われ、プレビュー画面に反映された。ただ、表示画像が連続して同様のものが出てしまう問題がある。これを改善してほしいので下記の様にお願いしてみる。
非常に良さそうです。
ただ、「次の犬」のボタンを押下した際、稀に同様の犬の画像が表示されてしまいます。厳密にランダムに犬の画像を表示するように変更してください。
↓依頼から生成完了までをノーカットで（gifだと画質が荒いためわかりにくいかも。）
「確実に異なる犬の画像が表示されるように変更しました。」と言われたが、改善してなさそう。でもすごい。本当にすごい。
どうやら生成したコードが見れるらしいので確認してみようと思う。画面上にコードが見れそうなボタンを発見、ホバーすると「Code viewer」と出たので押して見る。
コードがを見ることができた。laravel.mixがscssやjsをトランスパイルしたあとのようなファイルを想像していた。（人間が読むことを想定せず、ワンラインでバーっと書かれてるイメージ）これなら全然読める。この画面で人間が手を加えることこそできないが、Githubのリポジトリと同期すれば人間もコードをいじれそう。
ちょっと質問してみよう。下記の内容を聞いてみた。コードを見ればわかるのかもしれないがこの辺も雑に聞いてみる。
私はバックエンドエンジニアで、フロントエンドのコードをあまり良く知りません。差し支えなければ今回生成してくれたWebアプリケーションはどのような技術スタックで作成したか教えていただけませんか？
すぐ返事が来た。間違えていないように思える。
返事の内容を記載しておく。
この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」をクリック。
ん〜〜〜〜残念、、！「Enable Code Editing」の設定はなさそう！おしい！
GitHubにコードを上げてもらおうと思う。
Code viewerの右上にGitHubのボタンがあるので押して見る。
「Connect to GitHub」をクリック
GitHubアカウントの選択と権限周りの承認を求められるので自己判断で「Install & Authorize」を押下
画面を更新してもう一度GitHubボタンをクリック、ユーザーをクリック
リポジトリが作られたっぽい。「View on GitHub」をクリックして見に行ってみる。
すごい、作られてる。README.mdもあるしコミットも一括でコミットされているのではなく、指示に沿った修正コミットが作られている。
GitHubで直接人間がコードを編集してみて、それがlovableに反映されるのか見てみよう。
まずはsrc/pages/Index.tsxをlovable側で確認する。下記の状態。↓
1行目に適当にコメント追加してmainブランチでコミット
その後lovableに戻って見てみると、特に画面更新などをしなくても人間が追加したコメントが1行目に入っていた。すごすぎる。これなら生成AIくんと一緒にプロダクトを作ることができそう。
いい時代だなぁ
もっとできることはたくさんありそう
ドキュメントを見る限りもっとできることはたくさんありそう。今回のようなトイアプリの作成にとどまらず、本格的なアプリケーションの生成なんかも容易にできそうだった。
気になったのが、Stripeのコード不要な支払いリンクを渡せばチェックアウトフローも生成も可能らしい。
ちょっとだけイケてない点
日本語入力に対応こそしているものの、変換時にスペースキーを押下すると内容が送られてしまい、生成AIくんを混乱させてしまう。（もしかすると設定次第かも。）
今のところメモ帳などに記載してコピペして会話している。