1：命名規則を統一し、意味のある名前をつける

ChatGPTが生成したコードを見ると、ときどきよくわからない変数名や関数名が混在していることがあります。

• あるある: myFunction()やtempVarなど、とりあえずは動くけど後から見て「これ何してたっけ？」となりがち。
• 対策: あらかじめ「プロジェクトの命名規則を守ってね」とプロンプトで指示して生成してもらうか、生成後に自分でリネームしましょう。名前を整理するだけで、読みやすさが一気にアップします。

2：なぜこの処理が必要か、コメントやドキュメンテーションで明示する

ChatGPTはコードの意図までは説明してくれません。後から読み返したとき、「なんでこの処理を入れたんだっけ？」と悩むことも。

• あるある: プロジェクト特有の仕様で仕方なく変な処理をしているのに、無言で書かれているとわけがわからない。
• 対策: 「何のためにこのコードを書いたか」を一言添えておきましょう。単なるコメントでも十分役立ちますし、説明的な変数名を使うのも効果的です。

3：生成したらすぐ動かしてエラーをチェック＆コードレビュー

ChatGPTは便利ですが、完璧ではありません。とくに要件が複雑になるほど、ところどころ間違いが混ざる可能性も高くなります。

• あるある: APIのエンドポイントが古いまま、ライブラリのバージョンが違う…なんてケース。
• 対策: コードを生成したら即ビルド＆実行して、ログを確認しましょう。余裕があればチームメンバーにレビューを依頼して、バグを早い段階で潰しておくのが理想です。

4：リファクタリングを惜しまない

ChatGPTが吐き出すコードは、あっさり動作する一方で、冗長だったりちょっと複雑すぎたりすることもあります。

• あるある: 同じ処理が重複していたり、やたらとネストが深い条件分岐が続く…など。
• 対策: 重複コードをまとめる、不要な関数を削除する、ロジックをシンプルに組み直すなど、リファクタリングに手間をかけましょう。自動生成された部分こそ、人間の目と手で整えるのがポイント。

5：プロンプト設計で「最初から保守しやすい形」を目指す

どうせなら、初めから「メンテしやすいコード」を出してもらいたいですよね。

• あるある: 指示がざっくりすぎて、結局無難なコードが返ってきてしまう。
• 対策: 「React + TypeScriptで、ESLintとPrettierの規約に沿うように書いてください」「変数名は○○規則で付けてね」といった具体的なプロンプトを用意しましょう。そうすることで、よりプロジェクトに合ったコードが得やすくなります。

まとめ

ChatGPTが生成するコードは、使い方次第で大幅に生産性を高められる一方、「後でメンテが面倒」という落とし穴も潜んでいます。そこで、

1. 意味の通る命名をする
2. 目的や理由をコメントで明確化する
3. 生成したらすぐ動作確認＆レビュー
4. 積極的にリファクタリングする
5. プロンプトでコードの品質を高める

この5つを意識すると、あとあと苦労せずに開発を続けられます。ChatGPTを自分の味方にするためにも、ぜひこのコツを試してみてください！

次のステップへ：あなたの可能性を広げる

「HTMLコーディングやプログラミングを覚えたい・・・でも何をすればいいのかわからない」

そんな方におすすめなのが、コーチングです。

ご自身のお悩みに合わせた、トレーニング内容のコーチングサービスを提供しております。
HTMLやCSS、プログラミングを初歩から学びたいというニーズにも対応しております。

小さな目標を達成しながらコツコツを積み上げていくので、難しいことはありません。○○みたいに仕事ができるようになりたい。ウェブデザイナーになってみたいなどなど、あなたが思う未来の自分になれたらどおですか？

今すぐお問い合わせください！
デジタルスキルアップサポート