目次
はじめに
今回はこのブログの制作実績ページについて説明しようと思います。
内容は、各実績のデータの扱いについてのお話になります。
各実績のデータ
今回は headless cms を使用したくなかったのと、表示したい情報自体が非常にシンプルだったということで、/works/detail/data/以下に json データとして扱うことにしました。
実績情報のテンプレート
実績情報のテンプレートはこんな感じになります。
いたって簡単な作りになっていますね。
{
"public": false, // 公開か下書き
"thumbnail": "/asset/img/works/detail/.jpg", // サムネイル画像
"name": "", // 実績の名前
"type": "webサイト", // 実績の種類
"date": "2022.0", // 公開日
"url": "", // url
"description": "", // 実績に関する説明
"responsible": "", // 担当範囲
"technology": "", // 制作・開発の中で使用した技術やツール
"about": "" // 制作・開発の中で考えたこと・感じたことなどを簡単に説明
}
実績一覧ページでの表示方法
全体のコードはこちらになります。
const path = 'pages/works/detail/data'
---
export const getStaticProps: GetStaticProps = async () => {
const files = fs.readdirSync(path)
let works = files.map((fileName) => {
const slug = fileName.replace(/\.json$/, '')
const fileContent = fs.readFileSync(`${path}/${fileName}`, 'utf-8')
const workData = JSON.parse(fileContent)
return {
workData,
slug,
}
})
works = works.sort((a, b) =>
new Date(a.workData.date) > new Date(b.workData.date) ? -1 : 1
)
works = works.filter((work) => work.workData.public)
return {
props: {
works,
},
}
}
それでは、getStaticProps の中での処理をひとつずつ見ていきましょう。
基本的にやることは、markdown でブログを作ったときと同じようなことです。
まず、readdirSync で'pages/works/detail/data'ディレクトリから全ファイル名を取得してきます。
const path = 'pages/works/detail/data'
const files = fs.readdirSync(path)
ファイル名を取得できたら、そこから.json 拡張子を取り除いて slug を。
そして、readFileSync で 'pages/works/detail/data' ディレクトリ下のファイルを指定してファイル内部の情報を取得するのですが、取得してきたデータは json なので一度 JSON.parse() メソッドを用いて文字列を JSON として解析する必要があります。
こうして、実績詳細ページの slug と実績詳細の json データが取得したら、その 2 つを返します。
あとは、こんな感じで公開日の新しいものから並び替えて
works = works.sort((a, b) =>
new Date(a.workData.date) > new Date(b.workData.date) ? -1 : 1
)
公開状態にしているもののみに絞って
works = works.filter((work) => work.workData.public)
それらを works ページの props として渡すことで実績情報を自由に扱うことができました。
参考
今回の実装では参考にしたものは特になくて、事前に実装していた markdown ファイルを投稿として表示する時のアイデアが役に立ちましたね。
さいごに
実際に実績ページを headless cms なしで json データのみで作成してみて、現状は 4 件ほどの実績を載せていますが、特に問題はないですね。
また、これから件数が増えていく中で気になることが出てきたら、新たにブログに投稿していこうと思います。