<p>この備忘録ブログを最初に作ったときは<strong>Next.js（Pages Router）</strong>を採用していましたが、このたび心機一転、<strong>Astro v5</strong> へリニューアル中です🎈</p><p>前回の「<a href="https://841-biboroku.info/entry/astro-v5-content-loader-zod/">ブログをAstro v5 Content Loader API・microCMSにリニューアル - Zodの型定義編 -</a>」に続き、今回は記事詳細ページの実装をまとめます。</p><p>Content Layer APIを使うことで、型安全かつ高速なページ生成が実現。</p><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://841-biboroku.info/entry/astro-v5-content-loader-zod/" data-iframely-url="https://cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2F841-biboroku.info%2Fentry%2Fastro-v5-content-loader-zod%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script>

<h2 id="h31f45652bc">動的に記事詳細ページを生成</h2><p>動的パラメータを定義するためファイル名を<code>[path].astro</code>で作成（ファイル名は任意。slugなどでもOK）。</p><h2 id="h423ed66dc2">型定義の準備</h2><p>前回作成した<code>content.config.ts</code>で作成したスキーマを詳細ページでも使い回せるように <code>export</code> しておきます。</p>

export const ArticleSchema = z
  .object({
      // 各フィールドの型
  })
  .merge(microCMSContentIdScheme)
  .merge(microCMSDateScheme);

<h2 id="h96a1a225f0">getCollectionで全記事の展開</h2><h3 id="h68c1283c92">1. 全データの取得</h3><p><code>content.config.ts</code>で設定したローカルキャッシュ（Content Layer）から、<code>getCollection</code>で全記事のデータを配列で取得します。</p><p>すでに取得済みのデータを使うため、再fetchする必要がありません。</p>

export async function getStaticPaths() {
  const articles = await getCollection("articles");
  return articles.map((article) => ({
    params: { path: article.data.フィールド },
    props: { article },
  }));
}

<h3 id="he3feee3415">2. URL（パス）の指定</h3><p><code>params</code>にmicroCMS側で設定した一意の値を登録しているフィールドを使ってURLに使うパラメータを指定します。</p><h3 id="h27caedb639">3. データの受け渡し</h3><p><code>props</code>にgetCollectionで取得した記事データをそのまま渡します。</p><h2 id="hf1631bb17f">Zodの型をそのまま使う</h2><p><code>CollectionEntry</code>を使うことでZodで定義したバリデーション済みの型がそのまま反映されるので、安全で便利です✨</p><p>👉 <a href="https://docs.astro.build/en/reference/modules/astro-content/#collectionentry" target="_blank" rel="noopener noreferrer nofollow">Astro公式のCollectionEntry</a></p>

import { getCollection, type CollectionEntry } from "astro:content";

interface Props {
  article: CollectionEntry<"articles">;
}

<h2 id="h78d3b33432">コンテンツの展開</h2><p>あとは<code>Astro.props</code>で受け取って、各フィールドを展開するだけです。</p><p>定義したフィールドが補完されるので実装がスムーズです。</p>

const { article } = Astro.props;
const { publishedAt, title, 他のフィールド} = article.data;

<h2 id="ha214098e44">まとめ</h2><p>今回は記事詳細ページを中心にまとめました。</p><p>型定義やコンテンツキャッシュを活用してデータを再利用することで、とてもシンプルに出力できました😇</p><p>次回は、記事一覧ページについて書きたいと思います。</p><p></p>

ブログをAstro v5 Content Loader API・microCMSにリニューアル - 記事詳細ページ編 -

<p>microCMSの公式ブログの「AstroとmicroCMSでブログサイトを作ってみよう（Astro 5以降のコンテンツローダー対応版）」を参考にAstro v5でこの備忘録ブログをりにゅアール中。<br><a href="https://blog.microcms.io/astro5-microcms-introduction" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/astro5-microcms-introduction</a><br>ほぼ記事のまま自身のmicroCMSのAPI設定に置き換えるだけ。<br>今回の記事では型定義とcollectionで記事取得まで　何回かにわけて記事を書こうと思います。</p><h2 id="hc9a34d5296">型定義</h2><h3 id="h90b609610a">microCMSの日付・画像の型定義</h3><p>まだ試せてないですが下書き記事を取得するときのために.nullableI()をつけています。（検証したら内容を更新します）</p><pre><code>// 共通のフィールド
const microCMSDateFields = {
  createdAt: z.string().datetime(),
  updatedAt: z.string().datetime(),
  publishedAt: z.string().datetime().nullable(),
  revisedAt: z.string().datetime().nullable(),
};</code></pre><p>microCMSの画像データの形をZodで定義して、satisfies で条件を満たしているかチェック</p><pre><code>
// microCMS画像フィールドのスキーマ
const MicroCMSImageSchema = z.object({
  url: z.string().url(),
  width: z.number(),
  height: z.number(),
  alt: z.string().optional().default(""),
}) satisfies z.ZodType&lt;Partial&lt;MicroCMSImage&gt; &amp; { alt?: string }&gt;;</code></pre><h2 id="h3f6cd11dc1">よく使うzodの型指定</h2><p>途中ですがここでよく使うzodをおさらい<br><strong>データの内容</strong><br><strong>Zodの書き方 (z.)</strong><br><strong>TypeScriptでの型</strong><br><strong>数値</strong><br><code>z.number()</code><br><code>number</code><br><strong>整数（小数不可）</strong><br><code>z.number().int()</code><br><code>number</code><br><strong>文字列</strong><br><code>z.string()</code><br><code>string</code><br><strong>真偽値</strong><br><code>z.boolean()</code><br><code>boolean</code><br><strong>日付</strong><br><code>z.date()</code><br><code>Date</code><br><strong>配列</strong><br><code>z.array(z.string())</code><br><code>string[]</code><br><strong>どれか一つ（列挙型）</strong><br><code>z.enum(["red", "blue"])</code><br><code>"red" | "blue"</code><br><strong>未定義を許容</strong><br><code>.optional()</code><br><code>?</code> (optional)<br><strong>nullを許容</strong><br><code>.nullable()</code><br><code>| null</code><br></p><h2 id="hcb70fed5cb">カスタムフィールドの型を定義</h2><p>microCMSのフィールドの種類・戻り値に合わせて定義する</p><h3 id="h20d64b30e9">カスタムフィールドID（fieldId）</h3><p>stirng()でもエラーは出ませんが、literalで指定しました。</p><pre><code>const MetadataSchema = z.object({
  fieldId: z.literal("metadata"),
  title: z.string().optional(),
  description: z.string().optional(),
});</code></pre><h2 id="hbef1934a4f">種類：セレクトフィールド</h2><p>複数選択がONでもOFFでも戻り値が配列のためarray()とします。<br>enumで選択肢を指定します。</p><pre><code>const HighlightSchema = z.object({
  lang: z
    .array(
      z.enum([
        "javascript",
        "tsx",
        "typescript",
        "jsx",
      ]),
    )
    .optional(),
})</code></pre><h2 id="h3eae2c2e54">種類：複数画像</h2><p>miroCMS画像用の型定義をそのままarray()に入れます</p><pre><code>const GallerySchema = z.object({
&nbsp; images: z.array(MicroCMSImageSchema).optional(),
})</code></pre><h2 id="h27ff54e42f">コンテンツAPIのAPIスキーマの型定義</h2><p>すでに作成したカスタムフィールドの型と組みあわせてAPIスキーマの型定義をします。</p><h3 id="h91b5cd60c9">カテゴリー用</h3><p>共通の日付はmicroCMSDateFieldsをスプレっと構文で展開</p><pre><code>// 各コレクションのスキーマ定義
const CategorySchema = z.object({
  title: z.string(),
  slug: z.string(),
  ...microCMSDateFields,
});</code></pre><h3 id="hc678767a27">記事用</h3><p>種類：複数コンテンツ参照<br>先に定義したカテゴリー用のCategorySchemaを使います。<br>複数参照するのでarray()</p><h4 id="h461bf6ac09">種類：繰り返し</h4><p>どれか1つの形＝カスタムフィールドに当てはまればOKなのでunion()に使えるカスタムフィールドを配列で代入。<br>繰り返しなのでarray()でwrap.<br>必須にしているのでnonempty()を指定しています<br>種類：カスタム<br>単一のカスタムフィールドです。<br>任意のフィールドだけで構成されてますが、未登録の場合でもfieldIdのみ帰ってくるので.optional()をつけずMetadataSchemaのみを指定してます。</p><pre><code>const ArticlesSchema = z.object({
//略
  category: z.array(CategorySchema),
  section: z
    .array(
      z.union([
        HighlightSchema,
        GallerySchema,
       //他の選択肢（カスタムフィールド）
      ]),
    )
    .nonempty(),
  metadata: MetadataSchema,
  ...microCMSDateFields,
});</code></pre><h2 id="h6ab966b81a">AstroのContent Collectionを定義する</h2><p>microCMSLoaderの中でmicrocms-sdkのgetAllContents()を使って全件取得しているので１回で全部取得できる</p><pre><code>export const collections = {
  articles: defineCollection({
    loader: microCMSLoader("記事用のエンドポイント"),
    schema: articleSchema,
  }),
  categories: defineCollection({
    loader: microCMSLoader("カテゴリ用のエンドポイント"),
    schema: categorySchema,
  }),
};</code></pre><p>次回は記事の出力について書く予定です。</p>

<p>この備忘録ブログを最初に作ったときは<strong>Next.js（Pages Router）</strong>を採用していましたが、このたび心機一転、<strong>Astro v5</strong> へリニューアル中です🎈</p><p>今回は、microCMS公式ブログの「<a href="https://blog.microcms.io/astro5-microcms-introduction" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSでブログサイトを作ってみよう（Astro 5以降のコンテンツローダー対応版）</a>」を参考に進めています。</p><p>基本的には公式記事に沿って進めればOKですが、自身のmicroCMSのAPI設定に合わせてカスタマイズした部分（特にZodでの型定義）を中心に、備忘録としてまとめておきます。</p><p>今回は「型定義」と「Content Layerでの取得設定」までを進めました。</p><h2 id="h6bf967ea81">共通フィールドの型定義</h2><p>microCMSの全コンテンツに共通する日付フィールドやコンテンツIDなどの型を定義します。</p>


// microCMSIDフィールドのスキーマ
export const microCMSContentIdScheme = z.object({
  id: z.string(),
}) satisfies z.ZodType<MicroCMSContentId>;

// microCMS日付フィールドのスキーマ
const microCMSDateScheme = z.object({
  createdAt: z.string().datetime(),
  updatedAt: z.string().datetime(),
  publishedAt: z.string().datetime().optional(),
  revisedAt: z.string().datetime().optional(),
}) satisfies z.ZodType<MicroCMSDate>;

<h3 id="h370ce1d1b3">画像データの型定義</h3>

// microCMS画像フィールドのスキーマ
const MicroCMSImageSchema = z.object({
  url: z.string().url(),
  width: z.number(),
  height: z.number(),
  alt: z.string().optional().default(""),
}) satisfies z.ZodType<Partial<MicroCMSImage> & { alt?: string }>;

<h2 id="h2443cdda5b">【おさらい】よく使うZodの型指定</h2><p>設定中に「これなんだっけ🤔？」となりがちな、Zodの書き方とTypeScript型の対応表です。</p><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>データの内容</strong></p></th><th colspan="1" rowspan="1"><p><strong>Zodの書き方(z.)</strong></p></th><th colspan="1" rowspan="1"><p><strong>TypeScriptでの型</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p>数値</p></td><td colspan="1" rowspan="1"><p><code>number()</code></p></td><td colspan="1" rowspan="1"><p><code>number</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>整数（小数不可）</p></td><td colspan="1" rowspan="1"><p><code>number().int()</code></p></td><td colspan="1" rowspan="1"><p><code>number</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>文字列</p></td><td colspan="1" rowspan="1"><p><code>string()</code></p></td><td colspan="1" rowspan="1"><p><code>string</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>真偽値</p></td><td colspan="1" rowspan="1"><p><code>boolean()</code></p></td><td colspan="1" rowspan="1"><p><code>boolean</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>日付</p></td><td colspan="1" rowspan="1"><p><code>date()</code></p></td><td colspan="1" rowspan="1"><p><code>Date</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>配列</p></td><td colspan="1" rowspan="1"><p><code>array(z.string())</code></p></td><td colspan="1" rowspan="1"><p><code>string[]</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>列挙型</p></td><td colspan="1" rowspan="1"><p><code>enum([&quot;a&quot;, &quot;b&quot;])</code></p></td><td colspan="1" rowspan="1"><p><code>&quot;a&quot; | &quot;b&quot;</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>未定義を許容</p></td><td colspan="1" rowspan="1"><p><code>.optional()</code></p></td><td colspan="1" rowspan="1"><p><code>?</code> (optional)</p></td></tr><tr><td colspan="1" rowspan="1"><p>nullを許容</p></td><td colspan="1" rowspan="1"><p><code>.nullable()</code></p></td><td colspan="1" rowspan="1"><p><code>| null</code></p></td></tr></tbody></table>

<h2 id="hc2318b1834">カスタムフィールドの型を定義する</h2><p>microCMSで作成したカスタムフィールドに合わせて、個別にスキーマを作成します。</p><h3 id="h118510576e">1. カスタムフィールドID（fieldId）</h3><p><code>string()</code> でも動作しますが、より厳密にするために<code>.literal</code>でフィールドIDを指定しています。</p>

const MetadataSchema = z.object({
  fieldId: z.literal("metadata"),
  title: z.string().optional(),
  description: z.string().optional(),
});

<h3 id="hbffea6cdd7">2. セレクトフィールド（複数選択）</h3><p>複数選択がONでもOFFでも、APIからの戻り値は配列（array）になります。</p>

const HighlightSchema = z.object({
  // 略
  lang: z.array(
    z.enum(["javascript", "tsx", "typescript", "jsx"])
  ).optional(),
});

<h3 id="he0a34218a9">3. 繰り返しフィールド</h3><p>「繰り返し」は、定義したカスタムフィールドのいずれかに当てはまれば良いため、<code>z.union</code>を使って定義し、全体を<code>z.array</code>で囲みます。</p>

const sectionSchema = z.array(
  z.union([
    HighlightSchema,
    GallerySchema,
    // 他のカスタムフィールドもここに追加
  ])
).nonempty(); // 必須項目の場合はnonempty()

<h2 id="h1dc61d89ea">コンテンツAPIのスキーマを定義</h2><p>これまでに作った部品を組み合わせて、最終的なコレクションのスキーマを完成させます。</p><h3 id="h91b5cd60c9">カテゴリー用</h3><p>作成したフィールドにmicroCMSの日付・コンテンツIDの型をマージします。</p>

const CategorySchema = z.object({
  title: z.string(),
  slug: z.string(),
})
.merge(microCMSContentIdScheme)
.merge(microCMSDateScheme);

<h3 id="h5655b62634">記事（Articles）用</h3><p>「複数コンテンツ参照」のカテゴリーや、先ほどの「繰り返しフィールド」を組み込みます。</p>

const ArticlesSchema = z.object({
  // 略
  title: z.string(),
  category: z.array(CategorySchema), // 複数参照なのでarray
  section: sectionSchema,
  metadata: MetadataSchema, // 未入力でもfieldIdは返るのでoptionalなし(※1)
})
.merge(microCMSContentIdScheme)
.merge(microCMSDateScheme);

<p>※1…エラーが出る場合は<code>.optional()</code>か<code>.nullable()</code>を追加<br>一部記事で戻り値がnullになっているデータがありました。途中でカスタムフィールドを追加したからなのか、戻り値の仕様が途中で変わったのか定かではありません。<br>一度該当フィールドにデータを入れて公開⇒削除して公開するとnullからオブジェクトに変わりました。</p>

<h2 id="h4c10cd8a06">AstroのContent Collectionを設定する</h2><p>最後に<code>src/content/config.ts</code>で、Astro v5の<code>loader</code>を使って定義します。</p>

export const collections = {
  articles: defineCollection({
    loader: microCMSLoader({
      endpoint: "articles", // 記事用のエンドポイント
    }),
    schema: ArticlesSchema,
  }),
  categories: defineCollection({
    loader: microCMSLoader({
      endpoint: "categories", // カテゴリ用のエンドポイント
    }),
    schema: CategorySchema,
  }),
};

<p>このローダー関数の中で <code>getAllContents()</code> を使って全件取得してくれているので、個別に取得ロジックを書く必要がなく、とても簡単です🎉</p><p><span class="txt-small">※この関数は、冒頭でも紹介した </span><a href="https://blog.microcms.io/astro5-microcms-introduction" target="_blank" rel="noopener noreferrer nofollow"><span class="txt-small">microCMSの参考ブログ記事</span></a><span class="txt-small"> から引用させていただきました。</span></p><h2 id="ha214098e44">まとめ</h2><p>今回は型定義を中心にまとめました。</p><p>Zodでしっかり型を固めておくと、コンポーネント側でデータを使う時に補完が効いて開発がとても楽になりそうです😇</p><p>次回は、これらのデータを使って実際に記事画面を出力する部分について書きたいと思います。</p><p></p><p><strong>📝参考サイト</strong></p><ul><li><a href="https://docs.astro.build/ja/reference/content-loader-reference/" target="_blank" rel="noopener noreferrer nofollow">Astro Content Loader API</a></li><li><a href="https://blog.microcms.io/astro5-microcms-introduction" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSでブログサイトを作ってみよう（Astro 5以降のコンテンツローダー対応版）</a></li><li><a href="https://evoworx.dev/blog/microcms_astro-content-layer/" target="_blank" rel="noopener noreferrer nofollow">Content Layer APIで進化したAstro×microCMSのブログ構築</a></li></ul>

ブログをAstro v5 Content Loader API・microCMSにリニューアル - Zodの型定義編 -

<p>Newtに登録しているものの最近はmicroCMSばかり使っていたので、久々に使ってみることに。<br>このサイトの記事はmicroCMSを使っているので同じフィールド構成でNewtを使って実装した備忘録。<br>microCMSからNewtへ置き換えたときの違いやNewtのいいところ・うれしいことをまとめた。<br>※この記事はNewtの登録から初期設定などの説明は含まない<br>モデルとフィールドの構成は以下の通り（一部フィールド除く）<br>モデル＝microCMSでのコンテンツ（API）<br>フィールド＝microCMSのAPIスキーマ<br>&lt;記事&gt;<br>タイトル<br>スラッグ<br>カテゴリー<br>サムネイル画像<br>セクション<br>メタデータ<br>&lt;カテゴリ&gt;<br>タイトル<br>スラッグ<br>イメージカラー<br>Newtのフィールドでうれしいポイント<br>・フリープランでもフィールドの種類が豊富<br>テキスト、エディタ、画像などはもちろんのことマークダウン・ファイル・地図・埋め込みなどがある<br>Newtのメディアでうれしいポイント<br>・メディアに情報が設定できる<br>画像にタイトル・代替テキスト・説明・タグなどが設定できるのでalt用の専用のフィールドを作る必要がない<br>記事の編集画面から変更できたらうれしいな...<br>フィールドで設定できることが多い！<br>かゆいところに手が届く<br>ここが変わったらうれしい<br>フィールド設定した画面に必須項目になってるかどうかが見える化されるとうれしい<br>カスタムフィールドなど入力画面がポップアップなので、外クリックしたときに入力途中までしていたデータが消えるので位置から登録しないといけないのが辛い。<br>リッチテキストをただのプレーンテキストエリアで使うとき、全部無効にするためクリックするのが手間だから一括でOFFにする機能がるとうれしい<br>→間違えた！テキストが1行・複数行が選べるからこれがプレーンテキストとして使う　間違えがち<br>テーブルがない<br>嬉しい機能<br>カスタムフィールドの初期値が設定できる<br>アップロードした画像に対してタイトル・altが設定できる<br>フィールドの種類が多い<br>添付の種類が豊富（上限は50MB）<br>選択肢がラベルと値で設定できる。ただラベルは取得できないので、管理画面だけのもの。<br>型が用意されてる</p><ul><li>Content: コンテンツ共通のプロパティが定義されています</li><li>Image: 画像フィールドのプロパティが定義されています</li><li>File: ファイルフィールドのプロパティが定義されています</li></ul><p><br></p>

<p>Newtには登録していたものの、最近はmicroCMSばかり使っていました。そこで、久々に<a href="https://www.newt.so/" target="_blank" rel="noopener noreferrer nofollow">Newt</a>を使ってみることにしました。</p><p>このサイトの記事はmicroCMSを利用して作っています。この記事はmicroCMSと同じフィールド構成でNewtとAstroを使って実装した備忘録です。</p><p>また、microCMSからNewtへ置き換えた際の違いや、Newtの魅力・便利な点も合わせてまとめました。</p><p><span class="txt-small">※この記事では、Newtの登録や初期設定に関する説明は省略しています。</span></p>

<h2 id="h638b0e78b5">モデルとフィールド構成</h2><p>Newtでは、モデルとフィールドは以下のように構成しました（一部フィールドは除いています）。</p><ul><li><strong>モデル</strong>＝microCMSでいう「コンテンツ（API）」</li><li><strong>フィールド</strong>＝microCMSでいう「APIスキーマ（フィールド）」</li></ul><h3 id="h59904525d3">モデル：ブログ</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>フィールドの種類</p></th></tr><tr><td colspan="1" rowspan="1"><p>タイトル</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>スラッグ</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>カテゴリー</p></td><td colspan="1" rowspan="1"><p>参照（複数値）</p></td></tr><tr><td colspan="1" rowspan="1"><p>サムネイル画像</p></td><td colspan="1" rowspan="1"><p>画像</p></td></tr><tr><td colspan="1" rowspan="1"><p>セクション</p></td><td colspan="1" rowspan="1"><p>マルチタイプ（複数値）</p></td></tr><tr><td colspan="1" rowspan="1"><p>メタデータ</p></td><td colspan="1" rowspan="1"><p>マルチタイプ</p></td></tr></tbody></table><h3 id="h8996246fe1">モデル：カテゴリ</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>フィールドの種類</p></th></tr><tr><td colspan="1" rowspan="1"><p>タイトル</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>スラッグ</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>イメージカラー</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr></tbody></table><h2 id="h728eb3ccf2">Newtのフィールドのいいところ</h2><p>microCMSと似ている部分も多いNewtですが、異なるポイントもいくつかあります。ここではその違いに注目していきます。</p><h3 id="h59ae091fe2">単一と複数</h3><p>Newtでは、フィールドの種類に対して「単一」または「複数」を選択できる仕様になっています。<br>例えば、テキストフィールドの場合：</p><ul><li><strong>microCMSの場合</strong>：1行テキストとテキストエリアは別のフィールドとして用意されている。</li><li><strong>Newtの場合</strong>：テキストフィールドを選択した後に、「1行」または「複数行」を設定可能。</li></ul><p>この仕組みは画像や参照フィールドでも同様で、用途に応じて柔軟に選択できます。</p>

<h3 id="hb76587122e">メディア</h3><p>Newtでは、アップロードしたメディア自体に次のような情報を設定可能です。</p><ul><li><strong>タイトル</strong></li><li><strong>代替テキスト</strong></li><li><strong>説明</strong></li><li><strong>タグ</strong></li></ul><p>画像のalt用フィールドを別途作成する手間を省けます。さらに、画像フィールドに設定したメディアから、このmetadataを取得することもできます。</p><p>ただし、これらの情報は現在の仕様では<strong>メディア管理画面からしか編集できない</strong>ため、記事編集画面から直接編集できるとさらに便利だと感じました。</p>

<h3 id="h73f1d28c80">ファイル</h3><p>Newtではフリープランでもファイルのアップロードが可能です。</p>

<h3 id="h935070b9ac">選択フィールド</h3><ul><li><strong>Label</strong>（管理画面に表示される項目名）</li><li><strong>Value</strong>（戻り値として取得される値）</li></ul><p>LabelはAPIから取得することはできませんが、管理画面用に編集者がわかりやすい名前を設定できる点が便利です。</p>

<h3 id="h71c388d8f7">マルチタイプ</h3><p>Newtでは、microCMSでいう「繰り返しフィールド」が「マルチタイプ」として提供されています。</p><ul><li><strong>デフォルト値</strong>：初めからフィールドを表示させておくことが可能。</li><li><strong>表示タイプ</strong>：<ul><li>アコーディオン（デフォルトで閉じた状態、上下入れ替えがしやすい）</li><li>フラット（全て展開された状態、内容を一目で把握しやすい）</li></ul></li></ul><p>どちらを使うかは好みによりますが、それぞれ利点があるので用途に応じて選択するといいと思います。</p>

<h2 id="h36d3f57ef6">NewtのJavaScript SDK を使った記事表示</h2><p>Newtには <code>newt-client-js</code> というJavaScript SDKが提供されています。このSDKを利用して、記事データを取得し、ページに表示する方法を見ていきます。</p><pre><code>npm i newt-client-js</code></pre><h3 id="hc9a34d5296">型定義</h3><p>NewtのSDKでは、TypeScriptを活用できるよう、型が用意されています。これはmicroCMSのSDKで提供される型（例: <code>MicroCMSImage</code>, <code>MicroCMSContentId</code>, <code>MicroCMSDate</code>）に似ています。</p><blockquote><ul><li><strong>Content</strong>: コンテンツ共通のプロパティを定義した型。</li><li><strong>Image</strong>: 画像フィールドのプロパティを定義した型。</li><li><strong>File</strong>: ファイルフィールドのプロパティを定義した型。</li></ul><p><a href="https://www.newt.so/docs/js-sdk#TypeScript%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" target="_new">Newt JavaScript SDK - TypeScriptでの利用方法</a></p></blockquote><h3 id="hc25b523cee">クライアントの作成とコンテンツ一覧の取得</h3><p>NewtのJavaScript SDKを使用してクライアントを作成し、コンテンツ一覧を取得する関数を実装しました。</p>

import { createClient } from 'newt-client-js'

export interface Blog extends Content {
  title: string
  slug: string
  category: Category[]
  thumb?: Image
  section?: (Richeditor|HtmlCode|Highlight|Gallery)[]
  metadata?: Metadata
}

export const newtClient = createClient({
  spaceUid: import.meta.env.NEWT_SPACE_UID,
  token: import.meta.env.NEWT_CDN_API_TOKEN,
  apiType: 'cdn',
})

export const blogList = async() => {
  const {items} = await newtClient.getContents<Blog>({
    appUid: 'YOUR_APP_UID ',  //コンテンツのApp UID
    modelUid: 'YOUR_MODEL_UID',  //コンテンツのモデルUID
  })
  return items
}

<h3 id="hfd99af07cb">Astroで記事詳細ページの作成</h3><p>記事一覧を取得し、slug フィールドを基に記事詳細ページのパスを生成する方法を紹介します。</p><h4 id="h6f187338d7">パス生成の仕組み</h4><p>以下のコードは、記事一覧を取得して各記事の slug を使って動的なパスを生成しています。<br><span class="txt-small">※実際のフィールド定義は簡略化しています。</span></p>

---
import Layout from "../../layouts/Layout.astro";
import { blogList } from "../../lib/newt";
import dayjs from "dayjs";
import "dayjs/locale/ja";

export const getStaticPaths = async () => {
  const posts = await blogList();
  const paths = posts.map((post) => {
    return {
      params: {
        path: `entry/${post.slug}`,
      },
      props: {
        post,
      },
    };
  });
  return paths;
};
const { post } = Astro.props;
const { title, category, section, _sys } = post;
const datetime = dayjs(_sys.createdAt).locale("ja").format("YYYY-MM-DD");
const publishDate = dayjs(_sys.createdAt).locale("ja").format("YYYY/MM/DD");
---

<Layout>
  <h1>{title}</h1>
  <time datetime={datetime}>{publishDate}</time>
  <ul>
    {category.map((cat) => <li>{cat.title}</li>)}
  </ul>
  {
    section &&
      section.map((sec) => {
        switch (sec.type) {
          case "richeditor":
            return <div set:html={sec.data.body} />;
          case "htmlCode":
            return <div set:html={sec.data.htmlCode} />;
          case "highlight":
            return (
              <div>
                <p>{sec.data.lang}</p>
                <p>{sec.data.filename}</p>
                <pre>
                  <code>{sec.data.body}</code>
                </pre>
              </div>
            );
          case "gallery":
            return (
              <div>
                {sec.data.images.map((img) => (
                  <img src={img.src} alt={img.altText} />
                ))}
              </div>
            );

          default:
            return null;
        }
      })
  }
</Layout>

<p>📝参考</p><ul><li><a href="https://www.newt.so/docs/tutorials/get-contents-in-astro" target="_blank" rel="noopener noreferrer nofollow">NewtとAstro v4を利用してブログを作成する</a></li><li><a href="https://www.newt.so/docs/js-sdk" target="_blank" rel="noopener noreferrer nofollow">SDK | ガイド: CDN API・Newt API | ヘッドレスCMS「Newt」</a></li></ul>