フロントエンドの現在地とこれから

Transcript

1. ϑϩϯτΤϯυͷݱࡏͱ͜Ε͔Β @koba04 - 2024/10/05 YAPC::Hakodate 2024

2. @koba04 • Frontend Engineer at Mercari • Frontend Advisor at

   SmartHR • OSS Contributor / Maintainer • ࢲͱ Perl • Amon2, Teng ͱ͔Ͱ Web ΞϓϦͭ ͘Δͷ͕޷͖Ͱͨ͠ • *::Tiny, *::Simple ܥͷ CPAN Module ͕޷͖ • or die “Error!” ͬͯॻ͘ͷ͕޷͖ Toru Kobayashi

3. ͜ͷτʔΫͷΰʔϧ 🏁 “ϑϩϯτΤϯυͷࠓͱ͜Ε͔ΒΛ ఺Ͱ͸ͳ͘ઢͰଊ͑ΒΕΔ”

4. Agenda • όϯυϥ 🙏 • ΤίγεςϜͷมԽ 🙏 • React ͷ࣍

   🙏 • αʔόʔͱϑϩϯτΤϯυ ✅ • ϑϩϯτΤϯυʁ ✅ 🙏: ͕࣌ؒ଍Γͳ͍ͷͰμΠδΣετͰ… 🙇

5. ⚠ ͜ͷτʔΫͰ͸ React Λ۩ମྫͱͯ͠ॻ͍͍ͯ·͕͢ɺ ɹ ࠜఈʹ͋Δߟ͑ํ͸ React ʹґଘ͠ͳ͍ ɹ ΋ͷͰ͋Δͱߟ͍͑ͯ·͢ɻ

6. όϯυϥ

7. None
8. None
9. None
10. None

11. ΤίγεςϜͷมԽ

12. None

13. React ͷ࣍

14. https://2023.stateo f js.com/en-US/libraries/front-end-frameworks/

15. None

16. αʔόʔͱϑϩϯτΤϯυ

17. None

18. https://2023.stateo f js.com/en-US/usage/#js_app_patterns

19. Data Fetching is hard https://github.com/vercel/swr/blob/main/src/core/use-swr.ts#L442-L463 How to handle... • Cache

    • Revalidate • Race Condition • Dedupe Requests
20. None
21. None
22. None
23. None
24. None
25. None
26. None
27. None
28. None
29. None

30. ϑϩϯτΤϯυʁ

31. ϑϩϯτΤϯυʁ • αʔόʔɺϒϥ΢βɺCDNɺ৔ॴ͸ؔ܎ͳ͘ϢʔβʔମݧΛى఺ʹऔΓ૊Ή΋ͷશͯ • ϒϥ΢βɺαʔόʔɺϏϧυɺશͯͷ؀ڥΛϑϧʹ׆༻ • e.g. Partial Pre-rendering (PPR,

    Next.js) • ͔ͭͯ Web ͱݺ͹Ε͍ͯͨ΋ͷʁ • UI Λॻ͘ݴޠͱͯ͠ͷ JavaScript • มԽΛආ͚ΔͷͰ͸ͳ͘ɺEncourage ͢ΔΞʔΩςΫνϟ • ந৅ԽͷϨΠϠʔʢ໨తʣΛҙࣝ͢Δ • React ͷ͕࣍དྷͨΒ…ʁ • τϨϯυʹགྷΒ͞Εͳ͍ https://www.herodevs.com/ https://softwareengineeringdaily.com/2024/08/27/17045/

32. Thank you