UIT meetup vol.11『フロントエンド紅白LT合戦』を聞いた感想
はじめに
UIT meetup vol.11『フロントエンド紅白LT合戦』 - connpass
ここ最近見たLTの中で一番面白かったです。
Twitterのつぶやきはこちら。
https://twitter.com/search?q=%23uit_meetup%20since%3A2020-12-18_19%3A00%3A00_JST%20until%3A2020-12-18_22%3A00%3A00_JST&src=typed_query&f=live
セッション
Chakra UI ではじめる Tailwind CSS へのささやかな抵抗
- 今Tailwind CSS の一強
- Next.jsのチュートリアルで紹介されている
- Utility-firstでありカスタマイズ性に優れている
- Chakra UI
- Utility-firstな設計を呼び込むコンポーネント集
- Emotionに依存している
Headless Components Design
選ばれたのは Next.jsでした - Next.jsによるServer Side OGP ⽣成 / Next.js was chosen - Server Side OGP generation with Next.js - Speaker Deck
- OGPとは、サーバー側へリクエストした際にOGP用のmetaタグ(og:image)を含む
HTMLを生成することでOGPカードを生成するようになっている
- SSGはビルド時のみデータ取得を行うため変化のあるデータには向かない
- SSRはリクエストごとにデータ取得を行う
Build you a static site generator - Speaker Deck
SSGの自作の話でした。
- SSGはブログ利用が初めに思いつく
- 学ぶなら自作しよう
- SSGはファイルのパイプラインになっている
- いくつかのパイプラインを作って組み合わせて実現していく
Roconで実現する超型安全なルーティング / Super Type-safe routing with Rocon - Speaker Deck
ルーティングの説明がわかりやすいので、そこだけでもすごく価値があるなと思います。
- SPAを作るときページが動くたびにアドレスが変わっていく部分は標準はHTML5HistoryAPIだが、生では扱いにくい
- URIに対してコンポーネントを表示するということの橋渡しをやるのがRouteingライブラリ。
- Reactではreact-routerがデファクト。
- Next.jsはファイルシステムベースなのでファイル名がパスになる。
画面間のデータ受け渡し方法のメリットデメリット
- グローバルなステートに入れる
- 簡単で型安全
- フロー特有のステートをグローバルに入れるなどステート設計の悪化する恐れ
- 再読み込み時に消える、進む戻るに連動しない
- URLに入れる
- 耐久性のあるURLになる
- 大きいデータは入れられない
- 型制限できない
- History Stateに入れる
- 再読み込み、進む戻るに連動する
- URLに入らず耐久性のあるURLにならない
- 型制限できない
=>現状のデファクトになっている画面遷移の実装方法だと間違ったURLに飛ばす可能性がある
Roconなど型安全に作ることができる
- Next.js/Nuxtはファイルシステムベースのルーティングで固定のためルーティングの型安全は保障できない
Reactルーター選定術 2020年のファイナルアンサー - Speaker Deck
- OGPのためにSSR時にコンポーネント呼び出し前のfetch処理が必要…
- (OGPは苦労しそうなイメージ)
- react-routerなどはCSRだけでなら有力
- TwitterのクローラーがJSの実行に対応していなためog:imageの設定が必要
React SuspenseはSSR対応できていない。CPU負担大。
CSRだけでいいならuseSWRを使うほうがReduxよりお手軽
- そもそもuseSWRとは、Reactでデータフェッチを行えるHooks
- stale while revalidateの略で、古くなったデータは再取得するというキャッシュ戦略の略称なんだそう。
嬉しいことに、useSWRは第二引数で与えたfetcherが一度取得したデータをクライアント側でキャッシュしてくれます。これで、APIを通じて取得したデータをstoreに格納せずに済むのです。
【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい - パンダのプログラミングブログ より
