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

YAPC::Hakodate 2024
https://fortee.jp/yapc-hakodate-2024/proposal/a2e39821-a91c-4d10-9db7-1e4d624d47ff

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. όϯυϥ
11. ΤίγεςϜͷมԽ
13. React ͷ࣍
14. https://2023.stateo f js.com/en-US/libraries/front-end-frameworks/
16. αʔόʔͱϑϩϯτΤϯυ
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
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