――気付いた時には、もう引き返せない……

初めまして。この秋からアイザック株式会社でエンジニアとして働いている入内島海斗と申します。
今回はアドベントカレンダー、12月10日を担当します。

12月10日、いいですよね。12月10日といえばあのノーベル賞第一回授賞式が行われた、記念すべき日です。それに三億円事件の発生日！　……なんだか急に記念日感が無くなってきましたね。このあたりにしておきましょう。
では、12月10日豆知識も程々に、本題へと移りたいと思います。

と、その前に

初めにお伝えしておきます。今回の記事は厳密にはChatGPTの技術系の記事とは言えないかもしれません。
本記事は、ChatGPTを意気揚々と使った結果痛い目を見た私の体験を元に、これからChatGPTを使ってプログラミングをしようとする全ての人たちに対し、「こうはなるな」と伝えるためのいわば反省会と、そこからリカバリーをした時の話です。
さながら反面教師のように、そしてここからChatGPTを始める人間にはこうはなるまいと思ってもらうための……或いは失敗談を元に笑ってもらうためのものとして、ゆる～く読むことを推奨します。
それでは改めて、本題をどうぞ。

ChatGPTで簡単にプログラミングしよう！

そう思ったのは、11月の末くらいでした。当時の私はChatGPTとの対話アプリを作りたいなと考えており、既にターミナルでは会話ができる状態でしたが、それでは何かが味気ない。せめてGUIアプリ化できないかな……と考えている時でした。
そんな時ふと、私は天啓を得たのです。

　――ChatGPTにGUIコードを書かせたらいいんじゃない！？

まさに神の一手だと感じました。奇しくも当時、GPT4-VとGPTsが発表されたことによりPythonのコーディングが更に便利になっていたところです。
特に、GPT4-Vを使うことで、適当なゴールの画像をアップロードするだけで、それに向けてコーディングを開始することができるのです。
これは使うしかない！　そう思って早速私はChatGPTとのペアプログラミングを開始しました。

しかし、GPT-4Vは多少触りこそしましたがこうやって使うのは初めてです。
何より、ちゃんと読み取ってそれをコードにするなんて、そんな事が本当にできるんでしょうか……？

お？

これは……

凄い！！　どんどん作られていく！！！

ChatGPTと会話し、それを元に更にコードを書いてもらいます。
簡単に作ってほしかったのでTkinterというGUIライブラリを用いて作ってもらいます。間違えていたらそれを修正し、それを繰り返していき……

遂にできました！！！

私がやっていたのは時々指示したり、エラー文が出たらそれを教えながら修正を繰り返させただけ。
これでChatGPT生活も安泰です。いやー、本当に凄いなぁChatGPTは。
ここに例えば音声入力とか、ああ音声出力も加えたいですね。いやまずそれより、GPT3.5とGPT4を切り替えるシステムでしょうか？　或いはログ保存や呼び出し機能の実装とか……いやー、夢が膨らみます。
さーて、このプログラムを見直して、実装するならどこ、か、ら……

気付いた時には、もう引き返せない……

400行にもなるTkinterの描画コード。
クラス化されたものとそうでないもの。
直に書きこまれた関数、変数
そもそもChatGPTが書いたことによる、自分ですら把握しきれていないアルゴリズムの数々………………

その日、関東某所で悲鳴が一つあがりました。

～END～

……

…………

………………

……………………

嘆いていても仕方がない

ので、ここからどうにかしようと画策したのが始まりです。
結論から先に言いますと、この1ファイルプログラムに対し、私は死ぬ気でリファクタリングを行いました。
当然ですが400行のコードなんて、それがライブラリでもない限り存在してはいけない生き物です。生き物ではないけど。
ましてやそれが一個のメインプログラムであれば、新しい機能実装時に面倒であるとか、予期しないエラーが発生する可能性があるとかそれ以前の問題として、「三日経ったら内容を忘れる」のですから。

……以前の趣味でプログラミングをしていた私であれば、これをスルーしていたかもしれません。このコードは一応動きますし、それに何よりこれらを改造するというのは非常に手間と時間がかかりますから。

けれど、今の私は仮にもアイザックでエンジニア職として働く身です。

私が入社したアイザック株式会社は、代表の方がRubyのコミッターの一人にして自作プログラミング言語を作っているハイパーエンジニア。
先輩方も皆さん技術力がとても高い人たちが大勢集まっており、（少なくとも趣味でしかなかった私からすれば）右も左も優秀なITエンジニアたちで溢れています。
私自身、「エンジニア志望ならここは最高の環境だよ」という言葉を採用された時に聞いた覚えがあるほど。そんな環境に入社しておいて……

情けないコードは、ちょっと見せられない！！

まずは、改めてChatGPTに聞き直しました。

ひとまずクラス設計から見直します。
現在のコードは400行。ここから大まかに分割を開始していきます。

「確かこういうやつあったよね？」と大まかに尋ねると、それを明確に言語化して返してくれる、こういったところはやはり言語モデルとしての強みでしょうか。ぼんやり浮かんでいただけの完成図が、ChatGPTというレンズを通すことで焦点を結び始めます。

頭の中にある情報を出力し、それをChatGPTに次々と纏めてもらう。そうしていくと、次第に設計図が自分の中で明確になっていきます。そして、それを図示するのもChatGPTの役目ですね。

もちろんこれに盲目的に従うわけではなく、自分の方でも改良を加えていきます。たとえば、json_managerやimage_managerはbackend/utils下に入れる事でより可読性を高めたり、或いはmiddlewareを増やすことで情報伝達を出来る限りスムーズに分かりやすく書き直したり。
アイザックに来て、先輩エンジニアのコードや構造を見て学んできたことを活かしながら、手直しを加えていきます。「あ！　ここあの機能の時にやったところだ！」という風に。

そうして、ChatGPTでの開発期間が僅か三日。
リファクタリングに軽く一週間ほどかけたところで…………

プログラムの構造化、完了です

400行の1つのファイルはこうして、ディレクトリ数5個、ファイル数22個に生まれ変わりました。
こうして考えていると、むしろよくもまあこれだけのものを1つや2つのファイルに収めようとしていたなと思います。無理ですって。
ChatGPTに作ってもらっていた時は自分ではあまり考えずにのんびり三日でしたが、リファクタリングでは仕事が終わってから全力で取りかかってようやく一週間でした。作業量が違います。

そしてこうして整頓されたファイルを見ていると、どこに何があるのかを把握しやすく、また新規に機能を追加する時にどれほど楽かを知りました。
現在ではこの整理された構造を元に、面白いと感じる開発を進めています。いつか理想のGUIアプリを目指して。もう少しだけ、趣味プログラミングは続きそうです。

さて、今回の反省点は……

どう考えても、一つのファイルでやろうとしたことですね。
そもそも最初の時点でファイルを分けたり、そもそも三層構造にするといった考えがまるでありませんでした。だからこそここまで苦労することになったのです。
と、なれば。これからはChatGPTでペアプログラミングをする際にはそうした部分もしっかりと伝えていく必要がありますね。特に、ディレクトリ構造やレイヤー形式もはっきりと理解していたChatGPTならば、その部分を明確に伝えることで、更に素晴らしいコードが生まれると確信しています。
ChatGPT、やるじゃん……！　となりつつ、これを使いこなすにはしっかりと考えて使う必要がある……！　と再認識できました。
まだまだアイザックの先輩エンジニアさんたちには敵うはずもありませんが、少しは成長できたんですかね……？

さて、この記事をここまで読んでくださった皆さんへ！

ChatGPTでプログラミングする時は、構造をはっきりさせよう！

さもないと、地獄を見るぞ！！！

～Fin～

さて、ここからは少し余談のお話です。
私も所属しているアイザック株式会社では、一緒に「世の中を実験する」仲間を募集しています。
世の中を実験するって、なんだかとても素敵な響きですよね。「百聞は一見に如かず」と言いますが、アイザックでは「100回の議論より、1回の実験」という考えのもと、様々な事業が展開されています。
チャレンジ精神に溢れる人、なんだか面白そうな事言ってるじゃないかと思った人、或いは……どんなきっかけであっても、気になった人は是非以下のページを覗いてみたり、フォームからエントリーしてみてください。

それでは、またいつか。