こんにちは、DIVXエンジニアの小林です。

本記事では、UI/UX中心のエンジニアが、Claude CodeとGitHub Copilotを活用してバックエンドやDB設計まで技術領域を拡張した経験をもとに、AIコーディング支援ツールの実践的な使い方を紹介します。

こんな方におすすめ

• 初学者・経験者問わず、AIコーディング支援をこれから導入したい方

• 「AIでコードが書けるって聞くけど、実際どう使うの?」と疑問に思っている方

• チームにAI導入を検討していて、実際の活用例を知りたい方

この記事で分かること

• Claude Code / GitHub Copilotの使い分け基準

• AIとの効果的なコミュニケーション方法（3ステップのプロンプト設計）

• 実際に使ってみて分かった注意点とコツ

「AIコーディング支援を使ってみたいけど、どう活用すればいいか分からない」 「ChatGPTは使っているけど、もっと効率的な方法を知りたい」

そんな方に向けて、実体験をもとにした具体的な活用方法をお伝えします。

入社当初、私のスキルセットはUI/UX設計が中心でした。プロジェクトでは以下のような場面に直面することが増えていきました。

• デザインを作っても、実装に落とし込むにはフロント〜バックエンドの理解が必要

• 画面設計をする際、DB構造やAPI設計の知識が求められる

• チームの状況的に、デザインだけでなく実装も担当する必要がある

当時の私の知識レベルを正直に言うと、ターミナルが何なのか分からない、ディレクトリとフォルダの関係が理解できていない、マイグレーションエラーを見て「ファイルを壊してしまった」と慌てる、といった状態でした。

この状態から、短期間でフルスタック的な対応力を身につける必要に迫られていました。

最初は独学や先輩への質問で学んでいましたが、いくつかの壁にぶつかりました

• 基礎から体系的に学ぶには時間が足りない

• 先輩に質問したいけど、何度も声をかけるのは忍びない

• フロント・バックエンド・DBと、複数の領域を同時に学ぶ必要がある

• 分からないことが多すぎて、何から質問すればいいか分からない

「もっと効率的に学べる方法はないだろうか?」そう考えていた時に、AIコーディング支援ツールの存在を教えてもらいました。

当初はChatGPTを使用していましたが、以下の2つのツールを導入してから生産性が大きく向上しました

• GitHub Copilot

• Claude Code

これらの共通点は「ファイルの構造・内容を理解して自動でコーディングをしてくれる」という点です。

それぞれのツールには明確な得意領域があり、目的に応じて使い分けることで学習効果と生産性がぐんと向上しました。

ターミナルから操作するAIコーディングツールです。プロジェクト全体のファイル構造を把握し、複数のファイルを横断して実装を進めてくれます。

適した作業

• 複数ファイルにまたがる実装

• 既存コードのリファクタリング

• 仕様から実装への落とし込み

特徴
抽象的な指示でも文脈を理解して実装してくれる自走性の高さが特徴です。一方で、方向性を誤った場合の修正コストが大きく、初学者段階では間違いに気づきにくいという注意点があります。

IDE（Visual Studio Codeなどのプログラムを作るための機能が1つにまとまったソフト）に統合されたAIコーディングアシスタントです。

コードを書いている最中に自動で候補を提示してくれる「インライン補完」と、チャット形式で質問できる「Copilot Chat」の2つの機能があります。 

適した作業

• 単一ファイル内の実装

• 既存パターンの踏襲

• 学習目的での段階的実装

特徴
細かいタスクに強く、具体的な指示によって精度の高い補完が得られます。実装の各ステップを確認しながら進められるため、学習効果が高いのが利点です。

知識がないうちは、タスクを細分化して一つずつ理解を深められるGitHub Copilotの方が学習に適しています。ある程度の理解ができてから、Claude Codeで効率を追求するのがおすすめです。

AIコーディング支援の精度を上げ、かつ自己学習に繋げるために、以下の3ステップを意識しています。

人間同士のコミュニケーションと同様、AIとも認識の擦り合わせが必要です。

例えば、「food」というテーブルから「fruit」というカラムを取り出してフロントの「果物」という表に表示したい場合を考えます。

「fruitを果物に表示して」

この指示では、以下のような曖昧さが残ります

• 「food」テーブル以外にも「fruit」カラムがあるかもしれない

• 「果物」という名前の表が複数存在するかもしれない

プロンプト例:

現在のDB構造を確認します。

1.foodテーブルにはどのようなカラムがありますか?

2.fruitカラムのデータ型と制約を教えてください

3.関連するテーブルはありますか?

このように認識を細かく合わせることで、後の実装ミスを防ぎます。こちら側に認識のミスがあった場合も、この段階で気づくことができます。

認識を擦り合わせたら、「AIに言語を合わせて実装を依頼する」ことが重要です。

1. ファイルパス・行番号の明示

2. 期待する動作の具体化

3. エッジケースの指定

views/items/index.html.erbの100〜102行目にある『果物』テーブルに、

foodテーブルのfruitカラムの内容を表示したいです。

【仕様】

-表示形式:プレーンテキスト

-NULLの場合:「—」を表示

-XSS対策を含めること

【確認事項】

-既存のヘルパーメソッドがあれば利用

-テーブルの既存スタイルを踏襲

抽象的な質問でもそれなりに返してくれますが、確実に実装するためには具体的なファイル名や変数名を書くことが効果的です。

実装が完了したら、必ず内容を理解するステップを踏みます。

ここまで出てきた「テーブル」「カラム」「フロント」といった用語について、経験者の方はすんなり読み進められたと思いますが、未経験の場合はこれらの意味がわからないはずです。

同時に、経験者の立場では当たり前に使用している用語を説明するのは意外と難しいものです。これらを一つ一つ調べたり聞いたりしていたらキリがありません。

ここで活きるのが、AIには心置きなく質問できるという点です。自分の理解に落とし込めるまで徹底的に質問しましょう。

「○○と△△という用語について、エンジニアリング経験の浅い人でもわかるように教えてください。」

「この実装で○○メソッドを使った理由を教えてください。

△△メソッドとの違いは何ですか?」

「このコードの処理フローを、ステップごとに説明してください」

「より良い実装方法はありますか?あれば理由も教えてください」

正直、このステップは実装には直接繋がりません。しかし、知らないことをそのままにせず学習することが、AIとより具体的なコミュニケーションを取るために必要になるため、工程に含めています。

1年程で以下の技術領域をカバーできるようになりました。

• フロントエンド実装（HTML・CSS・JavaScript）

• バックエンド実装（Ruby on Rails・PHP）

• DB設計・クエリ最適化

• API設計の基礎

業務面での変化

• デザイン作成から実装まで一気通貫で担当できるようになった

• 言語やフレームワークが異なる案件にも対応できるようになった

• エラーが出た時の原因特定や解決が、以前より早くできるようになった

学習面での変化

• 先輩に質問する前に、AIで自分なりに調べて整理できるようになった

• 分からない用語や概念を、遠慮なくとことん質問できる環境ができた

• 実装しながら学ぶサイクルが回せるようになった

メンタル面での変化

• 未経験の技術領域にアサインされても「まずはやってみよう」と思えるようになった

• 「分からないことが分からない」状態から抜け出しやすくなった

• 先輩への質問も、ある程度整理した状態でできるようになり、心理的負担が減った

実際に使う中で気づいた「こうすると良い」「これは避けたほうが良い」というポイントを共有します。

AIが書いたコードをそのまま使うと、「なぜこの書き方なのか?」「もっと良い方法はないか?」といった質問に答えられなくなります。

おすすめの対策
実装後、必ず「なぜこの実装なのか?」「他の方法との違いは?」を質問して、理解を深める習慣をつけましょう。

AIは既存コードのパターンを学習するため、元のコードの書き方が良くないと、それを踏襲してしまう可能性があります。

おすすめの対策
実装前に、既存のコードがきちんと書かれているかチェックしましょう。例えば、コードの問題点を自動で指摘してくれるツール（ESLintやRuboCopなど）を使うのも一つの方法です。

自走性が高いClaude Codeは便利ですが、知識がない段階では方向性が間違っていても気づきにくいことがあります。

おすすめの対策
最初はGitHub Copilotで一つずつ確認しながら進め、慣れてきたらClaude Codeを併用する、という段階的なアプローチがおすすめです。

単に「これをやってください」と指示するだけでは、期待と違う実装になることがあります。

おすすめの対策
ファイル名、行番号、期待する動作を具体的に書くことで、精度が上がります。（詳しくは「実装の工夫」セクションをご覧ください）

AIコーディング支援ツールは、単なる「コード自動生成ツール」ではなく、「学びを加速させるパートナー」として活用できます。

大切にしたい3つのポイント

1. 理解を深めることを忘れない
   AIに任せるだけでなく、「なぜこの実装なのか?」を必ず確認しましょう。
   
   

2. ツールは目的に応じて使い分ける
   学習段階ではGitHub Copilotで段階的に、慣れてきたらClaude Codeで効率化、というように柔軟に。
   
   

3. 失敗を恐れず、とことん質問する
   AIは何度質問しても疲れません。分からないことは、理解できるまで聞きましょう。
   
   

「本当にAIで実装できるようになるの?」と不安に思う方もいるかもしれません。

私自身、ターミナルの概念も知らない状態からスタートしました。それでも、AIをうまく活用することで、専門外の技術領域にもチャレンジできるようになりました。

大切なのは、AIに頼りきるのではなく、「AIと一緒に学ぶ」姿勢です。

この記事が、これからAI活用を始める方の一助となれば幸いです。