Slide 1

Slide 1 text

ReactにSWRがあるとき🤣 ないとき😭 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio Kanon (@samurai_se) #クラスメソッド勉強会

Slide 2

Slide 2 text

自己紹介 2 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio Kanon 株式会社 虎の穴ラボ 個人事業 blessing software samurai_se ↓詳しくは↓ ● 水瀬いのりライブTで神戸から色んなテックカンファレンスに登壇してる人です ● 3次元に嫁が1人います。2次元にはたくさんいます。 ● 本業はKtor(Kotlin), Next.jsで副業がLaravel, Nest.js,Next.js ● アニメと漫画と声優ラジオが好きです

Slide 3

Slide 3 text

アジェンダ 3 ● SWRとは ○ 簡単に機能を紹介 ● 使い始めたきっかけ ● SWRがないとき😭 ● SWRがあるとき🤣 ● おわりに Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio

Slide 4

Slide 4 text

SWRとは 4 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ● Vercel社製 ● Suspenseを簡単に 表現できる ● ページネーションも 用意 ● 自動再検証も提供 ● Loading状態も勝手 に管理してくれる ● errorハンドリング ・再試行も容易

Slide 5

Slide 5 text

詳しく 5 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio

Slide 6

Slide 6 text

採用したきっかけ 6 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ● useEffectをバンバン書いてる状況から脱却し たい ● fetch時にエラーがあればエラーページへ遷移 する共通の処理を書きたい ● コンポーネントごとにローディングさせるに あたり、簡潔に記述したい ● 一覧ページなどは別タブから戻ってきた際な どに最新情報で見せたい

Slide 7

Slide 7 text

基本系 7 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio

Slide 8

Slide 8 text

基本系 8 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 通常APIのURLとな る`key`とAPIを実行 するfetcherをとる

Slide 9

Slide 9 text

基本系 9 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio `key`が変わらない 限り、キャッシュが 効く

Slide 10

Slide 10 text

基本系 10 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio `key`が変われば、 Re:fetchしてくれる

Slide 11

Slide 11 text

11 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio この特性を使うことで useEffectを使わないようにする

Slide 12

Slide 12 text

SWRがないとき 😭 12 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 子・孫に至るまでバ ケツリレー Context使っても良いけど、 記述量が増えたりレンダリン グ効率の問題だったり、トッ プレベルのコンポーネントか らpropsが過不足なく渡せて いるかの問題など

Slide 13

Slide 13 text

SWRがあるとき🤣 13 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio `id`が変わったと きだけRe:fetch useEffect 👋 同じIDなら Re:fetchしない ので再レンダリン グしない Contextを書く要 領だけど、記述 量が少ない

Slide 14

Slide 14 text

14 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio シンプルで記述量が少ない にも関わらずやれることが多い 完全に理解し (ry

Slide 15

Slide 15 text

15 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 他の機能もいくつか紹介

Slide 16

Slide 16 text

自動再検証 16 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio https://swr.vercel.app/j a/docs/revalidation#re validate-on-focus

Slide 17

Slide 17 text

無限ローディング 17 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio https://swr.vercel.a pp/ja/examples/infin ite-loading

Slide 18

Slide 18 text

mutation 18 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio useStateもなくせる ことがある

Slide 19

Slide 19 text

19 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio Reactのデータ取得周りの十徳ナイフです みなさんも是非使ってみてください!

Slide 20

Slide 20 text

20 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 📢 最後に宣伝だけ 🙏 オフラインLT会を 神戸で開催します! オンラインでも毎朝もくもく会 してます!

Slide 21

Slide 21 text

21 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 📢 最後に宣伝だけ 🙏 Kotlin以外の話も ウェルカムです!! Reactの話もしにきて ください!

Slide 22

Slide 22 text

22 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 📢 最後に宣伝だけ 🙏 PHP以外の話も ウェルカムです!! Reactの話もしにきて ください!

Slide 23

Slide 23 text

23 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ご清聴、あざざました

Slide 24

Slide 24 text

24 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio おわりに 三ノ宮で待ってます!!