🧠 概要：
概要
この記事では、WordPressとAstro.jsを利用してヘッドレスCMSを構築するプロセスの一部として、記事ページの作成方法について解説しています。特に、AstroのgetStaticPaths()関数を使用して動的なページを生成し、記事データを取得する方法に焦点を当てています。また、実際のコードとその意味、そして発生した課題についても述べています。
要約の箇条書き
- 記事ページの作成開始: Astroを使い、記事ページを作成することについて説明。
- getStaticPaths() の説明: ビルド時にどのページを生成するか指示する関数。
- パン屋の例: 予約を受けて焼くパンの数を決めることで、静的ページ生成の概念を説明。
- 実際のコード例: APIから記事情報を取得し、各記事のスラッグをリスト化するコードを示す。
- Astro.propsの説明: 渡されたデータをどのように取り扱うかに関する説明。
- HTML表示の準備: 記事に関するデータを用意し、タイトルや内容を表示するHTMLの基本を記述。
- ページビルドと確認:
npm run buildコマンドでビルドし、npx astro previewで結果を確認する方法。 - 発生した問題: 記事ページが表示されない問題に直面し、その原因として日本語のスラッグに言及。
- 修正と成功: 英語のスラッグに修正後、無事に記事が表示されるようになったことを報告。
さてさて、ようやく各記事ページの作成にいきます！
記事ページの作成
記事ページを作成する時は、Astro では getStaticPaths() という関数を使用します。
getStaticPaths() とは？
getStaticPaths() はビルド時に「どのページを作るか教える関数」です。
Astroで /blog/[slug].astro のような「動的ページ」を使うときは、あらかじめ何個ページが必要かを教える必要があります。
パン屋に例えると…
◆お客さんから予約が入る：
⇒「くるみパン1つ、チョコパン1つ、メロンパン2つお願い！」
◆この情報をもとに：
⇒朝、あらかじめ必要な個数だけ焼いておく（＝静的に生成しておく）
みたいな感じです😊
これを Astro に当てはめると
となります。
ビルド時の流れとしては
-
APIから全記事の情報を取得する
-
それぞれのスラッグ（URLの一部）をリスト化する
-
そのリストをもとに、Astroがビルド時にページを作る
という感じです。
実際のコード
それを踏まえて実際のコードを書くと、まずデータの取得部分は、
---
export async function getStaticPaths() {
const res = await fetch('http://headless.local/wp-json/wp/v2/posts');
const posts = await res.json();
return posts.map(post => ({
params: { slug: post.slug },
props: { post }
}));
}
const { post } = Astro.props;
---となります。
return の内容は、.map で posts の中身を個別に処理するようにして、
となります。
Astro.propsとは？
const { post } = Astro.props;については、ちょっと分かりにくい感じですな（こういうもの！と憶えてしまうのもありではありますが）。
これは
「Astro が props（渡されたデータ）を持っていて、その中の post というデータを取り出す」
ということです。
宅配ボックスに例えると…
-
Astro.props は「宅配ボックス」です
-
その中には WordPress から届いた「記事データ（post）」が入ってます。
-
const { post } = Astro.props は、「その post という荷物だけを取り出す」ことを意味しています。
const all = Astro.props;
const { post } = Astro.props;上記のような書き方で、全てを取り出したり、必要なデータだけを取り出したりできます。
propsはどこから来るのか？
これは getStaticPaths() で props: { post } と指定したデータとなります！
return posts.map(post => ({
params: { slug: post.slug },
props: { post }
}));つまり、「この slug のページには、この post データを渡すよ！」と決めた感じです😃
なので、html の方で post の中身を使う時に、ます post を取り出しておく必要があります。
そこで初めて
---
const { post } = Astro.props;
---
このような記述が成り立つのです。
htmlに展開する
データは用意出来たの、html を書きましょう！
---
export async function getStaticPaths() {
const res = await fetch('http://headless.local/wp-json/wp/v2/posts');
const posts = await res.json();
return posts.map(post => ({
params: { slug: post.slug },
props: { post }
}));
}
const { post } = Astro.props;
---
{post.title.rendered}
ひとまずは簡素なページですが、タイトルと中身だけ表示させるようにします。
ページの確認
そしたらページ一覧からサクッと記事ページに飛んでみましょう！
すると…
おおう…。
何故だ！と思いましたが、Astro は getStaticPaths() を使ってビルド時にページを作るんでした😅
ビルドしてみよう！
npm run buildと叩いて、[build] Complete! と出れば成功です！
ついでに何ページビルドしたかとかも表示されますね。
[build] 7 page(s) built in 5.25s
こんな感じで。
そしたらば
npx astro previewとターミナルで打って、確認してみましょう！
そしてページを見にいくと…
おおう…
何故だ😭
各記事ページは dist にビルドされているのに、何故かページが表示されない！
表示されている Path に直接アクセスしても結果は404。
う～む、どういうこったい！
ひょっとして、slug名が日本語なのがいけないのかな？と思って、chatGPT先生に聞いてみると、
「はい、結論から言うとその通りです」
とのこと😭
本番環境にデプロイした場合は、本番サーバーは URL エンコード文字列を正しく扱えるようになっているため問題なくアクセスできるみたいだが、いや、開発中に確認出来ないのは困ります～😥
という訳で、wordpress側でスラッグをちまちまと英語に直してきました！
そして再度記事を見にいくと…
ばっちりと記事が表示されました！！！（写真には私が移っているので、見せられず…🙇）
Views: 0
