😉

GPT-4を使って2進数変換クイズのスマホアプリを1時間で作ってみた

2023/03/22に公開

概要

掲題の事柄における手順の深化と所感

動機

  • もともと個人用でちょっとしたスマホアプリを作ったりはもともとしていたが、多忙のため最近はできてなかった
  • ChatGPT を使ってアプリをサクッと実装できたという報告が相次ぐ
  • 💡 じゃあ自分もやってみよう

アプリの概要

0から255までの数字(10進数)をランダムに表示て、それに対応する2進数を入力するという単純なものです。
これに関してはこの記事アップ時点の実物を見てもらった方が早いと思うので以下に投稿します。

アプリができるまで

前章の仕様のアプリが完成するまでにGPT4にポストしたメッセージをリストアップしていきます。
(この章では背景色が黄色の部分がGPT4にポストしたメッセージに相当します)

Flutter とどちらにするか迷いましたが一旦 React Native で作ることにしました。
(今までは Swift で実装してたのでどちらの知識もありません)

この辺までの手順は以下の記事にまとめてあります。

https://zenn.dev/k0kishima/articles/44395834561481

続いてアプリを作っていきます。

この1つのポストで、レイアウトまで一気に作ってくれました。

この辺のレスポンスは一定ボリュームのコードを含むので途中で途切れたりしましたが、そういう時は "continue" と入力すると続きを送ってくれます(後述)。

続けて改善していきます。

モーダルの文言はこちらで変えたりはしましたが、それ以外自分でコード書くことなくここまであっさりできました。

あとは実際に触ってみて改善したい点を伝えながら数往復チャットして、冒頭の形になりました。

ここまでの所要時間は記事のタイトルにあるように1時間程度だったと思います。
作成したコードは以下のアップしました。

https://github.com/k0kishima/decimal2binary

得られた知見

受信内容が途切れた場合は continue

既出ですが、ChatGPTからの返答が長すぎると途中で内容が途切れてしまうので、そういう場合は "continue" と送信したら続きを送ってくれます。

コードが長くなってきたら差分だけ送ってもらう

コードのボリュームが一定になると、"continue" で再送してもらった時に書式が崩れることがありました。

こういう事象が起こった際は、「差分だけ出して」と伝えると視認性が高まりました。

所感

今のところ強力な味方でしかないと思ってます。

今まで目を皿のようにして探していた細かいバグを一瞬で解決してくれるし、検索エンジンでドキュメントや技術記事を探して何個もタブを開きながら行っていた情報収集もチャットでインタラクティブにより効率よく行えるようになりました。
結果として開発のストレスが激減してます。

従来の数倍の速度で開発できるように実際なってますし、これからAIの進歩でもっとその度合いも大きくなる思います。

プログラマ(ここでは特にWEBエンジニア)が職を奪われるとかネガティブな意見を発信してる人が散見されますが、個人的にはそこまで深刻に考えてないです。
AIにWEB開発をさせるならパートナーとしてはWEBエンジニアが相応しいと思ってます。開発の知識や経験があればあるほどAIに判断材料として与えられる情報の総量も相対的に多いはずなので、AIを的確に使いこなせるからです。

この辺は時間あったら別のところで書こうかなと思います。

Discussion