フロントエンドに入門して3ヶ月、未だ知識ゼロなので座学してきた

Transcript

1. 2023年7月23日@渋谷 フロントエンドに入門して3ヶ月、 未だ知識ゼロなので座学してきた 登壇者：焼売（しゅうまい）
2. 登壇者について ・氏名：焼売（しゅうまい） ・出身：神奈川県 横浜市 ・所属：上智大学 経済学部 経済学科 ・趣味：音楽, 開発 来年の4月からWeb系の企業に就職予定
3. 本日の内容 ・勉強したこと ・ブラウザレンダリング ・座学した感想
4. 勉強したこと ・ビルドツール ・DOM ・SPA ・ブラウザレンダリング ・CDN ・CNAME ・オリジンサーバー ・キャッシュサーバー
5. ブラウザレンダリングとは HTML/CSS/JSなどのファイルを解析し、 ブラウザにWebページを表示するプロセスのこと HTML CSS JS 解析＆表示
6. CSRとSSR ・CSR (Client Side Rendering) ・SSR (Server Side Rendering) サーバー側ではなくブラウザ側でレンダリングする方法のこと ページの表示速度はユーザーのデバイススペックに依存する サーバー側でレンダリングする方法のこと ページの表示速度はユーザーのデバイススペックに依存しない
7. CSRとSSRの問題点 ユーザーのリクエストを受けてからWebページを構築するため、 スペックに関係なく待ち時間が発生する点 リクエスト ページの構築 (待ち時間の発生!!) 表示
8. SSG ・SSG (Static Site Generator) ビルド時にあらかじめWebページを構築しておくことで、 ユーザーのリクエストに応じて即座にページを表示する方法 CSR, SSRよりも高速にWebページを表示することができる!! しかし、問題となる場合もある...
9. SSGの問題点と対処法 ・大規模なサイトの場合 ・サイトの更新が頻繁に行われる場合 ビルド時に全てのWebページを構築するのは非現実的 対処法：`fallback: blocking`と指定する ビルド時のみ最新のデータを取得するSSGは適さない 対処法：ISRを使用する
10. ISR ・ISR (Incremental Static Regeneration) `revalidate`で指定した秒数ごとに サーバー側で最新のデータを取得してWebページを再構築する方法 SSGのメリットを保ちつつ、 ほぼ最新のデータをWebページに反映することができる!!
11. ISRが一番良いわけではない 提供するサイトの性質に合ったレンダリング方法を 選択することが重要
12. 座学した感想 ・フロントエンドについて無知すぎた 　 でも今回のLTをきっかけに勉強できて良かった ・今回の座学を踏まえて何か作りたい 　 アニメが好きなので、Next.js (SSG or ISR) + TypeScriptで 　 爆速のアニメブログとか作ってみたい
13. 参考記事 ・Frontend Dveloper Roadmap ・とってもやさしいフロントエンド入門 ・フロントエンドビルドツールの特徴・使い分け解説 ・コンパイル、ビルド、デプロイの違いを解説 ・【Next.js】CSR,SSG,SSR,ISRがあやふやな人へざっくり解説する ・Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する ・Webサイトがブンブン🐝速くなるCDNの基礎知識