⌨️

2025年6月にAIコーディングを初めるための予備知識とセットアップ・利用方法

に公開

この記事はPY Technical Posts Month 2025年6月版の10日目です。PYのメンバーが様々なTech記事を投稿しているので他の記事もぜひお楽しみください。

https://partytech.notion.site/PY-Technical-Posts-Month-1a001e59ae53803aa8d7c8d74175ca9c

https://p-y.jp/


何番煎じだよと言われそうなタイトルですが、社内の非エンジニアへの共有も含めて現在のAIコーディングに対しての予備知識とそのセットアップについて説明します。

まずはAIコーディングツールの変遷について

AIコーディングツールの変遷

初期(2021-2022年)

GitHub Copilot(2021年6月)

  • OpenAIのCodexモデルを使用した最初の主要なAIコーディングアシスタント
  • ベータ版から始まり、2022年に一般公開

競合の登場(2022-2023年)

Amazon CodeWhisperer(2022年6月プレビュー、2023年4月GA)

  • AWSが開発したAIコーディングアシスタント
  • 現在はAmazon Q Developerに統合

Codeium(2022年)

  • 無料のGitHub Copilot代替として登場
  • 現在はWindsurf(旧Codeium)として発展

Tabnine

  • AI補完機能を提供する老舗ツール
  • GPTモデル登場前から存在していたが、AIブームで注目

新世代ツール(2023-2024年)

Cursor(2023年)

  • AIに特化したコードエディターとして登場
  • VS Codeフォークベースで開発

Replit Ghostwriter

  • オンラインIDE「Replit」のAIアシスタント機能

Sourcegraph Cody(2023年)

  • コードベース理解に特化したAIアシスタント

Qodo(旧CodiumAI)

  • テスト、レビュー、コード生成に特化

最新世代(2024-2025年)

GitHub Copilot の進化

  • 2024年10月からClaude 3.5 Sonnet、Gemini 1.5 Pro、OpenAI o1-previewなど複数のAIモデルに対応

Cline(旧Claude Dev)

  • VS Code用のオープンソースAIコーディングエージェント

Claude Code(2025年)

  • Anthropicの最新コーディングツール
  • Claude 4と連携した高度なコーディング支援

Copilotの登場でもエンジニア界隈は非常に盛り上がった記憶がありますが、更にAIコーディングに注目が集まったのはCursorの登場でしょうか。

Copilotの使用体験は「気が利いたスニペット」レベルであり、あくまで開発者のサポートにとどまっていたAIですが、Cursorに登場により対話しながらのコーディングがIDEレベルで統合されたことで、開発体験は従来と比べ劇的に変化しました。

そして2025年5月22日のAnthropicの発表をきっかけにClaude Codeが注目を集めることとなります。以下の記事でその理由について詳しく考察をしています。

https://zenn.dev/oikon/articles/adac12ea9e839b

以下は記事からの引用です。2025年6月時点ではClaude Codeは最新のAIコーディングツールと言ってよいでしょう。

① Claude 4 (Opus/Sonnet)の性能が良い
② Claude MaxプランのClaude Code定額利用
③ VSCode, CursorなどのIDE統合
④ 今まで以上のAI自律駆動

Claude Codeセットアップ

ではさっそく最新AIコーディングツールのClaude Codeを利用していきましょう。

インストール

まずはnode.jsのコマンドラインツールをインストール

npm install -g @anthropic-ai/claude-code

インストールが完了したら

claude

でClaude Codeを立ち上げて、Claudeのアカウント情報を紐づけます。
現在Proプラン以上が定額利用可能なので、まずはProプランを契約しておくのが無難です。

IDEの統合

VS Code

統合ターミナルにて claudeを実行すると拡張機能が自動でインストールされます。(といっても専用ウインドウでCLIが開くだけのもの)
VS Codeの再起動でClaude Codeのアイコンがアプリ右上に表示されます。

JetBrains IDE

マーケットプレイスからClaude Codeプラグインをインストールし、IDEを再起動します。

使用例

基本的には今までのコーディングツール同様にプロンプトで指示を行います。
以下は実際のリファクタリング作業のプロンプトです。

新しいブランチを作って、source/javascripts/loading/の構造を参考に、source/sass内にあり、1つのjsxファイルからしか参照されないscssファイルをそのjsxファイルと同じディレクトリに移動し、jsx内のimportパスを書き換えてください。その際に新しいフォルダを作ってください。それに付随してjsxファイルを参照している別のjsxファイルのimportパスも変更してください。

このような指示に対し、Claude Codeは以下のようにタスクを分解し、順番に作業を進めます。

⏺ I'll help you reorganize the SCSS files by moving them from source/sass to be co-located with their corresponding JSX files, following the structure of source/javascripts/loading/. Let me start by creating a todo list and then analyzing the current structure.
  ⎿  ☐ Create new branch for SCSS reorganization
     ☐ Analyze source/sass structure and find SCSS files referenced by single JSX files
     ☐ Move SCSS files to same directories as their JSX files
     ☐ Update import paths in JSX files
     ☐ Update import paths in other JSX files that reference moved JSX files

メモリ管理

Claude Codeは1つのセッション(アプリ起動から停止まで)から次のセッションでもコンテキストを共有するために3つのメモリロケーションを提供しています。

メモリタイプ 場所 目的 使用例
プロジェクトメモリ ./CLAUDE.md プロジェクト用のチーム共有指示 プロジェクトアーキテクチャ、コーディング標準、一般的なワークフロー
ユーザーメモリ ~/.claude/CLAUDE.md すべてのプロジェクト用の個人設定 コードスタイル設定、個人的なツールのショートカット
プロジェクトメモリ(ローカル) ./CLAUDE.local.md プロジェクト固有の個人設定 (非推奨、以下参照) サンドボックスURL、優先テストデータ

上記の場所に具体的な指示を記載しておくことで、Claude Code起動時に自動的にコンテキストが読み込まれます。

プロンプトをちまちまと書き込んで開発をするよりも、CLAUDE.mdに指示をしっかりと書き込んでから自律的にコードを書いてもらうのが本来の使い方に感じました。

https://docs.anthropic.com/ja/docs/claude-code/memory

MCP

MCPサーバーの利用には以下のコマンドを利用します。

# MCP Studio Server
claude mcp add <name> <command> [args...]

# MCP SSE Server
claude mcp add --transport sse <name> <url>

または以下のように.mcp.jsonを生成してから直接設定を書き込むと良いでしょう。

--scopeオプションでlocal | project | userにscopeを限定できます。
この場合.mcp.jsonが所定のディレクトリに生成されます。

https://docs.anthropic.com/en/docs/claude-code/mcp

余談

私はDesktop版のClaudeも利用していて、こちらからnpxコマンドで実行されるMCPサーバーを登録した際に、うまく動作しないという事象に遭遇しました。原因はnvmを利用してnpxをインストールしていたことで、以下の方法でnpxコマンドのエイリアスを作ることで対策することができました。

https://github.com/modelcontextprotocol/servers/issues/64#issuecomment-2582569354

Claude Codeを使ってみた所感

コマンドラインツールということもあり、UIが非常に貧弱ですので、
自分がメインでコードを書くシチュエーションにおいては拡張機能としてしっかりとUIが作り込んであるClineが操作性が良いなと感じました。

一方、0-1の開発においてはClaude Codeをぶん回して50-60%ほどのベースを作ってもらう、という使い方が良さそうだな(定額制ですし)と個人的には感じました。機能ごとにブランチ戦略なども立てておけば時間的なロスもある程度は回避することができそうです。(以下のドキュメントが参考になります)

https://docs.anthropic.com/ja/docs/claude-code/tutorials#gitワークツリーで並列claude-codeセッションを実行する

実際に、私自身この記事を書くためにClaude Codeを使い簡単な仕様書を渡してエラーを数回指摘しただけで、以前から作ろうと思っていたデスクトップユーティリティアプリがものの30分で出来てしまいました。(まさにバイブスのみのVibe Coding!!)

MCPとの連携も相まっていよいよAIコーディングが手放せない時代が来そうですね!

PY

Discussion