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
22
推しの VTuber の公式 Web サイトを作った Part.2
とんと
August 01, 2023
Tweet
Share
More Decks by とんと
See All by とんと
これまでに一番苦労したプロジェクト
ryuseinomi
0
19
推しの VTuber の公式サイトを作った
ryuseinomi
0
160
ぼっちがリモートワークやってみた
ryuseinomi
0
72
Kanazawa.rbを振り返る
ryuseinomi
0
82
もう僕は勤怠を入力しなくても良い
ryuseinomi
0
40
Goで始めるWebsocketプログラミング
ryuseinomi
0
130
AWS Lambdaでファイルをこねくり回す
ryuseinomi
0
390
iOSアプリをリリースするまで
ryuseinomi
2
380
ベトナムエンジニアと 仲良く仕事を進めるには?
ryuseinomi
3
300
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A better future with KSS
kneath
238
17k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Git: the NoSQL Database
bkeepers
PRO
425
64k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
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 がアツい! ・シンプルで高速なのでオススメ