フォルダ構成
置き場所を決めておく
部品が5つを超えたあたりから、ファイルが横に並びすぎて探しにくくなります。そこで、置き場所の型を先に決めておきます。入門のうちは次の2つで足ります。
App.jsx
components/
Header.jsx
ProfileCard.jsx
WorkCard.jsx
data/
works.jscomponents/ には画面に出る部品、data/ には表示するもとのデータを置きます。App.jsx はどちらでもないので、いちばん上に残します。
なぜ2つに分けるのか
部品とデータは、直す理由がまったく違うからです。作品を1件足したいときに開くのは data/works.js だけで、見た目を直したいときに開くのは components/ の中だけです。同時に直すものを近くに、別々に直すものを遠くに置くのが、フォルダ分けの原則です。
data/works.js は、次のように値を外に出すだけのファイルです。
export const works = [
{ id: 1, title: "レシピ検索アプリ", category: "web", published: true, year: 2025 },
{ id: 2, title: "買い物メモツール", category: "tool", published: true, year: 2025 },
];部品ではないので export default ではなく、名前を付けた export を使うのが普通です。読み込む側も名前で受け取ります。
パスの書き方
フォルダを作ると、import の書き方が少し変わります。基準になるのはその import を書いているファイルの場所です。
// App.jsx から見た場合
import Header from "./components/Header.jsx";
import { works } from "./data/works.js";// components/WorkCard.jsx から見た場合
import { works } from "../data/works.js";./ は同じ階層、../ は1つ上へ戻る、という意味です。components/ の中から data/ を見るときは、いったん上へ戻ってから降りるので ../data/ になります。
つまずきどころ
../ の数を間違えると「見つかりません」というエラーになります。数を勘で足すのではなく、自分がいまどのフォルダにいるかを先に確かめてください。components/WorkCard.jsx にいるなら、いる場所は components/ です。そこから data/ へ行くには、1つ上がって1つ降ります。
もうひとつ、フォルダを増やしすぎないことです。components/cards/small/ のように深く掘ると、パスを書くだけで疲れます。入門の規模なら2階層で十分です。
演習
1枚に詰め込まれたページを、components と data の型どおりに配置し直します。エディタには components/ と data/ が、中身の空のファイルごとすでに置いてあります。実務では自分でフォルダとファイルを作りますが、まずは出来上がりの置き場所を目で見ながら、どこに何が入るのかをつかんでください。左のファイル一覧そのものが、この回で覚えてほしい型です。