PUBLIC_MICROCMS_SERVICE_DOMAIN=<YOUR_SERVICE>
PUBLIC_MICROCMS_API_KEY=<YOUR_API_KEY>

npm install microcms-js-sdk

// SDK利用準備
import type { MicroCMSListContent, MicroCMSQueries } from "microcms-js-sdk";
import { createClient } from "microcms-js-sdk";
 
// クライアントの作成
const client = createClient({
  serviceDomain: import.meta.env.PUBLIC_MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.PUBLIC_MICROCMS_API_KEY,
});
 
// 型定義
export type Books = {
  title: string;
  review: string;
  url: string;
  cover: string;
  author: string;
  category: BooksCategory;
  publishedDate: Date;
  postlink: string;
} & MicroCMSListContent;
 
export type BooksCategory = {
  name: string;
  slug: string;
} & MicroCMSListContent;
 
// 本の一覧を全件取得
export const getBooks = async (queries?: MicroCMSQueries) => {
  return await client.getAllContents<Books>({ endpoint: "books", queries });
};
 
// カテゴリーの一覧を取得
export const getBooksCategory = async (queries?: MicroCMSQueries) => {
  return await client.getList<BooksCategory>({ endpoint: "category", queries });
};

---
import MainGridLayout from "@/layouts/MainGridLayout.astro";
import { getBooks, getBooksCategory } from "@/scripts/library/microcms";
 
// 本リストとカテゴリーを取得
const books = await getBooks({ fields: ['id', 'title', 'cover', 'category']});
const categories = await getBooksCategory({ fields: ['id', 'name', 'slug']});
---
 
<MainGridLayout>
  <ul class="category__list card-base">
    {categories.contents.map((category) => (
      <li class="category__item">
        <a class="category__link btn-regular" href={`/book/category/${category.slug}`}>
          {category.name}
        </a>
      </li>
    ))}
  </ul>
  <ul class="book__list">
    {books.map((book) => (
      <li>
        <a class="book__card" href={`/book/${book.id}`}>
          <div class="book__card-img">
            <img src={book.cover} alt={book.title} />
          </div>
          <div class="book__card-title">
            {book.title}
          </div>
        </a>
      </li>
    ))}
  </ul>
</MainGridLayout>

export const getBooksDetail = async (
  contentId: string,
  queries?: MicroCMSQueries
) => {
  return await client.getListDetail<Books>({
    endpoint: "books",
    contentId,
    queries,
  });
};

---
import MainGridLayout from "@/layouts/MainGridLayout.astro";
import { getBooks, getBooksDetail } from "@/scripts/library/microcms";
import { Icon } from "astro-icon/components";
 
// 詳細記事ページの全パスを取得
export async function getStaticPaths() {
  const response = await getBooks({ fields: ['id'] });
  return response.map((content) => ({
    params: { bookId: content.id },
  }));
}
 
// 詳細記事ページのデータを取得
const { bookId } = Astro.params;
const book = await getBooksDetail(bookId as string);
// 日付をフォーマット
const date = new Date(book.publishedDate as Date);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
---
 
<MainGridLayout>
  <div class="book__detail card-base">
    <h1 class="book__detail-title">{book.title}</h1>
    <div class="book__detail-body">
      <div class="book__detail-right">
        <a href={book.url} class="book__detail-img" target="_blank">
          <img src={book.cover} alt={book.title} />
        </a>
        <div class="book__detail-links">
          <a href={book.url} class="book__detail-link btn-regular" target="_blank">Amazon</a>
          {book.postlink && (
            <a href={`/blog/${book.postlink}`} class="book__detail-link btn-regular">記事を見る</a>
          )}
        </div>
      </div>
      <dl class="book__detail-info">
        <div class="book__detail-info-category-wrap">
          <a href=`/book/category/${book.category.slug}` class="book__detail-info-category">
            {book.category.name}
          </a>
        </div>
        <div class="book__detail-info-item">
          <dt>著者</dt>
          <dd>{book.author}</dd>
        </div>
        <div class="book__detail-info-item">
          <dt>発売日</dt>
          <dd>{`${year}年${month}月${day}日`}</dd>
        </div>
        <div class="book__detail-info-body" set:html={book.review}></div>
      </dl>
    </div>
    <div class="book__detail-bottom-link-wrap">
      <a href="/book" class="book__detail-bottom-link">
        <span class="link__icon">
          <Icon name="material-symbols:chevron-left-rounded" />
        </span>
        <span class="book__detail-bottom-link-text">読んだ本リストに戻る</span>
      </a>
    </div>
  </div>
</MainGridLayout>

---
import MainGridLayout from "@/layouts/MainGridLayout.astro";
import { getBooks, getBooksCategory } from "@/scripts/library/microcms";
 
// カテゴリー別のパスを取得
export async function getStaticPaths() {
  const response = await getBooks({ fields: ['id', 'category'] });
 
  return response.map((content) => ({
    params: { slug: content.category.slug },
    props: {
      categoryId: content.category.id,
      slug: content.category.slug,
      name: content.category.name,
    },
  }));
}
 
const { categoryId, slug, name } = Astro.props;
 
// カテゴリー別の本のリストを取得
const books = await getBooks({
  fields: ['id', 'title', 'cover', 'category'],
  filters: `category[equals]${categoryId}`
});
 
const categories = await getBooksCategory({ fields: ['id', 'name', 'slug']});
---
 
<MainGridLayout>
  <ul class="category__list card-base">
    {categories.contents.map((category) => (
      <li class="category__item">
        <a class="category__link btn-regular" href={`/book/category/${category.slug}`}>
          {category.name}
        </a>
      </li>
    ))}
  </ul>
  <ul class="book__list">
    {books.map((book) => (
      <li>
        <a class="book__card" href={`/book/${book.id}`}>
          <div class="book__card-img">
            <img src={book.cover} alt={book.title} />
          </div>
          <div class="book__card-title">
            {book.title}
          </div>
        </a>
      </li>
    ))}
  </ul>
</MainGridLayout>

<div class="post-book-area card-base">
  <h2>PR</h2>
 
  <ul class="post-book-area__list"></ul>
</h2>
 
<script>
  import { getBooks } from "@/scripts/library/microcms";
 
  const allBooks = await getBooks({ fields: ['title', 'cover', 'url'] });
  const randomBooks = allBooks.sort(() => Math.random() - 0.5).slice(0, 4);
  const bookList = document.querySelector(".post-book-area__list");
 
 
  if (randomBooks && bookList) {
    bookList.innerHTML = randomBooks.map((book) => `
      <li class="post-book-area__item">
        <a class="post-book-area__link" href="${book.url}" target="_blank">
          <div class="post-book-area__img">
            <img src="${book.cover}" alt="${book.title}" />
          </div>
          <div class="post-book-area__title">${book.title}</div>
        </a>
      </li>
    `).join('');
  }
</script>

---
import PostBookArea from "@/components/PostBookArea.astro";
---
 
<MainGridLayout>
  <div class="article card-base">
    <MarkdownBody>
      <Content components={{ img: Figure }} />
    </MarkdownBody>
 
  <div class="post-book-area">
    <PostBookArea />
  </div>
 
</MainGridLayout>