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
24
推しの VTuber の公式 Web サイトを作った Part.2
とんと
August 01, 2023
Tweet
Share
More Decks by とんと
See All by とんと
これまでに一番苦労したプロジェクト
ryuseinomi
0
19
推しの VTuber の公式サイトを作った
ryuseinomi
0
160
ぼっちがリモートワークやってみた
ryuseinomi
0
73
Kanazawa.rbを振り返る
ryuseinomi
0
84
もう僕は勤怠を入力しなくても良い
ryuseinomi
0
40
Goで始めるWebsocketプログラミング
ryuseinomi
0
130
AWS Lambdaでファイルをこねくり回す
ryuseinomi
0
400
iOSアプリをリリースするまで
ryuseinomi
2
380
ベトナムエンジニアと 仲良く仕事を進めるには?
ryuseinomi
3
300
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Gamification - CAS2011
davidbonilla
80
5k
Navigating Team Friction
lara
183
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Producing Creativity
orderedlist
PRO
341
39k
Designing the Hi-DPI Web
ddemaree
280
34k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GraphQLとの向き合い方2022年版
quramy
43
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.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 がアツい! ・シンプルで高速なのでオススメ