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
23
推しの VTuber の公式サイトを作った
kanon_tonto
0
170
ぼっちがリモートワークやってみた
kanon_tonto
0
88
Kanazawa.rbを振り返る
kanon_tonto
0
100
もう僕は勤怠を入力しなくても良い
kanon_tonto
0
46
Goで始めるWebsocketプログラミング
kanon_tonto
0
160
AWS Lambdaでファイルをこねくり回す
kanon_tonto
0
430
iOSアプリをリリースするまで
kanon_tonto
2
410
Featured
See All Featured
A better future with KSS
kneath
239
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
For a Future-Friendly Web
brad_frost
176
9.7k
Being A Developer After 40
akosma
91
590k
A designer walks into a library…
pauljervisheath
205
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Optimizing for Happiness
mojombo
377
70k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Docker and Python
trallard
44
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
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 がアツい! ・シンプルで高速なのでオススメ