LESSON 05 · 約26分

ページ・レイアウト・リンクをつなぐ

ファイルからURLを作り、共通の外枠を再利用します。

コードを試す前に

02で作成する基本プロジェクトが前提です。各コード例は独立した学習用の例です。

各コードは独立した学習用の例で、すべてを順に一つのプロジェクトへ上書きする形式ではありません。同じレッスン内の対応ファイルは組み合わせます。依存関係・入力ファイル・実行条件は各noteに記載します。

開発環境の準備を確認する →

このレッスンでわかること

src/pagesの構造とURLを対応づけられる
共通のtitle・ナビゲーションをレイアウトにまとめられる

ページの場所がURLになる

src/pages/index.astroは/、src/pages/about.astroは/about、src/pages/notes/index.astroは/notesに対応します。拡張子.astroは公開URLには含めません。末尾のスラッシュの扱いは設定とホスティングに合わせ、例では同じ書き方にそろえます。

レイアウトは普通のAstro部品

共通のhtml、head、body、ナビゲーションなどをBaseLayout.astroにまとめます。Astroではlayoutsフォルダーに置いただけで自動適用されません。各ページがレイアウトをimportし、slotへ本文を渡します。Next.jsのlayout.jsという特別な規約と混同しないでください。

移動はまずaタグから

<a href="/about/">でページ間を移動できます。通常は新しいページのHTMLを読み込む動作です。アプリ風の遷移や状態維持を追加する機能もありますが、この教材の基本演習では導入しません。URLを直接開いても同じページへ到達できることが大切です。

headと本文の役割

titleはブラウザーのタブや検索結果の候補、descriptionはページの説明に使われます。これらは本文のh1とは別に設定します。lang="ja"やviewport、意味のある見出し、現在地が分かるナビゲーションも、使いやすさの土台です。

共通の外枠

src/layouts/BaseLayout.astro

---
const { title, description = '旅の記録をまとめたサイトです。' } = Astro.props;
---
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title} | 旅のメモ</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <nav aria-label="メイン"><a href="/">ホーム</a> <a href="/about/">このサイト</a></nav>
    <main><slot /></main>
    <footer>旅のメモ</footer>
  </body>
</html>

src/layoutsを作り、このファイルを保存します。基本演習ではbase設定なし、通常のフルページ移動を前提にします。

ページから明示的に使う

src/pages/about.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="このサイトについて" description="旅のメモの目的を紹介します。">
  <h1>このサイトについて</h1>
  <p>週末に訪れた場所を記録しています。</p>
</BaseLayout>

同じレッスンのBaseLayout.astroと組み合わせる例です。

TRY IT YOURSELF

二つのページを行き来する

index.astroとabout.astroで同じBaseLayoutを使う
ページごとにtitleとh1を変える
リンク、直接URL入力、再読み込みをそれぞれ試す

できたらOK：URLとタブのタイトルがページごとに正しく変わる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。