ファイル操作を頼む

Claude Code はファイルの読み取り、作成、編集ができます。このページでは、Claude にファイル操作を依頼する方法と、安全に作業するための許可システムについて学びます。

ファイルを読んでもらう

Claude にファイルの中身を見てもらうには、自然な言葉で頼むだけです。

> src/App.tsx の内容を見せてください

src/App.tsx の内容は以下の通りです：

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
...

複数のファイルを一度に確認する

> src/components/ 内のファイルをすべてリストアップしてください

> package.json と tsconfig.json の設定内容を確認してください

@ を使ってファイルを参照する

Claude Code では @ を使って、特定のファイルを明示的に指定できます。これはとても便利な機能です。

> @src/auth.js を見て、ログイン処理の流れを説明してください

@ の使い方の例

> @src/utils/format.ts にある formatDate 関数を説明してください

> @package.json の依存パッケージを確認してください

> @src/components/Header.tsx と @src/components/Footer.tsx を比較してください

@ を使うメリット

@ でファイルパスを指定すると、Claude はそのファイルを確実に読み込みます。「このファイルを見て」と言うだけだと、Claude が違うファイルを見てしまう可能性がありますが、@ を使えばそのリスクがなくなります。

新しいファイルを作成する

Claude に新しいファイルの作成を頼むこともできます。

> src/utils/helpers.ts に文字列を省略する関数を作ってください

Claude は以下のように応答します。

新しいファイルを作成します。

src/utils/helpers.ts を作成してよろしいですか？ (y/n)

y を入力すると、ファイルが作成されます。

✓ src/utils/helpers.ts を作成しました

作成した内容：
/**
 * 文字列を指定した長さで省略し、末尾に「...」を付ける
 */
export function truncateString(str: string, maxLength: number): string {
  if (str.length <= maxLength) return str;
  return str.slice(0, maxLength) + '...';
}

既存ファイルを編集する

既存のファイルを編集したいときも、自然な言葉で依頼できます。

> @src/components/Header.tsx のタイトルを「My App」から「Todo App」に変更してください

Claude の応答例:

src/components/Header.tsx を編集します。

以下の変更を行います：
- <h1>My App</h1>
+ <h1>Todo App</h1>

この変更を適用してよろしいですか？ (y/n)

y で変更が適用されます。n を押すと変更は行われません。

許可システムを理解する

Claude Code の大きな安全機能が許可システムです。Claude がファイルを変更するときは、必ずあなたの許可を求めます。

読み取り vs 書き込み

操作	許可が必要？
ファイルを読む	不要（自動で読める）
ファイルを作成する	必要
ファイルを編集する	必要
ファイルを削除する	必要
コマンドを実行する	必要

許可を求められたときの選択肢

ファイル変更やコマンド実行の許可を求められたとき、以下の選択ができます。

この変更を適用してよろしいですか？
  y - はい、適用する
  n - いいえ、適用しない

安心してください

Claude が勝手にファイルを書き換えることはありません。変更内容を確認してから y を押せるので、安心して使えます。もし変更内容が意図と違っていたら n を押して、指示を修正して再度頼みましょう。

画像を扱う

Claude Code は画像を理解することもできます。スクリーンショットや図を見せて質問できます。

画像を扱う方法

方法1: ドラッグ＆ドロップ

ターミナルに画像ファイルをドラッグ＆ドロップすると、Claude がその画像を認識します。

方法2: クリップボードから貼り付け

スクリーンショットをコピーした状態で Ctrl + V（Mac: Cmd + V）を押すと、画像を貼り付けられます。

方法3: ファイルパスを指定

> この画像を見てください: screenshots/error.png

画像を使った質問の例

> [画像をドラッグ＆ドロップ]
> このエラー画面の原因を教えてください

> [スクリーンショットを貼り付け]
> このデザインをHTMLで再現してください

> screenshots/mockup.png を見て、このUIを React コンポーネントとして実装してください

画像が使える場面

• エラー画面のスクリーンショットを見せて原因を聞く
• デザインモックアップからコードを生成する
• グラフや図の内容について質問する
• UIの問題箇所を視覚的に伝える

実践演習: Claude と一緒にプロジェクトを作ろう

ここまで学んだことを使って、簡単なプロジェクトを Claude と一緒に作ってみましょう。

演習: シンプルな自己紹介ページを作る

以下の手順で Claude に依頼してみてください。

ステップ 1: フォルダの作成と移動

mkdir ~/my-profile-page
cd ~/my-profile-page
claude

ステップ 2: Claude にプロジェクトを作ってもらう

> シンプルな自己紹介ページを作りたいです。
> 以下のファイルを作ってください：
> - index.html（自己紹介の内容）
> - style.css（見た目の装飾）
>
> 名前は「田中太郎」、趣味は「読書とプログラミング」としてください。

ステップ 3: ファイルの確認

> 作成されたファイルの内容を確認してください

ステップ 4: 修正を依頼する

> index.html に「好きな食べ物: カレー」を追加してください

> style.css の背景色をライトブルーに変更してください

ステップ 5: 新しいファイルを追加する

> プロフィール画像の代わりに使える、SVGのアバターアイコンを作って
> avatar.svg として保存してください

この演習を通じて、ファイルの作成・編集・確認の一連の流れを体験できます。

よくある質問

Q: Claude が間違ったファイルを編集しようとしたら？

n を押して拒否し、正しいファイルパスを @ で指定して再度依頼してください。

> @src/components/Button.tsx のスタイルを変更してください（さっきのHeaderではなく）

Q: 変更を元に戻したいときは？

Git を使っていれば、変更を元に戻せます。

> さっきの変更を git で元に戻してください

または自分でターミナルから操作することもできます。

git checkout -- src/components/Header.tsx

Q: 大量のファイルを一度に編集できる？

はい、できます。ただし、一つずつ許可を求められるので、変更内容を確認しながら進めましょう。

> src/components/ 内のすべてのコンポーネントに、export default を追加してください

まとめ

やりたいこと	方法
ファイルを読む	自然な言葉で依頼、または @ファイルパス
ファイルを作成する	「〇〇を作ってください」と依頼 → 許可で確定
ファイルを編集する	「〇〇を変更してください」と依頼 → 許可で確定
画像を渡す	ドラッグ＆ドロップ / Ctrl+V / パス指定
変更を拒否する	許可を求められたら n を入力

次のステップ

ファイル操作の基本を学んだら、次はコードを書いてもらうに進みましょう。Claude にプログラムを書いてもらう方法を詳しく学びます。