- ページが増えると、何が大変になるのか分かる
- フレームワークが、その大変さの何を助けてくれるのか分かる
- このアプリの
app/の「地図」が読める
きょうは手より目と頭。読んで理解して、地図を1まい描きます。15〜20分。
同じ部品を何回も書く問題
これまで作ったのは、ぜんぶ1まいで完結する .html ファイルだったね。でもサイトのページが10まい、20まいと増えていくと、こまったことが起きます。
たとえば、どのページの上にも同じ「ヘッダー」をつけたいとする。素のHTMLだと、同じ 部品 を全ページにコピペすることになる。そして「ヘッダーの色を直したい」と思ったら……20まい全部を、1まいずつ直すはめに。これはとても大変だし、まちがいも起きやすい。
フレームワーク＝便利な土台
そこで使うのが フレームワーク。アプリを作るための「便利な土台」のことです。このアプリは Next.js（ネクスト・ジェイエス） というフレームワークを使っています。
フレームワークがあると、こんなことができる↓
- 部品を1回作って使い回せる：ヘッダーを1つ作れば、全ページで使える。直すときも1か所だけ。
- ファイルの置き場所でURLが決まる：どのファイルがどのページになるか、フォルダの形で自動的に決まる。
このアプリの地図（App Router）
Next.js では、app/ というフォルダの中の page.tsx という名前のファイルが、1つのページ（URL）になります。これを App Router（アップ・ルーター）といいます。フォルダの形が、そのまま住所（URL）になるんだ。
// ファイルの場所 → どのURLになる？
app/page.tsx → "/" （トップ・一覧）
app/kuku/page.tsx → "/kuku" （九九アプリ）
app/kuku/play/page.tsx → "/kuku/play" （九九であそぶ）
フォルダを1つ深くもぐると、URLにも /kuku のように1つ足される。地図のルールが分かれば、知らないアプリでも「このページはどのファイル？」がたどれるようになるよ。
手を動かして、このアプリの「地図」を自分で描いてみよう。紙とえんぴつを用意してね。
- エディタ（VS Code）で、このリポジトリの
app/フォルダを開く - 中にある
page.tsxという名前のファイルを、ぜんぶ探す - 見つけた
page.tsxごとに「このファイルはどのURL？」を、紙の地図に書き出す - ローカル（
localhost:3000）で、一覧（/）と九九（/kuku）が、その地図どおりのURLで開くか確かめる
💡 AIに聞いてみよう：「
page.tsx という名前のファイルは、何のためにあるの？」とAIに聞いてみよう。自分の地図と答え合わせができるよ。
- 素のHTMLだと、ページが増えたとき何がこまる？（→ 同じ部品を全ページにコピペすること）
- フレームワークは何を助けてくれる？（→ 部品の使い回しと、ページの管理）
- Next.js では、URLは何で決まる？（→ ファイルの置き場所）
つぎの回（だい19）では、その地図に自分のページを1まい足して、新しいURLを自分で作ってみます。