🐥
Claude Codeをはじめる - セットアップとPlaywright MCPの導入手順
概要
本記事では、基本的なセットアップからPlaywright MCPの導入まで、実際の開発で使用できる状態にするまでの手順を説明します。
Claude Codeとは
- Claude CodeはAnthropic社が提供するコーディングに特化した公式CLIツールです
- AI支援によるコード生成、ファイル編集、テスト実行などの開発作業を効率化します
前提条件
- Node.js（最新LTS版推奨）
- npm
- ターミナル**（Terminal、iTerm2等）
Node.jsとnpmのインストール
Claude Codeを使用するには、Node.jsとnpmが必要です。
NVM（Node Version Manager）を使ってインストールします。
# NVMをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# ターミナルを再起動後、インストール確認
command -v nvm
# LTS版をインストール
nvm install --lts --latest-npm
nvm alias default 'lts/*'
動作確認
# Node.jsのバージョン確認
node -v
# npmのバージョン確認
npm -v
Claude Codeのインストール
ターミナルで実行：
npm install -g @anthropic-ai/claude-code
インタラクティブモード開始と認証
Claude Code起動
ターミナルで実行：
cd your-project-directory
claude
認証方法の選択
初回起動時に認証方法を選択します：
-
Anthropic Console（デフォルト）
- console.anthropic.comでの有効な課金設定が必要
-
Claude App（Pro/Max プラン）
- WebとCLIの統合サブスクリプション
-
Enterprise Platforms
- Amazon BedrockまたはGoogle Vertex AIとの連携
認証完了後、Claude Codeが使用可能になります。
モデルの変更
Sonnetモデルに変更
Claude Codeで実行：
/model
Select Model │
│ Switch between Claude models. Applies to this session and future Claude Code sessions. For custom model names, specify with --model. │
│ │
│ 1. Default (recommended) Opus 4 for up to 20% of usage limits, then use Sonnet 4 │
│ 2. Opus Opus 4 for complex tasks · Reaches usage limits faster │
│ ❯ 3. Sonnet Sonnet 4 for daily use✔
コマンド実行後、モデル選択画面でSonnetを選択してください。
Sonnetを推奨する理由: Opus 4はトークン制限に引っかかることが多く、長いコードや複雑なタスクで制限エラーが発生する可能性があります。Sonnetは安定して動作するため推奨します。
Playwright MCPのセットアップ
Playwright MCP追加
ターミナルで実行：
claude mcp add playwright npx @playwright/mcp@latest
設定確認
ターミナルで実行：
claude mcp list
Checking MCP server health...
playwright: npx @playwright/mcp@latest - ✓ Connected
Playwrightが表示されれば設定完了です。
基本的な使用例
Claude Codeで実行：
# Webスクレイピング（Playwright MCP使用）
> https://github.com/anthropics/claude-code" をスクレイピングして claude-codeについて特徴をまとめて下さい
CLAUDE.mdの設定
CLAUDE.mdとは
CLAUDE.mdは、Claude Codeにプロジェクト固有の文脈と制約を伝えるための設定ファイルです。「AIとの共通言語」として機能し、チーム全体で一貫した開発支援を受けられます。
作成方法
Claude Codeで実行：
/init
このコマンドを実行すると、プロジェクトのルートディレクトリにCLAUDE.mdファイルが自動生成されます。
CLAUDE.mdの配置場所と読み込み順序
Claude Codeは起動時に以下の順序でCLAUDE.mdファイルを探索・読み込みし、階層的に統合します。
読み込み処理の流れ：
- 現在のディレクトリから上位に向かって再帰的に探索
- 見つかったすべてのCLAUDE.mdを読み込み
- 階層的に組み合わせて完全な文脈を構築
- 優先順位に従って設定をマージ
1. グローバル設定（ベース設定）
~/.claude/CLAUDE.md
- 全プロジェクトで共通の個人設定
- コーディングスタイルや個人的な制約事項
-
@import機能で個人設定を分離可能
2. プロジェクト設定（推奨）
プロジェクトルート/CLAUDE.md
- チーム全体で共有される設定
- バージョン管理に含めて統一運用
- プロジェクトの基本情報と共通ルール
3. サブディレクトリ設定
プロジェクトルート/feature/CLAUDE.md
- 特定モジュールや機能固有の設定
- より詳細な文脈を提供
- 親ディレクトリの設定を継承・拡張
4. ローカル設定（最終上書き）
プロジェクトルート/CLAUDE.local.md
- 個人専用設定（
.gitignore推奨） - チームに影響しない個別カスタマイズ
- デバッグ用の一時的な指示
参考文献
公式ドキュメント
-
Claude Code 公式ドキュメント
- Claude Codeの公式セットアップガイド
技術記事・解説記事
-
Claude Code ベストプラクティス - Zenn
- Claude Codeの効果的な活用方法とベストプラクティス
-
Claude Code の CLAUDE.mdは設定した方がいい - じゃあ、おうちで学べる
- CLAUDE.mdの階層構造と配置場所、優先順位について説明
-
Claude Codeを実際のプロジェクトにうまく適用させていくTips10選 - Qiita
- 開発現場でのClaude Code活用ノウハウ集
-
nvm(Node Version Manager)を使ってNode.jsをインストールする手順 - Qiita
- NVMを使ったNode.js環境構築手順
Discussion