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
320
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
August 24, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.6k
Next.jsの今年一年を振り返る
hanetsuki
1
1.3k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
3
2.7k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
4
2.1k
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
11k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
17k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.2k
Other Decks in Technology
See All in Technology
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
950
エンジニア向け会社紹介資料
caddi_eng
14
230k
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
How to Think Like a Performance Engineer
csswizardry
4
590
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
380
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
Bash Introduction
62gerente
607
210k
Building Adaptive Systems
keathley
34
2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Web development in the modern age
philhawksworth
203
10k
Design by the Numbers
sachag
277
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Done Done
chrislema
179
15k
GraphQLとの向き合い方2022年版
quramy
36
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
How to Ace a Technical Interview
jacobian
274
23k
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
ご清聴ありがとうございました。