こんにちは！
ＳＯＭＰＯシステムズのアプリケーションエンジニアです。

突然ですが、皆さんはプログラミングはお好きでしょうか？
プログラミングが好きな人、インフラ技術に興味がある人、あるいは最新技術を試してみたい人など、この業界に入る理由は人それぞれだと思います。私はその中でも「プログラミングが好き」という理由でこの道に進みました！
プログラミングは、まるでパズルを解くような感覚ではないでしょうか？
コードを書きながら、一つずつピースを組み合わせていき、それが実際に動いた瞬間の感動。さらに、少しずつ修正を重ねて最終的に完成させたときには、「やってやったぜ！」という達成感を味わえます。私はその達成感に惹かれて、プログラミングが好きになりました。

一方で、最近はAIやノーコード、ローコードツールが普及してきて、
自身の手を動かさずともアプリケーションの開発ができると聞いています。
そんな私泣かせの実情を知るために、今回3つのサービスをお試しで使ってみようと思います。

1. 比較する3サービス

以下3つのサービスを使います。
3部作の記事になる予定です。
今回は1のAWS App Studioが対象です。

1. AWS App Studio（この記事の対象）

2. v0 by vercel

3. bolt.new

2. 課題定義

検証をするにあたって、すべてのサービスで同じ要件のアプリを作成します。
昨今の生成AIブームにちなんで、簡易的なChatbotの要件にしました。

Chatbotアプリを作成してください。詳細な要件は以下です。

• 「SOMPOシステムズブログ用アプリ」と記載されたHeaderがあること

• bodyにはChatbot機能があること

• Chatbot機能は将来的にOpenAIと接続できるようにすること

• 画面の見た目は青を基調としてかっこよく
  （抽象的ですが、、、）

また、画面の出来栄えだけではなく、運用や保守の行いやすさも評価に入れます。

3. サービスの紹介

【AWS App Studio】（リンク）

4. サービス使ってみた

4-1. AWS App Studioを利用できるようになるまで

4-1-1.IAM Identitiy Centerアカウントの作成
  App studioのインスタンス作成時に自動で作成してくれるみたいですね。
  開発者の管理はここでするみたいです。

4-1-2. IAMポリシーの設定
  チェックボックスにチェックを入れて、必要なIAMポリシーを勝手に設定してもらいます。

4-1-3. Amazon CodeCatalystの設定
  Amazon CodeCatalystのスペースも勝手に作ってもらいます。
  Amazon CodeCatalystは統合ソフトウェア開発サービスです。
  App Studioはこのスペースを使用して起動します。
  設定画面によると無料で使えるみたいですね。

4-1-4. App Studioの作成
  「設定ボタン」を押下し、App Studioの作成を行います。
  15分くらい待ちます。

4-1-5. サインイン
  1で作成したアカウントでサインイン！

4-1-6.MFA認証を設定

4-1-7.create app！

4-2. AWS App Studioでアプリを作成

4-2-1. アプリ作成
  左下のChat欄に課題定義で挙げた要件を記載して送信します。
（日本語入力して漢字に変換するとなぜか送信されてしまうので、メモ帳で送信内容を作成してからコピーして貼り付けました。）
  たった4つの適当な要件を上げただけなのに「使用例」、「ユーザーフロー」、「データソース」まで作成してくれました！（画像右側）
  また、「アプリの概要」や「主な機能」、「使い方」も教えてくれます！
  これは便利ですね！

  それではアプリを生成してもらいましょう。genarate app！

  生成された！
  と思ったら、メインのChatbot機能が無い、、、
  そして「青を基調とした」もない、、、
  ヘッダーだけそれらしくできました。
  さすがにお願いすることがざっくりすぎたかと反省。

  再度AIにお願いしよう！と思ったらChatでお願いできるところが無い！
  AIに機能の質問をするChatはあるみたいだけど、再生成するところが無い！

4-2-2.アプリの再作成
  しかたなくアプリを削除して再度作成

  先ほどの質問に加え以下のお願いを加えてみました。
  ・テキストボックスに文字を入力して送信ボタンを押したらOpenAPIに接続するようにしてください。
  ・Chatbot機能ではAPIから帰ってくるメッセージを左、自身が送ったメッセージを右に表示してください。
  ・過去のChatbotとのやりとりはスクロールしたら表示されるようにしてください。

  少し細かく書いたので行けるはず！genarate app！

  結果、前回と変わらず！
  およよよよ
  私のプロンプトが悪いのでしょうか。きっとそうです。

しかし、なんとなくですが自然言語で作成できるアプリの限界が見えてきました。
ついでに私の集中力の限界も見えてきましたので、画面自動生成の実験は終了です。

4-3. その他機能

4-3-1.編集画面：pages
  画面の作成をノーコードで行えます。
  Textやbutton等のコンポーネントは一通りあるイメージですが、画面の中で  自由な配置ができないことやデザインの修正が簡易的にしかできない等の最低限の機能でした。
  もちろんChat画面を作れるようなコンポーネントはありません。
  今回失敗した原因はここにあるかもしれません。
  一方でエンティティの中身の数だけリスト表示してくれるコンポーネントもあるので、それで代替できるでしょうか。

4-3-2.編集画面：Automation
  AWSの各サービスや外部APIとの接続、データの変換等を行えます。
  lambdaやS3に簡単に接続できそう！
  また、IF分岐やループ処理、APIもキックできるので拡張性はありそうです。複雑な処理も頑張れば作れそう。（lambdaでやれよという話ですが。）
  RDSとの接続もないのでこれもlambdaや他APIでやってねということですかね。

4-3-3.編集画面：Data
  画面上で表示するデータのエンティティです。
  エンティティを視覚的に管理してくれるので、データフローの整理がつきやすいです。

5. 感想

お題のChatbotは作れず、全体的にこれからという印象を受けました。

5-1. 良かった点

AIチャット欄に要件を伝えると「使用例」、「ユーザーフロー」、「データソース」を作成してくれるのは嬉しかったです。
作るべきアプリの全体感を再認識できました。
また、各AWSのサービスに簡易的に接続できる点もよかったです。

5-2. 課題に感じた点

アプリを作成してからAIを使って修正できないのは残念です。
AIにお願い→確認→AIに修正依頼のトライ＆エラーしていくのが理想だったのですが。
また、ノーコードなので非エンジニアに向いているかと思いきや、DataやAutomationsの設計・使い方に関しては少しプログラミングの経験がないと厳しそうだなと思いました。

5-3. 最後に

作成物について、簡易的なアプリ（ToDoリストや問合せフォーム等）を作成するには向いていると思いますが、今回題材にしたChatbotのような複雑なアプリケーションは作りづらそうです。
業務で利用できるようなユースケースを挙げるとすれば、UI/UXをあまり意識しない「お問合せ画面」や「管理者画面」とかでしょうか。
ユーザーアカウントの管理等は簡単に作れそうですね。
AWSを利用して提供している既存のアプリがあれば、ささっと画面をApp Studioで作って既存のAPIに繋げられそうです。
ぜひ運用改善にいかがでしょうか。

以上のことから、今後のさらなるアップデートに期待です！
「いや、ブログ書くくらいなら最後まで何か動くもの作れよ」と思ったそこのあなた！ぜひ自分でお試しください！