Webプロジェクトのフォルダ構成を理解する

前のレッスンで作った Web プロジェクトには、たくさんのファイルやフォルダが自動で生成されています。初めて見ると「何がなんだかわからない…」と感じるかもしれません。でも大丈夫です。料理にたとえると、冷蔵庫の中身を「野菜はここ、調味料はここ」と整理するのと同じで、どこに何があるかのルールさえわかれば迷わなくなります。

このレッスンでは、AI（人工知能のアシスタント）に質問しながら、プロジェクトのフォルダ構成を自分の言葉で説明できるようになることをゴールにします。

• 前のレッスン「Next.js プロジェクトを作成する」が完了していること
• VS Code（コードを書くためのアプリ）が開いている状態
• Claude Code、Cursor、ChatGPT など、いずれか1つの AI ツールが使える状態

まず、プロジェクトのフォルダをエクスプローラー（VS Code の左側にあるファイル一覧）で開いてみましょう。次のようなフォルダやファイルが並んでいるはずです。

大きく分けると、以下の3グループに整理できます。

すべてを暗記する必要はありません。わからないフォルダやファイルがあったら、AI に聞くのがいちばん早い方法です。

Claude Code を使う場合

ターミナル（VS Code の下部にある黒い画面）で Claude Code を起動している状態で、次のように聞いてみましょう。

プロンプト例 1: フォルダの役割を聞く

このプロジェクトの app/ フォルダにはどんなファイルがあって、それぞれ何をしているか教えて

プロンプト例 2: 触っていいファイルを聞く

初心者が最初に編集するべきファイルはどれ？ 触らないほうがいいファイルも教えて

Cursor / ChatGPT を使う場合

• Cursor: エディタ内のチャット欄（Ctrl+L または Cmd+L）に同じ質問を入力します
• ChatGPT: 「Next.js 15 のプロジェクトで」と前置きしてから質問すると、より正確な回答が得られます

AI の回答を参考にしながら、特に大事なファイルを自分の目で開いてみましょう。

app/page.tsx — トップページの中身

このファイルが、ブラウザで http://localhost:3000 を開いたときに表示されるページの本体です。VS Code のエクスプローラーで app フォルダを展開し、page.tsx をクリックして開いてみてください。

app/layout.tsx — 全ページ共通の外枠

すべてのページに共通するヘッダーやフッター、フォント設定などを書く場所です。料理でいえば「どのお皿にも必ず敷くランチョンマット」のような存在です。

public/ — 画像や素材の置き場

ロゴやアイコンなど、そのまま公開したいファイルを入れるフォルダです。ここに置いたファイルは /ファイル名 でブラウザから直接アクセスできます。

package.json — プロジェクトの設計図

プロジェクト名や、使っているライブラリ（便利な道具のセット）の一覧が書かれたファイルです。直接編集することは少ないですが、「このプロジェクトは何でできているか」を知りたいときに見ます。

node_modules/ — 絶対に触らないフォルダ

ライブラリの実体が入っている場所です。数万個のファイルがありますが、自動で管理されるので一切触る必要はありません。間違って消してしまった場合は、ターミナルで次のコマンドを実行すれば復元できます。

pnpm install

（「必要な道具を全部もう一度そろえ直して」という意味です）

つまずき 1: ファイルが多すぎてどこから見ればいいかわからない

対処法: まずは app/ フォルダの中だけに集中してください。それ以外は「設定ファイル」か「自動生成」のどちらかなので、今は無視して大丈夫です。AI に「app/ フォルダの中身だけ教えて」と絞って聞くのも有効です。

つまずき 2: node_modules を開いてしまい VS Code が重くなった

対処法: node_modules フォルダはクリックしないでください。もし開いてしまったらフォルダを閉じるだけで元に戻ります。VS Code の設定で非表示にすることもできます。AI に「VS Code で node_modules を非表示にする方法を教えて」と聞いてみましょう。

つまずき 3: .next/ フォルダが見当たらない

対処法: .next/ は開発サーバーを一度起動（pnpm dev）すると自動で作られます。まだ起動していなければ存在しないのが正常です。

良い例: 「app/page.tsx はトップページの中身。layout.tsx は全体の外枠」と自分の言葉で説明できる

悪い例: 「なんかファイルがいっぱいある」で終わり、どのファイルが何をしているか答えられない

良い例: わからないファイルを見つけたら AI に「このファイルは何？」と聞く

悪い例: わからないファイルを勝手に消す、または中身をなんとなく書き換える

最後に、学んだことを短いメモにまとめましょう。これがこのレッスンの成果物（＝あなたが作るもの）です。

AI に次のように頼んでみてください。

プロンプト例:

さっき説明してくれた Next.js プロジェクトのフォルダ構成を、初心者向けの短いまとめ（5行くらい）にしてくれる？ 日本語で、それぞれのフォルダの役割を1行ずつ書いて

AI が出力したまとめを確認し、自分の理解と合っていれば OK です。もし「ちょっと違うな」と思う部分があれば、AI に追加で質問して修正しましょう。

以下のすべてに「はい」と答えられたら、このレッスンは完了です。

• app/page.tsx と app/layout.tsx をそれぞれ VS Code で開いて中身を見た
• AI に1回以上フォルダの役割について質問した
• node_modules/ は触らなくてよいことを理解した
• フォルダ構成のまとめメモ（成果物）を AI と一緒に作った
• 自分の言葉で「app/ は○○、public/ は○○」のように説明できる