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
340
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
August 24, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.8k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
2.9k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
4
2.2k
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
17k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.3k
Other Decks in Technology
See All in Technology
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
21
6k
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
200
Hotwire光の道とStimulus
nay3
5
2.3k
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
120
品質の高い機能を”早く”提供するために技術的な面でチームでやったこと、やりたいこと
sansantech
PRO
2
270
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
0
290
Mobbing Practices
kawaguti
PRO
3
350
AIを使って小説を書こう!【2024/10/25講演資料】
kamomeashizawa
0
170
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
200
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
17
2.9k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
内製化によるシステムモダナイゼーションの実践
kazokmr
3
540
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Facilitating Awesome Meetings
lara
49
6k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Testing 201, or: Great Expectations
jmmastey
38
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
What's in a price? How to price your products and services
michaelherold
243
11k
Visualization
eitanlees
143
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Designing for humans not robots
tammielis
249
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Music & Morning Musume
bryan
46
6.1k
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
ご清聴ありがとうございました。