🎉

個人開発を加速させるChatGPTペアプロ実践ログ Flutterに入門してみました

2023/04/14に公開

ChatGPTとペアプロして、Flutter入門して個人開発してみました。めっちゃ便利だったので、実践ログを書いてみようと思います。

自己紹介

株式会社mofmofの岩井と申します!yubachiriです。
mofmofは受託開発の会社なんですが、なんやかんやあって水曜日の一部は個人開発をする制度があります。

今回はその時間を使って個人開発を行った&その中でChatGPTを活用したらめっちゃ良かったので、個人開発に取り組む・取り組みたい方向けに実践ログ&活用した雑感をお伝えしようと思いました。

(弊社メンバーの開発物とか開発ログ的な記事とかはここにまとまってるので、もし興味があれば覗いてみてください!)

https://indie-dev.mof-mof.co.jp/

開発したもの紹介

趣味の卓球のスコア記録アプリを作りました。Android版の内部リリースまで行い、実際使ってみてテスト中です。 ただ思ったより記録が大変だったのと、バウンドする箇所だけではデータが不足しているのでボツになりそうな気がしています。

試合一覧画面

アイテムをタップすると結果画面、右下のプラスボタンをタップするとプレイヤー名入力画面に遷移します。

プレイヤー名設定

試合の記録画面

タップした箇所にバウンドを記録でき、得点ボタンを長押しするとポイントを記録できます。

結果画面

試合の再生画面

そのポイントでどのようにバウンドしたかを再生できます。ポイント・ゲームの前後移動ができます。

水曜日と個人の時間とで好きに開発していましたが、計30時間くらいでFlutterなにも知らないところからAndroid版の内部リリースまでを行いました。

開発について

モチベーション

  • 知らない技術をキャッチアップしたい
  • ChatGPTを活用したらどうなるか試したい
  • 自分にとって実用的なアプリを作りたい

あたりのモチベーションで始めました。
開発開始時の状況は以下の通りです。

  • JavaScript, React Native, Swiftはわかる・アプリのリリースまでやったことがある
  • Flutter, Dartは1ミリもわからない(公式ドキュメント見ながら環境構築するところから始めました)
  • ChatGPTは盛り上がってるのは知ってたけどあまり活用したことはなかった

技術スタック

技術スタックとしては特に変わったことはしておらず、ほぼFlutterのみで開発しました。強いていえばsqfliteを追加したくらいでしょうか。

本当に有用なものなのかわからなかったので、最初はMVP的に自分で試せるところまでをスコープとして開発しました。
Firebaseなどを使い認証や永続化を実装してもよかったのですが、最速で実用できるところを目指したので端末内に保存しようと考えSQLiteを採用しました。

ChatGPTの活用

冗談半分で、「Flutterで卓球台のように長方形で中央が区切られているウィジェットを作成してください」的なことを投げたときの返答がこれでした。

これでたまげたのでこいつに聞きながら実装してみようと決意。

ペアプロのような形で、主に自分がナビゲーターを行い、ドライバーをChatGPTに任せるという方法で実装をしました。
ところどころ想定と異なる実装が行われた箇所のみ自分で手を入れる形です。

他にも、ドメインに関わらない汎用的なコードを生成してもらったり、

その中で出てきたDartのことを聞いてみたり

といったサポートを受けながらザクザク開発を進めていきました。超便利。ちなみにこの情報がどこのドキュメントで確認できるのかも聞けばURLをくれます。

ChatGPTペアプロ雑感

自分は普段知らない技術をキャッチアップする際はとりあえず手を動かしてみる派なので、そんな派閥の方はとにかくスピードが爆上がりで楽しいと思います。
逆に体系的に学んでから開発に入るタイプの方は合わないかもしれませんね。

よかったところ

「投げる粒度がなんであれ割と満足する返答が来る」に尽きます。
Google検索の場合は、検索対象の粒度やキーワード選定をミスると目当ての情報が見つけられなかったりしますよね。
実装のために必要な要素を考えて一つずつ情報収集をし、それを自分で組み合わせなければなりません。
ChatGPTでは、その分解→検索→構築までがチャットでの一往復で済むケースが大半です。まるで人間に依頼をしているかのような体験を得られます。

惜しかったところ

例えば先ほど例で挙げた「1秒長押しボタン」は継続1秒ではなく蓄積1秒で動作するようになっていました。0.5秒押す→離す→もう0.5秒押すと動作してしまう、という感じです。
人間であれば質疑を経て適切な実装を行うものと思いますが、GPTは与えられた情報のみを解釈して実装を行うため、曖昧さが直接バグにつながります。いや、人間もそうなんですが。
というわけで、コードをレビューする力は必須です。

あとdeprecatedなコードを提案されることもありました。コピペしたタイミングでエディタに指摘され気づいた感じです。これはさすがにドキュメントを見にいかないといけない部分でした。

まとめ

1ミリも知らない技術スタックであってもAIに頼ると検証アプリ程度はサクッと作れてしまうことがわかりました。
今回ChatGPTには以下のようなポイントで助けてもらいました。

  • 言語仕様について聞く
  • 要件を提示してコードを生成してもらう
  • コードとエラーメッセージを提示してバグを修正してもらう
  • コードと要件を提示して機能追加してもらう

他にも、要件定義からChatGPTにサポートしてもらったり、仕様の検討もやってもらうなど、もっと上流から活用する事例もあるようです。
このくらいの用途ならGPT-3.5でもほとんど問題なかったです。エンジニア2-3年目以降とかで、なんか知らない技術でアレ作ってみたいなあという方にとてもおすすめできるアクティビティだと思いました。
答えをホイホイ教えてくれちゃうので0から勉強中って方には毒な気がします。

あとmofmofのエンジニアのみなさんの個人開発プロダクトや個人開発記事などまとまっているので、もしよかったら見てみてください↓

https://indie-dev.mof-mof.co.jp/

Discussion