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
390
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
August 24, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
AIを用いて実践してきた開発方法について
hanetsuki
0
16
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
170
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.2k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.3k
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.5k
Other Decks in Technology
See All in Technology
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
zaimy
3
190
Kiroから考える AIコーディングツールの潮流
s4yuba
4
660
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
850
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
130
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
270
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
0
290
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1k
Lambda management with ecspresso and Terraform
ijin
2
130
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
140
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
Featured
See All Featured
Designing for Performance
lara
610
69k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
A designer walks into a library…
pauljervisheath
207
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Navigating Team Friction
lara
188
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Thoughts on Productivity
jonyablonski
69
4.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Cult of Friendly URLs
andyhume
79
6.5k
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
ご清聴ありがとうございました。