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
13
推しの VTuber の公式 Web サイトを作った Part.2
とんと
August 01, 2023
Tweet
Share
More Decks by とんと
See All by とんと
これまでに一番苦労したプロジェクト
ryuseinomi
0
16
推しの VTuber の公式サイトを作った
ryuseinomi
0
140
ぼっちがリモートワークやってみた
ryuseinomi
0
59
Kanazawa.rbを振り返る
ryuseinomi
0
69
もう僕は勤怠を入力しなくても良い
ryuseinomi
0
40
Goで始めるWebsocketプログラミング
ryuseinomi
0
110
AWS Lambdaでファイルをこねくり回す
ryuseinomi
0
300
iOSアプリをリリースするまで
ryuseinomi
2
290
ベトナムエンジニアと 仲良く仕事を進めるには?
ryuseinomi
3
290
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Building Adaptive Systems
keathley
32
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
In The Pink: A Labor of Love
frogandcode
138
21k
Side Projects
sachag
451
41k
Rails Girls Zürich Keynote
gr2m
91
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
The Cult of Friendly URLs
andyhume
74
5.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Into the Great Unknown - MozCon
thekraken
14
1k
Unsuck your backbone
ammeep
663
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
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 がアツい! ・シンプルで高速なのでオススメ