React/Next によるアプリケーション開発のこれから

Slide 1

Slide 1 text

06/29/2023 React / Next ʹΑΔ ΞϓϦέʔγϣϯ։ൃͷ͜Ε͔Β Encraft#4 / @koba04

Slide 2

Slide 2 text

@koba04 • Work • Cybozu / SmartHR • OSS • Maintainer … SWR, ja.react.dev, react-transition-group • Creator … SWRDevTools • Contributor … React, Next

Slide 3

Slide 3 text

ja.react.dev • ຋༁ਐΊ͍ͯΔͷͰνΣοΫ͍ͯͩ͘͠͞ʂ

Slide 4

Slide 4 text

ࠓ೔ͷ಺༰ • ࠷ۙͷ React ͷมԽ • React Framework ͱͯ͠ͷ Next • ͜Ε·Ͱͷߟ͑ํͷҧ͍ • Live Coding 🛠

Slide 5

Slide 5 text

͜Ε·Ͱͷ React

Slide 6

Slide 6 text

վΊͯ React ͷಛ௃ • View = Component(State) • Composable • એݴత UI • ୯Ұͳσʔλϑϩʔ • ίϯϙʔωϯτϕʔε

Slide 7

Slide 7 text

࠷ۙͷ React ͷมԽ

Slide 8

Slide 8 text

• Suspense ͸σʔλϑΣονϯά΍ϦιʔεऔಘɺStreaming ੍ޚͷ ͨΊͷϓϦϛςΟϒ • σʔλऔಘͱϩʔσΟϯάͷؔ৺Λ෼཭ • Streaming ࣌ͷڥքͱͯ͠ͷ Suspense

Slide 9

Slide 9 text

Slide 10

Slide 10 text

React Server Components (RSC) • Server Ͱ “͚ͩ” ࣮ߦ͞ΕΔ৽͍͠λΠϓͷίϯϙʔωϯτ = Client Ͱ࣮ߦ͞Εͳ͍ • Server ʹ͸ࣄલϏϧυ΋ؚΉ • HTML Ͱ͸ͳ͘ ReactTree ͱͯ͠ฦ͞ΕΔͷͰΫϥΠΞϯτͰͷࠩ෼ߋ৽͕Մೳ • Server ͰͷΈར༻ՄೳͳϦιʔεΛ࢖͑Δ • SSR ͱ͸શ͘ผͷ֓೦ɻSSR ͱ૊Έ߹ΘͤΔ͜ͱ΋Մೳ • SSR ͸ॳظϩʔυʹର͢Δ࠷దԽ • Suspense Λϕʔεͱͨ͠σʔλϑΣονϯάͷϓϦϛςΟϒ • “use client” ʹΑΔ Client Components ͱͷڥք, `server-only`, `client-only` ʹΑΔڧ੍

Slide 11

Slide 11 text

React Server Components (RSC) ※ Server Components ͸ Server ͰͷΈ࣮ߦͰ͖ΔɻClient Ͱ͸ Component ͕ͳ͍ͷͰ࣮ߦͰ͖ͳ͍ Server Components Client Components ⚠as Props ⚠as Props ⚠ Server Components ͷ݁ՌΛ Props ͱͯ͠ड͚औΓ Client Components ʹ౉͢͜ͱ͕Մೳɻ

Slide 12

Slide 12 text

Server Components and Client Components https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components

Slide 13

Slide 13 text

React Server Components ͱ SSR Request HTML & JavaScript Request ReactTree (ಠࣗ Protocol) HTML Λੜ੒ ReactTree Λੜ੒ ͸αʔόʔͱΫϥΠΞϯτͲͪΒͰ΋ಈ͘ ͸αʔόʔͷΈͰಈ͘ SSR React Server Components

Slide 14

Slide 14 text

Data Fetching for Suspense • React Server Components ͕ Suspense ʹ͓͚ΔσʔλϑΣονϯάͷ ιϦϡʔγϣϯ • σʔλͷऔಘ΋ React ͷύϥμΠϜͷதͰղܾ͢Δ • σʔλ͕ඞཁͳՕॴͰσʔλϑΣονϯάΛߦ͏ • ಉ͡ϦΫΤετ͸ Deduping (ॏෳഉআ) ͞ΕΔ • σʔλؒͰґଘؔ܎͕͋Δ৔߹΢ΥʔλʔϑΥʔϧ͸ආ͚ΒΕͳ͍ • ϨΠςϯγΛ೗ԿʹݮΒͤΔ͔

Slide 15

Slide 15 text

Waterfall ໰୊ Pending Page Load GET /A GET /B GET /C Pending Pending ϒϥ΢βʙαʔόؒͰͷ ΍ΓͱΓʹͳΔͷͰ ϨΠςϯγ͕େ͖͘ͳΔ

Slide 16

Slide 16 text

Waterfall ໰୊ with React Server Components Page Load Pending Pending GET /A GET /B GET /C αʔόʙαʔόؒͰͷ ΍ΓͱΓʹͳΔͷͰ ϨΠςϯγ͕খ͘͞ͳΔ

Slide 17

Slide 17 text

You might not need Data Fetching Libraries? • ଟ͘͸ React Server Components / Server Actions Ͱ࣮ݱՄೳʹ • ͜ΕΒͷϥΠϒϥϦ͸ΫϥΠΞϯτ্ͰͷιϦϡʔγϣϯʹ • ϥΠϒϥϦͷϨΠϠʔͰϢʔβʔମݧΛଥڠͤͣʹ Suspense ϕʔ εͷ Data Fetching ϥΠϒϥϦΛ࡞Δͷ͸೉͍͠ • ࠓޙɺReact Server Components ʹ͜ΕΒͷϥΠϒϥϦͰഓͬͨϓ ϥΫςΟε͕༌ೖ͞Ε͍͖ͯͦ͏ʢ༧૝ʣ https://tkdodo.eu/blog/you-might-not-need-react-query

Slide 18

Slide 18 text

Server Action (Alpha) • Server ্Ͱ࣮ߦ͞ΕΔؔ਺Λ form ΍ Client Components ʹͦͷ· ·౉ͤΔ࢓૊Έ • ࣮ࡍʹ͸ΫϥΠΞϯτ͔ΒαʔόʔʹϦΫΤετ͕ൃߦ͞Εͯɺ αʔόʔ্Ͱؔ਺͕࣮ߦ͞ΕΔ • ͦͷͨΊɺ࣮૷͕ΫϥΠΞϯταΠυʹ࿙ΕΔ͜ͱ͸ͳ͍ • ϑΝΠϧ or ؔ਺ʹରͯ͠໌ࣔతʹ “use server”; Λ͚ͭΔඞཁ͕͋ Δ

Slide 19

Slide 19 text

Server Action (Alpha) Server Ͱ࣮ߦ͞ΕΔؔ਺ ΫϥΠΞϯτଆʹ͸഑৴͞Εͳ͍ Server ʹݱࡏͷ URL Ͱ POST ͞Εͯࢦఆ͞Εͨ Action ͕࣮ߦ͞ΕΔ formAction ΍ startTransition Λ࢖ͬͨํ๏Ͱ΋࣮ߦՄೳ

Slide 20

Slide 20 text

New Hooks (Experimental) • Server Actions ͱ૊Έ߹ΘͤΔ͜ͱͰ Optimistic Updates ΍ૹ৴த ͳͲͷද͕ࣔՄೳʹͳΔ • useOptimistic … Server Actions Ͱ Optimistic Updates Λ࣮ݱ • useFormStatus … ϑΥʔϜͷૹ৴ঢ়ଶͳͲΛऔಘͰ͖Δ

Slide 21

Slide 21 text

React Server Components ͷ࣮૷Λ஌Δ • RSC From Scratch Part 1: Server Components • https://github.com/reactwg/server-components/discussions/5 • React Server Components ͷίϯηϓτΛ؆қ࣮૷ͱͱ΋ʹઆ໌ ͍ͯ͠Δ • ⚛ Dan Abramov explores React Server Components with us! [VOD] • https://www.youtube.com/watch?v=Fctw7WjmxpU

Slide 22

Slide 22 text

Next ͷ App Router

Slide 23

Slide 23 text

Next App Router • React Server Components ΛؚΉ React ͷ৽͍͠ܗΛ࣮૷ͨ͠ϑϨʔ ϜϫʔΫ • React Server Components ͱ SSR Λซ༻͍ͯ͠Δ • React Server Components, Server Action, Experimental Hooks ͳͲ͕ ར༻Մೳʹͳ͍ͬͯΔ • ·ͩ·ͩ଍Γͳ͍ػೳ΍ϓϥΫςΟε͸ଟ͍͚Ͳ͕࣌ؒղܾͦ͠͏ • React ͸ϑϨʔϜϫʔΫΛ௨ͯ͡࢖͏ੈք

Slide 24

Slide 24 text

ϑϨʔϜϫʔΫͱ React https://ja.react.dev/learn/start-a-new-react-project https://ja.react.dev/blog/2023/05/03/react-canaries

Slide 25

Slide 25 text

͜Ε·Ͱͷߟ͑ํͷҧ͍

Slide 26

Slide 26 text

࣮͸ͦΜͳʹͳ͍ʁ • View = Component(State) • Composable • એݴత UI • ୯Ұͳσʔλϑϩʔ • ίϯϙʔωϯτϕʔε

Slide 27

Slide 27 text

ΞϓϦέʔγϣϯશମ͕ React Tree ʹ • React Server Components ͸͜Ε·ͰΫϥΠΞϯτʹཹ·͍ͬͯͨ React Tree ͷൣғΛαʔόʔʹ·Ͱ֦େͨ͠ • σʔλϑΣονϯάʹ͍ͭͯ΋ React ͷύϥμΠϜͷதͰՄೳʹͨ͠ • αʔόʔଆͰσʔλऔಘΛߦ͏͜ͱʹΑΓ΢ΥʔλʔϑΥʔϧ໰୊ Λܰݮ • ΋͸΍σʔλϑΣονϯάΛҙࣝ͠ͳ͍ • ΫϥΠΞϯτɺαʔόʔΛ௨ͨ͡ Concurrent Rendering

Slide 28

Slide 28 text

ΞϓϦέʔγϣϯશମ͕ React Tree ʹ Data ͜Ε·Ͱ Client Server

Slide 29

Slide 29 text

ΞϓϦέʔγϣϯશମ͕ React Tree ʹ Component and Data ͜Ε͔Β Client Server

Slide 30

Slide 30 text

ৼΓࢠͱཐટ • Rails ΍ PHP ͷճؼͱ΋ݴΘΕΔ͚Ͳɺٕज़͸ཐટͷΑ͏ʹมԽ͍ͯ͠Δ • XHP ΍ GraphQL/Relay Ͱͷ՝୊ײ͕΋ͱʹͳ͍ͬͯΔ • React ͷίϯϙʔωϯτϞσϧΛΑΓ֦ு͠ɺαʔόʔɾΫϥΠΞϯτ શମΛγʔϜϨεʹॻ͚Δ • ΫϥΠΞϯτΠϯλϥΫγϣϯͱγϯϓϧͳϦΫΤετɾϨεϙϯεϞ σϧͷ༥߹ • Suspense ʹΑΔ Streaming Ϩεϙϯε

Slide 31

Slide 31 text

JavaScript Λ࢖Θͳ͍දݱ • CSS ΍ HTML ͚ͩͰදݱͰ͖Δ΋ͷ͸૿͖͍͑ͯͯΔͷͰͦΕΛ ࢖͍ͬͯ͘ • CSS Custom Properties, CSS Container Queries • required, pattern, popover attributes • :where, :is, :has, :user-valid, :user-invalid classes • :nth-child(*** of ***), :focus-visible, :focus-within classes • , elements

Slide 32

Slide 32 text

Live Coding 🛠

Slide 33

Slide 33 text

ࢀߟ • The future of React with Dan Abramov & Joe Savona (JS Party #267) |> Changelog • https://changelog.com/jsparty/267 • React Server Components: Part 1 - JSJ 582 - JavaScript Jabber - Top End Devs • https://topenddevs.com/podcasts/javascript-jabber/episodes/react-server-components-part-1- jsj-582 • React Server Components: Part 2- JSJ 583 - JavaScript Jabber - Top End Devs • https://topenddevs.com/podcasts/javascript-jabber/episodes/react-server-components-part-2- jsj-583 • React Server Components with Dan Abramov, Joe Savona, and Kent C. Dodds • https://www.youtube.com/watch?v=h7tur48JSaw • React Roundtable: Server Components, Suspense, and Actions - YouTube • https://www.youtube.com/watch?v=g5BGoLyGjY0

Slide 34

Slide 34 text

Thank you!