Zenn
📖

ChatGPTだけでFlutterアプリ開発してみる｜1日目

に公開
Flutter
勉強
ChatGPT
生成 AI
idea

はじめに

Flutterでアプリを作りたいと思っているんです。
環境は整備しました。
でもいつも途中で挫折してました。

理由はだいたい決まっていて、

「なんかWidgetの入れ子が深すぎて、何がどこにあるかわからん！」

というパターン。

コードを書く系の生成AIって今はたくさんあるけど、
どれに課金すればいいのかもいまいち決めきれず。
そこで今回は、とりあえず課金しているChatGPTで、Flutterアプリをどこまで作れるのか？を試してみながらやってみることにしました。

どこがやりやすくて、どこがやりづらいのか。
そのあたりも含めて知ってみたく、ChatGPTで挑戦してみました。

作りたいものイメージ

今回作りたいのは、「買い物リストアプリ」🛍です。
といっても、ただのメモ帳ではなく、以下のような機能を目指しています。

  • 一般的なリストの操作

    • アイテムの追加／削除
    • チェック✅をつけて「買った」状態にできる
    • 見た目もできればわかりやすく（取り消し線や色分けなど）

  • 他人とリストを共有したい

    • 家族やパートナーと買い物メモをリアルタイムで共有できたら便利
    • Firestore連携などでの実装を目指す

まずはローカル環境でしっかり動くものをChatGPTと一緒に作ってみて、
その後、共有機能などを足していく予定です。

環境

  • Windows
  • VSCode
  • ChatGPT 4o

ChatGPTにお願いしてみた

まずは基本のリスト画面をChatGPTにお願いしてみました。

「Flutterで買い物リストの画面を作って」と聞くと、ListView.builderを使ったコードがちゃんと返ってきました。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

プログラム初心者にはさすがに難しいかもだけど、「このコードはこういう意味だよ」みたいに丁寧に教えてくれるのがありがたいです。

そのままコピペしたら動いた

もちろん、コードをコピペしてすぐ動か…動いた。
ただ、

  • itemsってどこで定義するの？
  • Scaffoldがないと動かない…
  • 状態管理どうする？

と、いろいろ抜けてる部分は多いです。
でも、エラー内容をそのまま貼って聞けば、ChatGPTががんばって修正コードを返してくれます。
えらいえらい（適当）。

1日目の進捗まとめ

試行錯誤しつつ、1日目でここまで作れました👇

機能 実装状況 補足
買い物リストの表示 ✅ 完了 Provider経由で表示
アイテムの追加（＋ボタン） ✅ 完了 ダイアログ入力／UUID付き
チェック切り替え ✅ 完了 チェック状態も保存可能
スワイプで削除（Undo付き） ✅ 完了 SnackBarで「元に戻す」可能
永続保存（SharedPreferences） ✅ 完了 起動時に自動読み込み
Providerによる状態管理 ✅ 完了 ChangeNotifierで整理済み
項目ごとの罫線 ✅ 完了 ListView.separatedで表示
チェック済みに取り消し線＋グレー文字 ✅ 完了 TextStyle 条件指定
このブログ執筆 作業中 テンションの修正は必要

コードを書くスピードも、調べ物の時間も、かなり短縮されました。

ChatGPTでやりやすかったところ／やりづらかったところ

🔸やりやすかったところ

  • 進捗をこまめにまとめてくれる（「今ここまでできましたね」みたいな整理が地味に助かる）
  • 次にやるべき実装を自然に提案してくれる（「追加ボタンをつけましょうか？」など）
  • 何それ？って聞いたらすぐに回答もらえる

→ 自分の考えがふわっとしてても、適当に軌道修正してくれます。

🔸やりづらかったところ

  • 「この部分を書き換えてください」って言われても、どのファイルのどの行のことを指してるのか分かりにくい
    → コードがちょっと長くなると、「どこやねん」ってなるので、もう少し具体的に指してほしいな〜と思う場面はありました。

次回

2日目は、

  • UIを少し整える（色・フォント）
  • リストの並び順を変える
  • カテゴリでグループ分けする
  • その先でFirestoreなどによる共有機能の実装

などを試してみようかなと考え中です。
「ここまでできたけど、ここが難しかった」みたいな話も次回以降で書いていきます。

↑ChatGPTさんが勝手に書いたけど、そうなの？がんばれよ！

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

Discussion