攻略法

AIコーディング支援ツールの概要と活用法

近年、AIを活用したコーディング支援ツールの進化により、プログラミングの効率と品質が飛躍的に向上しています。この記事では、開発作業を加速させる主要なAIコーディング支援ツール（GitHub Copilot、Gemini、CodeGPT）について解説していきます。特にハッカソンなどの短期間でのプロジェクト開発において、これらのツールがどのように役立つかに焦点を当てています。

AIコーディング支援ツールは、自然言語によるコード生成、自動補完、エラー解決、コード解析、ドキュメント作成などの機能を提供し、開発効率を大幅に向上させます。これらのツールを使いこなすことで、アイデアの実装から完成までの時間を短縮し、より複雑な機能の開発に集中することができます。

効果的な活用のポイント

明確なプロンプトでコード生成の精度を高める
IDE拡張機能を使いワークフローに統合する
複数のAIモデルを目的に応じて使い分ける
生成コードは必ず確認・修正する

ハッカソンでの活用例

アイデア実装の計画立案と技術スタック選定
プロジェクト構造やスケルトンコードの自動生成
複雑なロジックの実装支援
デバッグとエラー解決の効率化
コード説明やドキュメントの自動生成

この記事では、各ツールの基本機能から実践的な使い方、さらにはハッカソンなどの時間制限のある開発環境での効果的な活用方法まで詳しく紹介します。初心者からベテラン開発者まで、AIツールを最大限に活用するためのヒントを得ることができるでしょう。

1. GitHub Copilot

1.1. 概要

AIを活用したコーディング支援ツールです。

OpenAIによって開発された大規模言語モデルをベースにしており、 コードの自動補完や提案、 自然言語によるコード生成など、プログラマーの作業を効率化するための様々な機能を提供します。

1.2. GitHub Copilot Students Package

学生のための無料版GitHub Copilotです。

GitHub Copilot Students Packageを使うためには 予め申し込みが必要です。

申し込みに必要な物
- 学校のメールアドレス（例 kuas.ac.jp doshisha .ac .jp kyoto-u.ac.jp）
- 学生証の写真（有効期限が書いてある面）
GitHub Educationに申し込む方法

GitHub Education 申請手順

1.2. 設定

Copilotの設定はGitHubのCopilot設定ページで変更できます。

設定では以下の内容が主に変更できます。

どのモデルをつかえるようにするのか
Web経由で外部のコードを参照するのか

1.3. IDE拡張機能

IDE（統合開発エディター）でCopilotを使うための拡張機能です。

エディターそのままでAIとチャットしたり、コードを生成してもらったりできます。

1.3.1 GitHub Copilot Chat

AIとチャット機能することができる機能です。

VS Code用
- https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
JetBrains IDEs (IntelliJ IDEA, PyCharm, WebStormなど)用
- https://plugins.jetbrains.com/plugin/17718-github-copilot
Neovim,Vim用
- https://github.com/github/copilot.vim

できること

Copilotとチャット

プロンプトからコード生成

自然言語で指示を与えるだけで指示に沿ったコードを生成してくれます。

指示の工夫次第で自由にコードを生成できます。
Next Edit Suggestion

コードに変更があったり、エラーがあったりすると次の編集されるであろう部分を補間で示して簡単に修正してくれます。
GitHub > Copilot > Next Edit SuggestionsでEnabledにすると使えます。

GitHub>Copilot>NextEditSuggestions.png

複数のAIモデルを選択して使用可能

Copilot経由で様々なAIを利用することができます。それぞれのAIによって応答も異なります。

以下のAIが現在は利用可能です。
- Chat GPT
- Gemini
- Claude

1.3.2 GitHub Copilot

コードを生成してそのままファイルに直接書き込んだりできる機能です。

VS Code用
- https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
JetBrains用
- https://plugins.jetbrains.com/plugin/17718-github-copilot
Vim, Neovim用
- https://github.com/github/copilot.vim

できること

エディター上で既存コードから自動補完

tabキーを押すだけでコードが補完されます。

ctrl+→やctrl+←で希望範囲だけ補完が反映されます。
Copilot Editsでプロンプトから直接コードを生成・編集する。

Copilot にはEditsという機能があり、コード生成を直接ファイルに行ってくれます。

インラインチャット
- エディター上にチャットをだして、AIコーディングができる。
クイックチャット
- コマンドパレットでChat: Open Quick ChatからCopilot Chatを使用できる

2. Gemini

2.1. 概要

Gemini（ジェミニ）は、Google によって開発された、高度な性能を持つLLM（大規模言語モデル）の総称で、ほかのChatGPTと同様に自然言語で指示を送ると、テキストやコードの生成、言語翻訳、質問への回答など、様々なタスクを実行できます。

Googleアカウントさえあれば誰でも無料のGeminiが利用できます。

GeminiにはGemini Flash、Gemini Pro、Gemini Ultraなどさらに様々な異なる特徴を持ったモデルがあり、それぞれ得意なことがあるので使われる場面が異なります。
これらのモデルの一部は有料版でのみ利用可能になるのでその場合は課金が必要です。

※ 今回のハッカソンでは個人での課金は必要ありません。

2.1.1. Gemini Free

Geiminiの無料版です。

一部のAIモデルは利用することができませんが、それでも十分な機能を備えています。

2.1.2. Gemini Advanced

Geminiの有料版です。

無料版よりも応答の質がよかったり、応答速度が速かったりします。

Gemini Advancedでは、Googleの最先端モデルであるGemini Ultra 1.0を利用できます。これにより、より高度な推論、コーディング、創造的なタスクを実行できます。

2.2. Webアプリ

GeminiはWebブラウザ上で利用できます。→ https://gemini.google.com/app

自然言語でチャットし、指示を送ることで指示通りの応答が返ってきます。
この機能を使ってコードを生成してもらうことも可能です。

具体的な使い方は 2.4. 使い方を参照してください。

2.3. IDE用拡張機能

2.3.1. Gemini Code Assist

Webブラウザでも使えるGeminiですが、エディターの拡張機能を使うことで、エディターでも使えるようになります。生成されたコードをボタン一つでファイルに適用したりできます。

2.3.1.GeminiCodeAssist.png

※VS Codeの例

VS Code用
- https://marketplace.visualstudio.com/items?itemName=Google.geminicodeassist
JetBrans用
- https://plugins.jetbrains.com/plugin/24198-gemini-code-assist

概要

Geminiをエディター上で使えるようにする拡張機能です。
VS Code、IntelliJ、JetBrains IDEなどで利用可能です。

事前準備

Googleアカウントを持つ

できること

コードの問題を解決するためのガイダンスを提供する。
プロジェクトの コードを生成する。
エディターに適用。
コーディング時にインラインの コードの候補を受け取る。
VSCodeだけでなくAndroid Studio, IntelliJなどでも利用可能

使い方

まず拡張機能にGoogleアカウントでログインします。
拡張機能一覧からGeminiとチャットする。（下図）
具体的なGeminiへの指示の出し方は 2.4. 使い方を参照
※VS Codeの例

2.1.2. GitHub Copilot Chat & GitHub Copilot

GitHub Copilot Chat と GitHub CopilotもAIモデルにGeminiを使用できる。

下図のようにCopilotにも Gemini 2.0 Flash (Preview)があります。これを選択すると Copilot経由でGeminiを使用できます。Copilot経由で使うことでエディタに直接コードを生成したりできます。

2.1.2.GitHubCopilotChat&GitHubCopilot.png

2.4. 使い方

Geminiなどの大規模言語モデル(LLM)のAIは **チャットで文章を入力し、出力は文章として回答を得ることができます。**このときの入力した文章を「 プロンプト」といいます。プロンプトを使って開発することをプロンプトエンジニアリングと言ったりします。

2.4.1. コード生成と補完:

Geminiは、自然言語による指示やコードのコンテキスト（ファイル参照など）に基づいて、コードの生成や補完を行うことができます。
- 例えば、 PythonでWebスクレイピングを行うコードを書いて といった指示を出すことで、Geminiがコードを生成します。
- また、コードを入力中に、 次の行や関数などを予測して提案することも可能です。
これにより、 コーディングの速度を向上させ、 効率的な開発を支援します。

プロンプト例：

アプリの仕様にそったコードを生成してもう

以下の仕様に沿ったアプリを開発しようと思っています。Reactのコードを生成してください。
1. ボタンとラベルを画面に用意する。
2. ボタンが押されるとデータベースからデータ１とデータ２をとってくる。
3. それらを処理して画面のラベルに表示する。

指定したコードを改善してもらう。

// Javascript Code
上のJavascriptのコードを改善してください。

発生したエラーを解決するようにコードを修正してもらう。

! Error: failed to fetch data(error code: 00392239) 上のエラーを解決してください。 　

2.4.2. コードの理解と説明:

Geminiは、既存のコードや与えたコードを解析し、その機能やロジックを自然言語で説明することができるので、 **複雑なコードや、他の人が書いたコードを理解する際に役立ちます。**また、コードの改善点やバグの可能性などを指摘することも可能です。
これにより、 コードの品質を向上したり、 チーム開発におけるコミュニケーションを円滑にしたりすることができます。

プロンプト例

ファイルのコードが行っている処理を説明してもらう

main.jsのコードはどういう処理を行っているのですか？

指定したコードを説明してもらう。

// Javascript Code...
上のJavascriptのコードはどのような処理なのですか。

エラーが発生しているコードを指定して解決してもらう。

上のコードで発生するエラーの原因を教えてください。また修正してエラーを解決してください。

2.4.3. ドキュメント生成:

Geminiは、コードに基づいてAPIドキュメントやコメントを自動生成することができます。
- これにより、ドキュメント作成の負担を軽減し、コードの保守性を高めることができます。
Geminiは、様々なプログラミング言語やドキュメント形式に対応しており、柔軟なドキュメント生成が可能です。

プロンプト例

コメントを生成してもらう。

main.jsにコメントを生成してください。日本語で書いてください。

2.4.4. 学習支援:

Geminiは、プログラミングに関する 質問に答えたり、コードの例を提供したりすることで、学習を支援します。
- 初心者プログラマーが新しい言語やフレームワークを学ぶ際に役立ちます。
- また、上級者プログラマーが特定の技術について深く理解したい場合にも活用できます。

プロンプト例

技術を教えてもらう

～という技術はどのようにしたら実現できるのですか。
既存のサービスでの実装方法があれば教えてください。

アイデアの実現方法を教えてもらう

～をするためにはどのような技術を用いればいいのですか。

技術の実装方法を教えてもらう。

～という処理を実装するためのライブラリやSDKなどはありますか。

2.4.5. コードレビュー:

Geminiは、コードの品質を評価し、改善点を提案することができます。
- コードのスタイル、パフォーマンス、セキュリティなど、様々な観点からレビューを行うことが可能です。
これにより、コードレビューの効率化や、品質向上に貢献します。
プロンプト例
- 自分の意図通りにコードが動くか検証してもらう。
```
下のコードは～をするための処理を実装したものです。
```javascript
  // Javascript Code ...
```
上のコードを改善してください。

2.5. 参考

https://qiita.com/kanuazut/items/a71a6cd5bb47b2efdd7f

3. CodeGPT

DeepSeekといった様々なAIモデルとチャットができる。

※AI Agentを使ったコーディングも可能。

3.1. IDE拡張

3.1.1. CodeGPT: Chat & AI Agents

※VS Codeの例

拡張機能URL

https://marketplace.visualstudio.com/items?itemName=DanielSanMedium.dscodegpt

できること

様々なAIモデルとチャット可能（GrokやDeepSeek）
AI Agentを使える。

4. 豆知識・まとめ

4.1. VS Code について

Next Edit Suggestionを有効にすると新規コードの補完だけでなく、既存コードを編集するための自動補完機能を提供してくれる。有効方法は Next Edit Suggestion を参照
GitHub Copilot Editsを使うとプロンプトからコードをファイルに生成したり、新しくファイルを生成したりできる。