推しの VTuber の公式 Web サイトを作った Part.2

Transcript

1. @27ma4_ton10 推しの VTuber の 公式 Web サイトを作った Part.2
2. とんと # Webエンジニア # マリオカート # Go / Javascript
3. 以前にも Web サイトは作っていた
4. 今回の犠牲者 (?) は KayanoA さんと 茅野ユウさんです！
5. https://kayanoau.netlify.app/
7. 🛠 技術スタック ・Next.js ・Tailwind CSS
8. Next.js
9. ❓ なぜ Next.js なのか ・画像の扱いやすさ ・ SEO の強さ ・ページ遷移のしやすさ
10. ❓ なぜ Next.js なのか ・画像の扱いやすさ ・ SEO の強さ ・ページ遷移のしやすさ
11. 📷 画像の扱いやすさ Next.js が提供している Image Component これ目当てで Next.js を 導入する人も多そう？
12. src は png だが...
13. 自動的に webp に変換している！
14. 自動的に lazy オプションが付与される！
15. 【おまけ】 background-image で png 以外を使う方法
16. DOM 側は三項演算子によって class を動的に付与する
17. 複数の画像をイテレートしながら 1 枚ずつ読み込む処理
18. avif/webp が 読み込めた場合 読み込みに 失敗した場合
19. resolve からのメッセージを 基にして、どちらの形式が 読み込まれたかを判断する
20. ❓ なぜ Next.js なのか ・画像の扱いやすさ ・ SEO の強さ ・ページ遷移のしやすさ
21. 📄 SEO の強さ
22. 📄 SEO の強さ 静的メタデータ 動的メタデータ
23. 📄 SEO の強さ 静的メタデータ 動的メタデータ
24. 📄 SEO の強さ 基本設定 Twitter の設定 OGP の設定
25. ❓ なぜ Next.js なのか ・画像の扱いやすさ ・ SEO の強さ ・ページ遷移のしやすさ
26. ♻ ページ遷移のしやすさ Link コンポーネントを 設置するだけで ルーティングが可能になる
27. ♻ ページ遷移のしやすさ 加えて... ・ SSG (事前にサーバ側でビルドをする方法) により 　リクエストがあった時に高速で遷移できる ・ Next.js の prefetch 機能により、 <Link> タグの中身は 　バックグラウンドで事前に取得される ・コードベースで書きやすいだけでなく、表示においても優秀🤩
28. Tailwind
29. ❓ なぜ Tailwind なのか ・クラス名を考えなくて良い ・ SASS 戦争をしなくて良い ・ CSS ファイルを作らなくて良い
30. ✏ Tailwind の書き方 クラス名が直接そのまま スタイルとなる⭐
31. ♻ 改めてメリットを確認 ・クラス名を考えなくて良い ・ SASS 戦争をしなくて良い ・ CSS ファイルを作らなくて良い
32. 👎 Tailwind のデメリット ・クラス名が長くなりがち😞
33. 🎙 最後に ・Next.js + Tailwind がアツい！ ・シンプルで高速なのでオススメ