［SwiftUI］SwiftUI初心者がレビュー評価画面を作ってみた

完成イメージ

まず、完成図はこちらです↓
星マークでレビューを評価することができ、またコメントを記入することができるダイアログ画面です。

前提

私は SwiftUIでの開発経験がゼロ です。
そのため、まずは ChatGPTにレビュー評価ダイアログの作成を依頼しました。

ChatGPTへの依頼内容

依頼時には、以下のような内容を箇条書きで細かく伝えました。
また、イメージが伝わりやすいように画像も添付しました。

🔽 ChatGPTに送った内容

私は現在SwiftUIを用いて顧客がタクシードライバーの評価をできる画面を作ろうと思っています。

• このアプリはタクシーを呼ぶためのアプリです。
• 画像を参考にコードの制作を行ってください。
• 一番上の文言は、「ドライバーの評価をお願いします」という文言へ変更をお願いいたします。
• 写真の形は丸型にしてください。(作成時の写真はダミーでOKです。)
• 写真の下は会社名にしてください(作成時の値はダミーでOK)
• 介護タクシードライバーの評価を星5段階で評価したいと思っております。
• はじめは、5段階評価の星には色がついていません。星の枠組みの形しかありません。
  クリックすると星の色が黄色に変化します。
• 赤枠のところだけ、テキストボックス(任意でOK)にしてほしいです
• プレースホルダーは「運転が丁寧で親切なドライバーさんでした」の文言を入力してください。
• プレースホルダーは「運転が丁寧で親切なドライバーさんでした」
• 一番下に「評価する」ボタンを設置してください。(星タップがない場合はボタンを非活性化し、グレー表示してください。)

イメージとして送った画像はこちらです↓

イメージ画像

⚠️ 最初に生成された画面

この時点で出力されたコードだと下記のような画面になりました。
惜しいですね。内容はあっているのですが、ダイアログで出力されていません。

🔄 再度ダイアログ形式で依頼

そこで、再度ChatGPTにダイアログで出力してくれないか依頼をかけました。
このときも再度画像を添付しました。

🔽 ChatGPTに送った内容

コードの作成ありがとうございます。内容に問題はないのですが、
画像のようにこの画面をダイアログで表示させたいのですが、できますか？
お手数をおかけいたしますが、ご確認のほどよろしくお願いいたします。
添付した参考画像はこちら↓

イメージ画像

✅ 今度はダイアログでの表示に成功！

今度は期待通りのダイアログ形式で画面が作成されました。いい感じですね。

🛠 さらに細かな改善

コメント入力欄が TextField で出力されているため、文字数に制限があるように感じました。
そのため、以下の記事を参考にしながら、TextField から TextEditor に変更しました。
https://blog.code-candy.com/swiftui_texteditor/

また、会社名とコメント入力欄の間に 区切り線（Divider） を入れました。
以下を参考にしています
https://www.yururiwork.net/archives/429

最後に：ダイアログ前の画面を追加

これでレビュー画面ダイアログは出来上がっているのですが、画面遷移が分かりやすいようにダイアログ表示前の画面をchatGPTに依頼します。

🔽 ChatGPTに送った内容

ありがとうございます。だいぶいい感じです！
ダイアログ表示前の画面を作りたいと思っております。

ボタンを押したら、ドライバーの評価画面ダイアログが表示される。
「評価する」ボタンを押した後、ダイアログが消え、ダイアログ表示前の画面に遷移するようにしたいです。
お手数をおかけいたしますが、コードを書いていただけますと幸いです。

この結果、ボタンを押したら、ドライバーの評価画面ダイアログが表示される画面が作成されました。

💬 まとめ

ChatGPTを使えば、SwiftUI初心者でもアプリ画面のプロトタイプを作ることができると実感しました。

• 画像や構成をしっかり伝えることが大事
• 少しずつ改善を繰り返して、完成に近づけていく
• 完成後の理解のためにコードを読み解くフェーズも重要！

---

ここまで読んでくださりありがとうございました！