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
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
160
検証も兼ねて個人開発で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
成立するElixirの再束縛(再代入)可という選択
kubell_hr
0
260
“プロダクトを好きになれるか“も QAエンジニア転職の大事な判断基準だと思ったの
tomodakengo
0
140
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
270
産業機械をElixirで制御する
kikuyuta
0
170
Tenstorrent 開発者プログラム
tenstorrent_japan
0
310
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん!HCP Terraformって何?
mnakabayashi
0
130
今からでも間に合う! 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
hideakiaoyagi
1
170
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
340
Securing your Lambda 101
chillzprezi
0
270
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
120
vLLM meetup Tokyo
jpishikawa
1
210
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
2
770
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Raft: Consensus for Rubyists
vanstee
139
7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
It's Worth the Effort
3n
184
28k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Docker and Python
trallard
44
3.4k
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
ご清聴ありがとうございました。