Claude codeでツールを作るその前に！！VS Codeの画面の見方を覚えよう！

はじめに

「家計簿ツールを作りたい」「ブログ記事を自動で書きたい」「データを整理したい」

Claude Codeを入れて、AIとチャットできるようになり、「あれも作りたい、これも頼みたい」とやりたいことがどんどん出てきているのではないでしょうか？

vs codeでclaude codeの導入がお済でない方は、この記事を読む前に下記の記事で、導入してくださいね！

https://library.libecity.com/articles/01KMS08WF1FW82PBRNPT121QXW

それではツール作ろう！！！と言いたいところですが、

いきなりツール作りに入る前に、知っておくと後がずっとラクになることがあります。

それは「作業フォルダ」の使い方です。

超つまんない記事です　笑

地味です！！

先に言っておきますね　笑

この記事では、VS Codeの画面の見方と、ツールごとにフォルダを分けて作業する方法を紹介します。これを知っているだけで、AIとの作業がぐっとスムーズになります✨

VS Codeの画面をざっくり知ろう

VS Codeの画面は、大きく3つのエリアに分けて使いましょう。

普段使っているWindowsのエクスプローラーやMacのFinderと似た感覚なので、すぐに慣れると思います！

エリア場所役割普段の操作で言うと…

①エクスプローラー（左側）

フォルダやファイルの一覧を表示します。Windowsのエクスプローラー、MacのFinderとほぼ同じです！

②Claude Codeチャット（中央）

AIに指示を出す場所ここだけがVS Code独自の部分

③エディタ（右側）

ファイルの中身を見たり編集する画面で、Wordでファイルを開いているようなイメージ

②と③の画面は好きな場所に自分で移動できます！

タブの部分をドラッグ＆ドロップで左右に分けて配置したり上下に分けて配置したりできます！

開き方を1つずつ見ていってみましょう！

フォルダとファイルの操作

エクスプローラーの開き方

VS Codeの左端にあるアイコンの中で、一番上にあるファイルのマークをクリックします。

すると、初めてフォルダを開く場合は下のようにフォルダを開くボタンが現れます

ここで作業したいフォルダを開く、または新しくフォルダを作りましょう。

基本の操作

フォルダの横にある ▶ マークをクリックすると、中身が展開されます。もう一度クリックすると閉じます。Windowsのエクスプローラーと同じ操作です。ファイルをクリックすると、エディタにそのファイルの中身が表示されます。ExcelやWordと違うのは、いろんな種類のファイルを同じ画面で開けること。テキストファイルもHTMLもまとめて扱えます。

一番大事な考え方：「1つのツール ＝ 1つのフォルダ」

ここが今回の記事で一番伝えたいことです。

Claude Codeは、今VS Codeで開いているフォルダだけを作業場所として見ています。逆に言えば、そのフォルダの外にあるファイルは見えません。

フォルダを分けないとどうなる？

たとえば「家計簿ツール」と「ブログ記事の自動生成」を同じフォルダで作ったとします。

AIが家計簿のデータファイルをブログの素材と勘違いすることがあるファイルがどんどん増えて、どれがどのツールのものか分からなくなる「ブログ記事を修正して」と頼んだのに、家計簿のファイルまで書き換えてしまう

こうなると、せっかく作ったツールがぐちゃぐちゃになってしまいます。

鉄則：作りたいものが出てきたら、まず新しいフォルダを作る

Excelで新しい作業を始めるときに新しいブックを作るのと同じです。作りたいツールの数だけフォルダを作りましょう。

たとえば、ドキュメントの中にこんなふうにフォルダを並べます。

📁 ドキュメント
├── 📁 家計簿ツール
├── 📁 ブログ記事生成
├── 📁 写真整理ツール
└── 📁 レシピ管理

別のツールの作業に切り替えたいときは、VS Codeの「ファイル → フォルダーを開く」で、目的のフォルダを選ぶだけです。

「新しいウィンドウ」を開くと2つのフォルダを同時に開くことができ、2つ以上の作業を同時に行うことができます！

見慣れないファイルの「種類」について

Claude Codeで作業を始めると、普段あまり見かけない種類のファイルが作られることがあります。

Excelファイルが .xlsx、Wordファイルが .docx であるように、ファイル名の「.の後ろ」を見れば、そのファイルが何なのかが分かります。これを拡張子と呼びます。

よく見かける拡張子

拡張子何のファイル？身近な例

「.txt」：テキストファイルメモ帳で開けるふつうの文章

「.html」：　Webページのファイルブラウザで表示されるページ

「.css」：　デザインの設定ファイルWebページの色やレイアウトの指定

「.md」：マークダウンファイル見出しや箇条書きが使えるテキスト

Claude Codeが作るファイルでは .md をよく見かけますが、中身はただのテキストなので、身構える必要はありません。

Wordなどで下記のような形式で皆さんよく文章を書きませんか？

1．はじめに

a. 挨拶

　 b. 自己紹介

c. 今日話すテーマ

２．テーマの基礎知識

a. ...

b. ...

これは大見出しの中に小見出しがある感じですが、これをClaude Codeに分からせるための記法のことをマークダウン記法といって、そのファイル名がマークダウンファイル「.md」なのです！

マークダウンファイルの中身はこんな感じになっています

「#」は大見出し、「＃＃」は中見出し、「＃＃＃」は小見出し

「-」は改行の意味です！

一瞬、うわっと思う画面かもしれませんが、「.md」ファイルはただの整理されたテキストデータなのです！

なので、直接人間が書き換えても全然問題ありません👍

フォルダごとにAIへの指示を設定できる「CLAUDE.md」

フォルダを分けたら、次に知っておきたいのが CLAUDE.md です。

CLAUDE.mdとは？

ひとことで言うと、そのフォルダ専用の「AIへの指示書」です。

Claude Codeはチャットを始めるたびに、開いているフォルダの中にCLAUDE.mdがあるかを確認し、あれば最初に読み込みます。つまり、ここに書いておいたルールは、毎回の会話に自動で反映されるのです。

フォルダごとに違うルールを設定できる

これが「フォルダを分ける」ことの大きなメリットです。

📁 家計簿ツール
└── CLAUDE.md → 「金額は3桁カンマ区切りで表示して。合計は太字にして」

📁 ブログ記事生成
└── CLAUDE.md → 「です・ます調で、初心者向けにやさしく書いて」

📁 レシピ管理
└── CLAUDE.md → 「材料は人数分で計算して。手順は番号付きで書いて」

こうしておけば、毎回「です・ます調で書いて」と言わなくても、AIがフォルダのルールに従って動いてくれます。Excelのテンプレートに既定値を入れておくような感覚ですね。

CLAUDE.mdの作り方

自分で書く必要はありません。Claude Codeに頼めばOKです。

チャットで次のように伝えるだけで、AIがCLAUDE.mdを作ってくれます。

CLAUDE.mdに以下のルールを書いてください：
- 文章はです・ます調で書く
- 専門用語を使うときは必ずカッコで読み方をつける
- 初心者にもわかりやすい表現を使う

実際にやってみよう

ここまでの内容を、実際に手を動かして体験してみましょう。

実践1：フォルダを作ってVS Codeで開く

Windowsのエクスプローラー（またはMacのFinder）でドキュメントフォルダを開く新しいフォルダを作り、名前を「練習用ツール」にするVS Codeを開いて、メニューから「ファイル → フォルダーを開く」を選択先ほど作った「練習用ツール」フォルダを選んで開く

VS Codeの左側のエクスプローラーに「練習用ツール」と表示されていれば成功です。中身はまだ空っぽの状態です。

実践2：CLAUDE.mdを作ってもらう

Claude Codeのチャット画面を開いて（左端の ✱ アイコンをクリック）、

「＋New session」でチャットが立ち上がります。

次のように入力してみましょう。

CLAUDE.mdを作ってください。ルールは以下の通りです：
- 日本語で回答する
- 説明はやさしい言葉で、丁寧に書く

AIがCLAUDE.mdファイルを作ってくれます。

実践3：作られたファイルを確認する

エクスプローラーを見てみましょう。「練習用ツール」フォルダの中に CLAUDE.md というファイルが作られているはずです。

クリックして中身を見てみてください。先ほど指定したルールが書かれています。

実践4：ルールが効いているか確認する

チャット画面で /clear と入力して会話をリセットします。これで新しい会話が始まります。

新しい会話で、次のように聞いてみましょう。

このフォルダのルールを教えて

AIがCLAUDE.mdに書いたルール（「日本語で回答」「やさしい言葉で」など）を認識していれば成功です。会話をリセットしても、CLAUDE.mdのルールはちゃんと引き継がれています。

まとめ

VS Codeの画面は3つのエリア

※エクスプローラー以外の場所は自由に変えられます

「1つのツール ＝ 1つのフォルダ」が鉄則

フォルダを分けることで、AIがファイルを混同しなくなります。作りたいものが出てきたら、まずフォルダを作りましょう。

CLAUDE.mdでフォルダごとにルールを設定できる

毎回同じ指示を書く必要はありません。CLAUDE.mdに書いておけば、AIが毎回自動で読み込んでくれます。

新しいツールを作りたくなったら

１．フォルダを作る（ドキュメントの中に目的別で）

２．VS Codeで開く（ファイル → フォルダーを開く）

３．CLAUDE.mdを設定する（AIに「ルールを書いて」と頼む）

４．作業開始！（いつも通りチャットでお願いする）

この流れを覚えておけば、家計簿でもブログでも写真整理でも、何を作るときでもスムーズに始められます。

ぜひ、「マークダウンファイル」の中身を見てみて、自分専用ツールの改善に役立ててみてくださいね✨

上手くいかないときにCLAUDE.mdの中を見てみると、いらない指示や、間違った指令が入っていたりします！

少し気が引けるかもしれませんが、マークダウンファイルを開いて読むか読まないかで、作業効率は大きく変わると思います！