Front Matter（フロントマター）とは、Markdown ファイルの先頭に YAML（ヤムル）形式で書かれる「メタデータ」のことです。記事の本文とは別に、以下のような情報をまとめて管理できます。
---
title: "記事のタイトル"
date: "2025-05-12"
tags:
- React
- Next.js
---
# ここから本文…
特徴・メリット
-
記事のメタ情報を一元管理 タイトルや公開日、カテゴリ／タグなどを本文ファイル内にまとめて書ける
-
プログラムから読み込みやすい gray-matter のようなライブラリを使うと、YAML 部分だけを簡単にパースして取得できる
-
静的サイト生成で活用 getStaticProps や getStaticPaths で front-matter の値を使い、一覧表示や動的ルーティングに利用できる
仕組み
-
ファイルの最初に --- を書く
-
YAML 形式で key: value のペアを並べる
-
最後にもう一度 --- を書いて本文開始を示す
---
title: "サンプル記事"
date: "2025-05-01"
tags:
- チュートリアル
- JavaScript
---
ここからマークダウンの本文…
使いどころ
-
ブログ記事の タイトル／日付／タグ
-
ページごとの レイアウト設定（例: layout: post）
-
カスタムフィールド（例: author: "山田太郎", draft: true）
Front Matter を活用すると、Markdown 単体で コンテンツと設定情報をひとまとめに管理できるため、特に静的サイトジェネレーターで重宝される手法です。
