ファイルシステムMCPの構築 - AI協調プログラミング入門

概要

ファイルシステムMCPを設定することで、バイブコーディングの本領である「雰囲気」でのファイル操作が可能になります。Claudeがあなたのコンピュータ上のファイルを直接読み書きできるようになり、「新しいアプリを作って」や「バグを修正して」といった感覚的な指示だけで、具体的なコード生成、ファイル編集、プロジェクト管理などが飛躍的に効率化されます。

このガイドで実現できること

Claudeによるファイルの読み取り・書き込み
ディレクトリの作成・削除
ファイルの検索・一覧表示
複数ファイルの一括処理

前提条件

必要な環境

Claude Desktop がインストール済み
Node.js 18以上がインストール済み
npm または yarn が使用可能
基本的なコマンドライン操作の知識

設定手順

1. Node.jsのインストール確認

まず、Node.jsがインストールされているか確認します。

node --version

v18.0.0以上が表示されればOKです。インストールされていない場合は、Node.js公式サイトからダウンロードしてください。

2. ファイルシステムMCPのインストール

npmを使用してファイルシステムMCPをグローバルインストールします。

npm install -g @modelcontextprotocol/server-filesystem

インストールが成功すると、mcp-server-filesystemコマンドが使用可能になります。

3. 設定ファイルの作成

Claude Desktopの設定ファイルを作成します。以下のパスにファイルを作成してください：

%APPDATA%\Claude\
└── claude_desktop_config.json

以下の内容をコピーして、claude_desktop_config.jsonに貼り付けます：

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\user\\Desktop\\00_作業中_デスクトップ同期\\01_APP開発"
      ]
    }
  }
}

パスの設定について

C:\\Users\\user\\Desktop\\00_作業中_デスクトップ同期\\01_APP開発の部分を、あなたが作業したいフォルダーのパスに変更してください
Windowsの場合、バックスラッシュは必ず2つ（\\）にする必要があります
複数のフォルダーを指定する場合は、配列に追加できます

4. Claude Desktopの再起動

設定を反映させるため、Claude Desktopを完全に終了して再起動します。

システムトレイのClaude Desktopアイコンを右クリック
「Quit Claude Desktop」を選択
スタートメニューから再度Claude Desktopを起動

5. 動作確認

新しいチャットを開始し、以下のようなプロンプトで動作を確認します：

現在のディレクトリにあるファイルを一覧表示してください

設定されたディレクトリのファイル一覧を表示します...
[ファイルシステムMCPを使用してファイル一覧を取得]

ファイル一覧が表示されれば、設定は成功です！

権限設定

ファイルシステムMCPは以下の操作をサポートしています：

操作	説明	使用例
read_file	ファイルの内容を読み取る	コードファイルの確認
write_file	ファイルに内容を書き込む	新規ファイル作成、既存ファイル更新
list_directory	ディレクトリの内容を一覧表示	プロジェクト構造の確認
create_directory	新しいディレクトリを作成	プロジェクトフォルダーの作成
move_file	ファイルやディレクトリを移動	ファイルの整理
search_files	ファイルを検索	特定のコードや文字列を含むファイルの検索

バイブコーディングの実践例

「雰囲気」でのプロジェクト作成

バイブコーディングでは、詳細な手順やコマンドを説明する必要がありません。「雰囲気」や「感覚」で意図を伝えるだけで、Claudeが具体的な実装を行います。

例1: バイブコーディングでのプロジェクト作成

バイブコーディングの指示：
新しいReactプロジェクト「my-app」を作って。
モダンな感じで、使いやすいやつでお願いします。

バイブコーディングの実行：
「モダンで使いやすい」意図を理解し、具体的に実装します：

[ディレクトリ作成: my-app]
[ファイル作成: package.json - TypeScript + Vite構成]
[ファイル作成: src/App.tsx - クリーンなUI]
[ファイル作成: src/components/ - コンポーネント構造]
[スタイル設定: Tailwind CSSでモダンデザイン]
[設定ファイル: ESLint + Prettierで保守性向上]

「雰囲気」からモダンなReactプロジェクトを作成完了！

例2: バイブコーディングでのコード品質改善

バイブコーディングの指示：
コードをきれいに整理して。
プロっぽい感じにしたいです。

バイブコーディングの実行：
「きれいに整理」「プロっぽい感じ」を理解し、包括的に改善します：

[プロジェクト全体をスキャン: src/]
[コード品質分析: ESLint + ベストプラクティスチェック]
[コードスタイル統一: Prettier適用]
[タイプ安全性向上: TypeScript化]
[コンポーネント構造最適化]
[パフォーマンス最適化: メモ化、遅延読み込み]
[テストカバレッジ向上]

✨ 「雰囲気」からプロフェッショナルなコードベースに変身完了！

バイブコーディングの実際の效果

従来の開発では、このような包括的なコード改善に数時間かかっていました。バイブコーディングでは、感覚的な指示だけでClaudeが最適な手法を選択し、自動実行します。

セキュリティに関する注意

重要なセキュリティ上の注意

MCPは指定したディレクトリ内のすべてのファイルにアクセスできます
機密情報を含むフォルダーへのアクセスは避けてください
プロジェクト専用のフォルダーを作成し、そこだけにアクセスを制限することを推奨
定期的にバックアップを取ることをお勧めします

トラブルシューティング

問題: "MCP server error" が表示される

解決策:

設定ファイルのJSONフォーマットを確認（カンマ、括弧の対応）
パスが正しく設定されているか確認
Node.jsが正しくインストールされているか確認

問題: ファイル操作ができない