Nuxt.js & Contentfulでハイスペックなポートフォリオサイトを超簡単に公開しよう！【JAMstack】

Nuxt.jsを用いた静的サイト生成の方法を学ぶことに加え、ヘッドレスCMSのContentfulと連携させることでJAMstackサイト制作のスキルを学ぶ。教材内では、記事一覧ページ、個別記事ページの作成に加え、タグ機能、検索機能といった汎用的な機能の実装も学ぶ。

0-3

設計

この教材では以下のページ構成を持つポートフォリオサイトを作成します。

ページ	表示
トップページ	作品一覧を表示
作品個別ページ	各作品に関する詳細情報を表示（スラッグをもとに各作品を特定する）
カテゴリページ	特定のカテゴリに属する作品の一覧を表示
タグページ	特定のタグを持つ作品の一覧を表示
検索結果ページ	特定のキーワードを含む作品の一覧を表示

今回はデータベースを位置から用意する代わりに、Contentfulに作品のデータを作成していきます。

それぞれの作品データには、以下のフィールドを持たせます。

フィールド名	説明
Title	記事のタイトル
Slug	記事のスラッグ
Subtitle	記事のサブタイトル
Date	作成日時
Category	カテゴリ
Tags	タグ（複数登録可）
Content	記事本文
Image	記事のサムネイル画像

今回は個別ページで該当の作品データを取得する際、スラッグ（Slug）を用いることにします。スラッグとはサイト内の特定のページを識別するためのURLの一部のことです。例えば、JAM stackブログの制作方法についてのページであれば、「jam-stack-blog-dev」のように、キーワードをつなげた形で作ることが多いです。もちろん、各個別記事にIDを振って識別してもいいのですが、スラッグの方が直観的に意味が通るので、SEOの観点からより有効であるとされています。

なお、カテゴリフィールド、タグフィールドについては、Nameという１つのフィールドを持つカテゴリ、タグのデータを別個に作成した上で、それらを参照する形で設定することになります。

例えば、ショートケーキの作り方に関する記事に「デザート」というカテゴリと「イチゴ, 生クリーム」というタグをつけたい場合には、デザートというNameを持つカテゴリのデータ、イチゴ, 生クリームというNameをそれぞれ持つ２つのタグデータを予め作成しておいて、記事データのカテゴリフィールドとタグフィールドのそれぞれにおいて、各データのIDを指定することになります。詳しい設定方法は、第１章で学ぶので、この時点でよく分からなくても大丈夫です。