はじめに
Web制作の現場において、「いつ・どのように活用するのか」が実務上の現実的なテーマになっています。
この記事では、2025年6月時点で、コーディングする際にどのタイミングでAIを活用しているのか、事例も含めて整理してみました。
【使用AI】ChatGPT（GPT-4o）
【構築環境】Visual Studio Code（VS Code）
HTMLでAIを活用するタイミング
- タグの使い方が適切かどうかを確認
→ 検索エンジンが正しく理解できる構造になっているか確認するため。
- クラス名の生成
→ 一定のルールは設けているものの、迷ったときに活用。
CSSでAIを活用するタイミング
- 参考サイトなどで初めて見たプロパティや値の書き方を見たときに詳細を確認
→ 以前は、さらに参考サイトを検索していた。
- 一見簡単にできそうなデザインだけど実は難しいケース
→ デザインの変更ができない場合で、以前はデザイナーに頭を下げて調整してもらっていた。
JavaScriptでAIを活用するタイミング
- コンソールのエラーを共有して原因を確認
- 過去のコードをアレンジしたいとき
- 参考サイトどおりに記述したものの、動作しないとき
- jQueryのソースをJavaScriptで記述したいとき
- 既存のプラグインではデザインを再現できず、自作する必要があるとき
PHPでAIを活用するタイミング
- 新しくプログラムを作るとき
- WordPressをカスタマイズするときにWeb上で参考になる記事等がみつからないとき
最近AIを活用した具体的な事例（一部）
- ECサイトにおける検索システムの構築
→ JavaScriptとSmarty（PHP）を併せたコードを作成。
- 特定のフォントのサイズ調整について確認（CSS）
→ 文字サイズがまちまちになる現象について確認したものの、現時点では解決に至っていません。
- aタグが使えない条件下でaタグを使用したときのように見せたい（JavaScript）
- ページ遷移時に特定のタブを開いた状態にし、かつアンカーリンクで移動、さらに同一ページ内のアンカーリンクでも同様に特定タブを開いた状態に保つようにする（JavaScript）
- 商品リストのソート機能（新着・価格順）（JavaScript）
- JavaScriptで、addEventlistener resizeを使わずにウィンドウサイズの変更に対応（JavaScript）
- WordPressのカスタムポスト、カスタムフィールドの検索システム構築（PHP）
まとめ
こうして振り返ってみると、思っていた以上にAIを活用していることに気づかされました。
同時に、作業時間の短縮につながっていることも明確になりました。
とはいえ、すべての課題がAIで解決できるわけではないこともまた事実なので、自力でコーディングスキルを磨くことも引き続き重要だと感じています。
補足
Visual Studio Code（VS Code）にGitHub Copilot（Freeプラン）の拡張機能を導入してみましたが、提案されるコードの精度に物足りなさを感じたため、現在は機能をオフにしています。