この記事は、「LLM(Large Language Model) Advent Calendar」10日目の記事として、生成AIを利用したアプリ開発を試してみたという内容を紹介します。生成AIでのアプリ開発やノーコードでのアプリ開発手法の1つとして、参考になればと思います。

lovableとは

SupabaseのXアカウントで見かけたサービスですが、生成AIベースでアプリが作れるとのことです。

GitHubやGoogleアカウントを利用して、無料で試すことができます。後で紹介しますが、GitHub連携機能がありますので、GitHubアカウントを使う方がもしかすると手軽かもしれません。

テンプレートを使ってアプリをセットアップする

lovableを試す際に便利なのがTemplatesです。ランディングページやダッシュボードなど、いくつかのユースケースに合わせたテンプレートが用意されているので、それを利用して簡単にサービスを試すことができます。

テンプレートの詳細画面では使い方やプレビューリンクなども用意されていました。この辺りをチェックして、作りたいものをテンプレートから始めるべきか、1から作るべきかを考えることになりそうです。

Templatesからセットアップすると、十数回のチャット履歴とともにアプリが表示されます。コードをいきなりインポートしているのではなく、Templateを作るまでの会話履歴ごとクローンされている感じ・・・でしょうか。履歴が残っている分、Template作者の意図を引き継いだ指示が出せるのかもしれません。

せっかくなので、「please localize for the Japanese」と日本語化の指示を追加してみました。すると早速翻訳ファイルの生成が始まります。この辺りのコードを生成していく雰囲気は、ClaudeのArtifactsにも近しいかもしれません。

途中生成されたコードのビルドが失敗する場面がありました。この時、エラーメッセージを確認しつつ修正指示を出したり、工具アイコンをクリックしたりすると、エラーの修復まで開始してくれます。

修復も終わると、アプリのUIが日本語に変わりました。とはいえ、いくつかのナビゲーションなどは翻訳できていない様子ですので、ここを手で直すか追加指示を出すかなどは個別の判断となりそうです。

Supabase / GitHubへの連携と、Lovable上での公開が可能

作成したアプリは、Supabase / GitHubと連携できます。データベースやストレージに保存する情報はSupabase、コードベースはGitHubという使い分けになりそうですね。Publishボタンを押してLovable上でそのまま公開しても良さそうです。

1からアプリを作ってみる

せっかくなので、1からのアプリ開発も挑戦してみました。今回はシンプルな足し算引き算アプリを作らせてみます。生成AIのモデルが日本語にも対応しているらしく、指示は日本語でも問題ありませんでした。

コードの生成が始まります。ReactやShadcnあたりを使うのも、Claude Artifactsでのアプリ開発を彷彿とさせます。内部のモデルが同じ・・・なのでしょうか？

生成されたアプリは、エディタ上でそのままテストできます。動かしてみて感じたことを追加で指示することで、機能の追加や要件の伝え漏れなどをリカバリーできます。

余談: React以外はNGかも

作成されたアプリコードを、Angularにできるか聞いてみたところ次のような回答が生成されました。サポートしている言語やフレームワークがReactに限定されているため、Lovableのエディタで全ての作業を行うか、Reactの開発経験を持つ開発者が生成結果を引き継いでリリース準備や運用保守を行うかになりそうです。

触ってみて

簡単なアプリのみですが、あまり違和感や使いづらさも感じないものが生成されたのは驚きでした。生成したコードをGitHubやSupabaseへ連携できるのも、初期の立ち上げだけ生成AIに任せるようなワークフローが考えられてよいなと思います。

あまりこの手のツールを触っていなかったので、年末はもう何種類か触ってみたり、実際にリリースしたりもしてみようかなと思います。