この記事は、「Ionic Framework / Capacitor / Stencil Advent Calendar 2024」23日目として投稿しています。最近増えつつある生成AIを利用したアプリケーション開発サービスがだいたいReact / Tailwindベースなので、Angular / Ionicで作れるものはないかと挑戦してみた記録を紹介します。

今回試したサービス: bolt.new

今回はSupabaseの方などがSNSでよく紹介されているのを見かけた、boltというサービスで挑戦しました。

このサービスを選んだ理由の1つとしては、TOPページにReact以外のアプリケーションフレームワークのロゴも掲載されていたことがあります。Ionicのロゴ・・・はない様子ですが、Angularがあるならいけるだろう。ということで挑戦してみます。

アカウントはメールアドレスまたはGitHubアカウントを利用します。この手のサービスは、ソースコードをGitHubにデプロイできることが多い（主観）ので、GitHubでアカウントを作成しています。

作成に成功すると、さっそくチャットで指示が出せます。UIの見た目や雰囲気はチャットベースの生成AI系サービスとしては一般的な感じがします。そのため、この手のサービスを初めて使う人でも、そこまで迷うことはないかなと思いました。

フレームワークを指定したプロンプトを実行する

それではアプリ開発を始めましょう。経験上この手のサービスは、ReactやTailwindを使いたがる傾向があります。そのため、「Ionic Angularを利用しましょう。」と明示的に指定するプロンプトを作成して送信しました。

boltでのアプリケーション作成は、作成の流れをチャットの返答として生成後、必要なファイルを順番に生成する流れで進みます。npmなどの実行環境も用意されているらしく、npm installなども走っていました。

ただし返答やコードを見ると、IonicではなくNativeScriptを使っています。この辺りはプロンプトが長くなると発生するケースもありますので、一旦NativeScriptは使わない旨を伝えることにしました。

この辺りでビルド・実行時にエラーが出るようになってきます。boltはエラーが起きた場合も、修正作業を始めるための指示を1クリックで出せるようになっています。この辺りは開発者体験として非常に良いなと思いました。

ただし今回発生していたエラーは解決してくれませんでした。ファイルとコードをざっと確認したところ、どうやらangular.jsonファイルが生成されていない様子です。それが原因でAngularプロジェクトとして立ち上げることができていないように見えます。ただ、このファイルを生成するタスクが今回はうまく指示することができませんでした。

boltにはコマンドラインもあります。そのため手動でエラーを修正することにも挑戦できました。Angular CLIを使って修正を試みます。

しかしコマンドによってはプロンプト経由でないとダメな時もある様子でした。ng newコマンドも実行できないものの１つです。もともとAngularに明るくないこともあり、どんなconfigファイルを配置すれば良いかがわからず、ここでトークン数を使い切ったこともあって断念しました。

感想

作業内容の生成とコード生成両方を行うためClaude / ChatGPTなどと比較するとトークン消費量がかなり多いです。そのため、本格的に使うとなると早い段階で課金が必要になりそうかなと思います。

価格は何段階か用意されていました。20ドルが生成AI系サービスのベースラインになってきている感じがありますね。

個人的に気になったところとしては、Chain of Thoughtsの内容はあまり見せてくれないという点もあります。そのため、思ったのと違う作業が始まったときは、なぜそうなったなどを自力で推察する必要があり、経験知や察し力が求められるかもしれません。またやはり自分がある程度理解のあるスタック・フレームワークを選ぶ方が良いなと思います。何かのファイルが欠落している場合などに、リカバリーが人力でできるのは大きいし、そのための仕組みとしてターミナルやファイルエディタがあるのも強いですね。

ということで、Ionic Angularアプリを生成AI系のアプリ制作サービスに創らせるのは、まだまだ道のりが遠そうな感じでした。Claudeがコードや手順のみ指示してくれるのは確認していますので、アドバイスをもらいながらCopilotと共に実装するのが現実的なところかもしれませんね・・・