フォルダ構成の地図

まずは全体像を、ざっくり

生成直後のプロジェクトは、おおまかにこんな構成です（主要なものだけ抜粋）。

spfx-list-viewer/
├─ src/                     … 自分が書くコードの置き場（主戦場）
│   └─ webparts/
│       └─ listViewer/
│           ├─ ListViewerWebPart.ts       … Webパーツ本体
│           ├─ ListViewerWebPart.manifest.json … 部品の身分証
│           ├─ components/                 … React部品
│           └─ loc/                        … 表示文言（多言語）
├─ config/                  … ビルドや配置の設定
│   ├─ config.json
│   ├─ package-solution.json … パッケージ(.sppkg)の設定・バージョン
│   └─ serve.json            … ローカル起動の設定
├─ sharepoint/              … 配置用の成果物（.sppkg などが入る）
├─ package.json             … 依存関係とnpmスクリプト
├─ tsconfig.json            … TypeScriptの設定
└─ node_modules/            … 依存部品（自動生成・触らない）

いちばん触るのは src

自分でコードを書くのは、ほぼ src/webparts/listViewer/ の中だけです。ここが主戦場。他は「設定」や「自動生成物」で、最初のうちは頻繁には触りません。

場所	役割	触る頻度
src/webparts/.../	Webパーツ本体とReact部品。機能はここで作る	◎ よく触る
config/package-solution.json	パッケージ名・バージョン・配置設定	○ 配置や更新時
config/serve.json	ローカル起動時の初期ページ	△ たまに
sharepoint/solution/*.sppkg	配置用の成果物（ビルドで生成）	△ 生成物。中身は触らない
node_modules/	依存部品	✕ 触らない（自動）

成果物フォルダは「結果」だから触らない

lib/・dist/・temp/・release/ といったフォルダが、ビルドすると現れます。これらはコードから自動で作られる「結果」なので、直接編集しても次のビルドで上書きされます。編集するのは、あくまで元となる src の側です。

この記事のまとめ

• 自分で書くのは、ほぼ src/webparts/listViewer/ の中だけ
• config/package-solution.json は配置・バージョン管理で使う（STAGE 06で再登場）
• node_modules や lib/dist は自動生成物。触らない・消えても npm install で戻る
• 全部を覚えず、「どこに何があるか」の地図を持てば十分

地図が手に入りました。次は、主戦場である Webパーツ本体（.ts） を開いて、その中身の構造を読み解きます。