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

at Encraft #4 React/Next.js 最前線
https://knowledgework.connpass.com/event/285601/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. ͜Ε·Ͱͷ React
   

   View Slide

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

   View Slide

7. ࠷ۙͷ React ͷมԽ
   

   View Slide

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

   View Slide

9. 
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. 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
    

    View Slide

22. Next ͷ App Router
    

    View Slide

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

    View Slide

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

    View Slide

25. ͜Ε·Ͱͷߟ͑ํͷҧ͍
    

    View Slide

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

    View Slide

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

    View Slide

28. ΞϓϦέʔγϣϯશମ͕ React Tree ʹ
    Data
    ͜Ε·Ͱ
    Client Server
    

    View Slide

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

    View Slide

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

    View Slide

31. 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
    

    View Slide

32. Live Coding 🛠
    

    View Slide

33. ࢀߟ
    • 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
    

    View Slide

34. Thank you!
    

    View Slide