Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jamstackで事前に欲しいパーツ群を洗い出す
Search
hanetsuki
August 24, 2022
Technology
1
400
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
August 24, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
AIを用いて実践してきた開発方法について
hanetsuki
1
58
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
180
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2.1k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.3k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.4k
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.6k
Other Decks in Technology
See All in Technology
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
180
re:Inventに行くまでにやっておきたいこと
nagisa53
0
290
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
610
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
2.3k
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
190
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
150
Azure Well-Architected Framework入門
tomokusaba
1
130
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
事業開発におけるDify活用事例
kentarofujii
5
1.5k
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
320
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
230
AI時代、“平均値”ではいられない
uhyo
8
2.6k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Practical Orchestrator
shlominoach
190
11k
The Invisible Side of Design
smashingmag
302
51k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Producing Creativity
orderedlist
PRO
347
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Navigating Team Friction
lara
190
15k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Cult of Friendly URLs
andyhume
79
6.6k
Unsuck your backbone
ammeep
671
58k
Transcript
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
ご清聴ありがとうございました。