Jamstackで事前に欲しいパーツ群を洗い出す ジャムスタックチョットデキル!! 真夏のLT大会2022 2022/08/24

自己紹介 ﾁｮｯﾄﾃﾞｷﾙ ちょっと株式会社所属 フロントエンドエンジニア 愛称：たっちー HN：hanetsuki 趣味：アニメ/漫画/ゲーム/お絵描き 近況：6月に女の子を家族として迎え、二児のパパになりました。

今回のテーマについて Jamstackでメディアサイトなどを作成する際にいつも作ってるなぁ ... というコンポーネントってありませんか？ ● 「確かにいつも作ってるなぁ ...🤔」 ● 「あるあるw」 といったあるあるな、コンポーネントを洗い出していきたいなと思います。

① パンくずリスト

① パンくずリスト ● SEO対策にも効果的な要素の一つ ● メディア記事であれば必ずと言っていいほど存在しますよね。 😊 ● 構造化マークアップや、押下できる状態・できない状態を持っている場合があ り、実は考慮事項が多いコンポーネントです。 🤯 ● 比較的簡易なコンポーネントですが、チリも積もれば山となる。 ⛰

② ページネーション

② ページネーション ● 必ずと言っていいほど存在するコンポーネントの一つ ● 少ないページ数や多いページ数。現在表示しているページなど、状況に合わ せて表示パターンが異なったりするので考慮事項が多いのも特徴的。

③ 本文用のCSS/コンポーネント

③ 本文用のCSS/コンポーネント ● headlessCMSで入稿されたデータを表示するのに利用するスタイルです。 ● よく利用する見出しやリストなどのタグは事前にスタイリングしておいても良さ そうです。 ● コードブロックを利用するなら highlight.jsなどを用いてスタイル付けするのも良 いですね。

④ シェアボタン

④ シェアボタン ● ボタンのスタイルは違えど、結構頻繁に実装するパーツな気がします。

⑤ カテゴリ（タグ）一覧

⑤ カテゴリ（タグ）一覧 ● 一覧ページなんかでよくお見受けするコンポーネント ● スタイル次第では、現在表示しているカテゴリーのページには currentクラスを 用いてスタイル付けをしたりします

⑥ 本文の目次

⑥ 本文の目次 ● 記事内部でページ遷移するための目次コンポーネント ● 本文を解析して、場合によっては見出しの IDなどをゴニョゴニョする必要があり ます。

ちょっと振り返っただけでもこれだけあった ① パンくずリスト ② ページネーション ③ 本文用のCSS/コンポーネント ④ シェアボタン ⑤ カテゴリ（タグ）一覧 ⑥ 本文の目次

まとめ：毎回作ったりするのは面倒... 社内でのアプローチ ● ナレッジを溜める ● スターターリポジトリを作成してみる ● 社内パッケージ化して利用してみる ● …etc 個人的なアプローチ ● とりあえずミニマムに作ってみた。 ○ https://github.com/tsuki-lab/nextjs-latest-starter ○ https://zenn.dev/rabbit/articles/8a0f5e199be76d

ご清聴ありがとうございました。