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
推しの VTuber の公式 Web サイトを作った Part.2
Search
嘉音とんと
August 01, 2023
0
26
推しの VTuber の公式 Web サイトを作った Part.2
嘉音とんと
August 01, 2023
Tweet
Share
More Decks by 嘉音とんと
See All by 嘉音とんと
CSSの歩き方
kanon_tonto
0
40
これまでに一番苦労したプロジェクト
kanon_tonto
0
22
推しの VTuber の公式サイトを作った
kanon_tonto
0
170
ぼっちがリモートワークやってみた
kanon_tonto
0
88
Kanazawa.rbを振り返る
kanon_tonto
0
100
もう僕は勤怠を入力しなくても良い
kanon_tonto
0
45
Goで始めるWebsocketプログラミング
kanon_tonto
0
160
AWS Lambdaでファイルをこねくり回す
kanon_tonto
0
430
iOSアプリをリリースするまで
kanon_tonto
2
410
Featured
See All Featured
Site-Speed That Sticks
csswizardry
4
450
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Philosophy of Restraint
colly
203
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Being A Developer After 40
akosma
90
590k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
We Have a Design System, Now What?
morganepeng
51
7.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Transcript
@27ma4_ton10 推しの VTuber の 公式 Web サイトを作った Part.2
とんと # Webエンジニア # マリオカート # Go / Javascript
以前にも Web サイトは作っていた
今回の犠牲者 (?) は KayanoA さんと 茅野ユウさんです!
https://kayanoau.netlify.app/
None
🛠 技術スタック ・Next.js ・Tailwind CSS
Next.js
❓ なぜ Next.js なのか ・画像の扱いやすさ ・ SEO の強さ ・ページ遷移のしやすさ
❓ なぜ Next.js なのか ・画像の扱いやすさ ・ SEO の強さ ・ページ遷移のしやすさ
📷 画像の扱いやすさ Next.js が提供している Image Component これ目当てで Next.js を 導入する人も多そう?
src は png だが...
自動的に webp に変換している!
自動的に lazy オプションが付与される!
【おまけ】 background-image で png 以外を使う方法
DOM 側は三項演算子によって class を動的に付与する
複数の画像をイテレートしながら 1 枚ずつ読み込む処理
avif/webp が 読み込めた場合 読み込みに 失敗した場合
resolve からのメッセージを 基にして、どちらの形式が 読み込まれたかを判断する
❓ なぜ Next.js なのか ・画像の扱いやすさ ・ SEO の強さ ・ページ遷移のしやすさ
📄 SEO の強さ
📄 SEO の強さ 静的メタデータ 動的メタデータ
📄 SEO の強さ 静的メタデータ 動的メタデータ
📄 SEO の強さ 基本設定 Twitter の設定 OGP の設定
❓ なぜ Next.js なのか ・画像の扱いやすさ ・ SEO の強さ ・ページ遷移のしやすさ
♻ ページ遷移のしやすさ Link コンポーネントを 設置するだけで ルーティングが可能になる
♻ ページ遷移のしやすさ 加えて... ・ SSG (事前にサーバ側でビルドをする方法) により リクエストがあった時に高速で遷移できる ・ Next.js
の prefetch 機能により、 <Link> タグの中身は バックグラウンドで事前に取得される ・コードベースで書きやすいだけでなく、表示においても優秀🤩
Tailwind
❓ なぜ Tailwind なのか ・クラス名を考えなくて良い ・ SASS 戦争をしなくて良い ・ CSS
ファイルを作らなくて良い
✏ Tailwind の書き方 クラス名が直接そのまま スタイルとなる⭐
♻ 改めてメリットを確認 ・クラス名を考えなくて良い ・ SASS 戦争をしなくて良い ・ CSS ファイルを作らなくて良い
👎 Tailwind のデメリット ・クラス名が長くなりがち😞
🎙 最後に ・Next.js + Tailwind がアツい! ・シンプルで高速なのでオススメ