お世話になっております。ファンリピート代表の竹村です。
当社では、ITコンサルティングの事業を行っておりまして、技術調査や勉強の背景から、今回、AI(GPT-4)を活用した生産性の向上について調査しました。
結論として、システム開発のためのプログラミングの工程は、かなり生産性が上がっていくと感じます。現状でも、PoCなどに使うシステムをコンサルタント1名xGPT-4を駆使したSE1〜2名といった少数精鋭の座組でプロジェクトを推進していくことも可能なのではないかと感じました。
GPT-4(ChatGPT)との一連のやり取りをもとにまとめましたので、ぜひ一度読んでみてください。
完成したアプリのスクリーン録画:
GPT-4(ChatGPT)でのプログラミング:概要
- ブラウザのスクリーンショットを撮影して共有することが業務でよく発生する、それにあたってChromeの拡張機能を使うことが多い
- GPT-4(ChatGPT)を活用して、「Googleドライブにスクリーンショットを自動保存」するChrome拡張機能の開発に挑戦してみる
- 前提として、筆者はNode.jsやJavascriptなどの知見はあるが、Chrome拡張機能の開発経験は一切ない
- 2〜3人日(16〜24時間)ほどかかる見積もりを立てたので、10倍の生産性を目標値に設定し、約2時間程度の工数を目標に進める
GPT-4(ChatGPT)でのプログラミング:実践
まず、下記のとおりプロンプトを投げてみる。
スクリーンショットを撮影して保存し、Web公開できるChrome拡張機能のソースコードを書いてください。

こちらのプロンプトへの出力により、Chrome拡張機能を動かすためのファイル構成がなんとなくイメージできた。

Web公開が難しいとのことだったので、GoogleDriveに変えてみる。
Web 公開はGoogleDriveへのアップロードと公開で考えてみてください。

Google API と連携して機能実装となるようで、そちらについても把握できた。
全体像を改めて説明してほしかったので、下記のようにプロンプトを入力する。
それぞれをファイルにまとめて整理して、Chrome拡張機能にアップロードするためのディレクトリ構成を教えてください。

なるほど、拡張機能をChromeで動かすために必要な要素がよく理解できた。
改めてソースコードを揃えたかったので、下記のようにプロンプトを入力する。
それぞれのファイルのソースコードを改めて教えてください。

これでAIが生成したコードをローカルの環境に構築できた。
Chrome上での拡張機能のインストール(ローカルでの動作)方法については、Googleで検索した記事を見て対応して、実際に動かしてみた。
実際に拡張機能のアイコンは表示させることができたが、うまく動作しない。こちらも原因を聞いてみる。
実際にChromeにインストールして「Capture Screenshot」を押しても何も動かないです。直してください。

上記を反映しても修正がされなかったので、下記の通り聞いてみる。
Google Driveにアップロードされません。なぜですか?

ここから、5〜6ラリーほど修正依頼を投げたが同じようなプロンプトのため省略。
その後、Chromeの検証環境にてGoogle認証関連のエラーが表示されるようになったため、そちらのエラーメッセージと共に修正依頼をプロンプトで投げていく。
OAuth2 request failed: Service responded with error: ‘bad client id: と出てきます。

Google Drive APIが必要とのことだったので、手順を聞くプロンプトを投げてみる。
Google Drive APIを有効化する手順を教えてください。

Google認証に関連するエラーが出なくなり、代わりに他のエラーが出てきたので、こちらを解決するためのプロンプトを投げていく。
「Error handling response: TypeError: Cannot read properties of undefined (reading ‘success’)」と「Unchecked runtime.lastError: The message port closed before a response was received.」のエラーが出ます。

これまでおよそ20〜25ラリーほどして修正を行ってきて、ようやく期待通りの動作をするようになった。
完成したアプリのスクリーン録画:
ここまでおおよそ1時間程度で構築ができた。
あとは微調整として、ファイル名がすべて同じになっていたので、日時を入れて区別しやすくしたり。
google driveに保存されるファイル名に日時や秒数の数値を入れて重複しないようにしてください。

デフォルトではルートフォルダ(マイドライブ)に入ってしまっていたので、特定のフォルダを作成して保存させるようにしたり。
ありがとうございます。動きました。GoogleDriveのフォルダをマイドライブではなく、適当なフォルダを作成してそちらに保存するようにできますか?

ありがとうございます。動きました。毎回同じ名前のフォルダが生成されてしまうので、一度つくったフォルダがあればそちらに保存するようにできますか?

こうやって初めてのChrome拡張機能の開発を終えた。

ここまでかかった時間は約2時間程度で、当初の目標を達成できた。
プロンプトの生成に習熟したら、同じような新しい領域でも更に速く進めることができそうだと感じる。
GPT-4(ChatGPT)でのプログラミング:まとめ
- 当初の目標である、見積の2〜3人日から実績で2時間程度へと、稼働工数を短縮できた
- プログラミング、新しい実装への理解速度が大きく上がった。こういう風に実装するのか、こういう構成でディレクトリをつくるのか。といったことが瞬時に確認できるため、非常に生産性が高まった
- プログラミングが将来不要になるというよりも、一人あたりの生産性が高いエンジニアが増えて、IT化がさらに進んでいくのではないかと感じる。
- 当社でもGPT-4を活用した自社プロダクト、クライアントへのインテグレーションの支援を行っている最中で、今回の調査でどのようにGPT-4(ChatGPT)を、事業や業務に組み込んでいくかのイメージができた。
当社では、ノーコード/ローコードを活用したシステム開発プロジェクトの支援を行っております。
上記のツールに限らず、お客様のニーズに合わせて、最先端の技術を駆使してコスト削減やパフォーマンスの向上を徹底して行っております。
そのため、今後もGPT-4を活用した事業/業務改善の企画・提案を積極的に行って参ります。
ITコンサルタント・プロジェクトマネージャー、システムエンジニアと採用を随時進めておりますので、最先端技術を活用してビジネスの現場で成果を上げたい方はぜひ、当社の採用担当までご連絡ください。