ChatGPTを活用し、開発効率を劇的に向上させる方法

イントロダクション

ChatGPTの登場は私たちに大きな衝撃を与えました。

SNSでもChatGPTをはじめとしてAIの話題で持ちきりですが、実際の業務でどんなふうに活用して行けば便利なのかは意外と語られることが少ない気がしています。

この記事では、僕が開発を進めている中で良いと思ったChatGPTの活用法や実践的なテクニックを紹介します。
具体的には、コード生成やコード理解などの開発プロセスを効率化するための方法を説明します。これらのテクニックを活用すれば、開発者は短時間でより高品質なソフトウェアを開発できるようになります。

この記事を通じて、開発者の皆さんがChatGPTの活用法を理解し、プロジェクトの効率と品質を向上させる手助けとなることを願っています。

注意点

実際にChatGPTでコーディングをする上でいくつか注意点があります。

• 機密情報は入力しない:
  • 例えば、SamsungではChatGPTに機密情報を流出させて問題になっていました。機密情報は絶対に入力しないようにしましょう。
  • サムスン、機密情報をChatGPTにリークして大問題に
• 情報が古い可能性がある:
  • ChatGPTの知識は2021年9月までのものです。それ以降の技術やフレームワークのアップデートに関しては、適切な情報を提供できないことがあります。
• 同じ質問をしても回答が異なることがある:
  • ChatGPTは過去の質問を覚えて回答してくれるので同じ質問をしても毎回同じ回答をするわけではありません。
• コードが間違っている可能性がある:
  • ChatGPTが生成してくれたコードは間違っている可能性があります。コードを理解せずに丸ごとコピペすることはやめましょう。

ChatGPTによるコード生成

ここからはChatGPTでコードを生成する具体的なやり方を紹介していきます。

実装ができることはわかっているけどどうやれば良いかが曖昧なことを聞く

プロンプト

htmlで文字数が長い場合...で省略するCSSの書き方を教えてください

こういった実装は、今まではネットで調べるか別の箇所で書かれているコードを探したりしていましたが、ChatGPTがパッと答えてくれるので開発効率が上がりました。

サンプルコードを作成してもらう

プロンプト

Reactでアコーディオンを実装するコードを書いてください。

参考となるコードを丸々作成してもらっています。
体感的にはこのくらいのちょっとしたコンポーネントだったら良い感じに生成してくれますが、少し複雑なコンポーネントになるとうまく動作しなかったりします。
そういう時は機能毎に実装してもらって手動でマージしたりしています。

処理を書いてもらう

プロンプト

JSでオブジェクトの配列から特定のオブジェクトが存在するかを判定する処理を教えてください。

こういったコードもよく生成してもらっています。
たまに処理が冗長だったりわかりずらかったりすることもあるので、その時は「もっと短くできますか？」や「もっと簡単にできますか？」と追加で質問すると良い感じに書き直してくれたりします。

パッケージの設定方法を聞く

プロンプト

css modulesでclass名がランダムな文字列になってしまうのをやめることはできますか？

こういった設定は公式ドキュメントを見るのが一番間違いないですが、公式ドキュメントを見る前に先に聞いておくことで公式ドキュメント内のどこを探れば良いかの当たりがついて探す手間が省けます。
たまに平気で嘘をつかれるので注意が必要です。

警告が出ている箇所を修正してもらう

プロンプト

type areaDetail = {
  id: number;
  name: string;
  display: string;
};

  const { areaDetailList, setAreaDetailList } = useState<areaDetail[]>([]);


上記で発生する型エラーを修正してください

これもかなりに便利です。
TypeScriptで実装をしているとたまに型関連でよくわからない警告が出たりしますが、どこを修正したら良いか教えてくれた上で修正案を書いてくれます。

コード理解と学習や相談

コードを書いてもらうだけでなく時には質問や相談をしたりもします。

コードの意味を聞く

プロンプト

                  currentPref.areas?.some((area) => area.id === areaGroup.id) ??
                  false

上記はどういうコードか説明してください。

コードの意味を聞いたら思っていた以上に丁寧に解説してくれます。
?や??など普通の検索だと探しづらいものも簡単に調べられるのでありがたいです。

理解が曖昧なことを教えてもらう

プロンプト

inputタグとbuttonタグの違いを教えてください

こういったことも手軽に聞けて便利です。

変数名や関数名の相談

プロンプト

抽出する処理の関数名には何が適切でしょうか？

関数名や変数名に迷った時にChatGPTに相談したりもしています。

まとめ・結論

ChatGPTを活用してコーディングをするようになって、明らかに生産性が向上しました。
また、ChatGPTを使っていく中でChatGPTの得意なことと苦手なことも少しずつ見えてきました。
この先の時代、エンジニアである限りAIの活用は避けては通れないところまできていると思っています。
コーディングと同じでやっていくうちに段々とChatGPTの使い所も見えてくるので、まだChatGPTをさわれてない人や活用の仕方がわからない人は、この記事で紹介したテクニックを参考にしながらChatGPTに触れていってもらえると嬉しいです。