Wantedly のフロントエンド領域の取り組みと課題

2024/05/24 (金) にウォンテッドリー社で開催された "Wantedly Tech Night #1" で話した内容になります。
ウォンテッドリーのフロントエンド領域の直近数年間の改善の取り組みと、これから目指したいところ、課題などを話しています。

Transcript

1. ©2024 Wantedly, Inc. WantedlyͷϑϩϯτΤϯυྖҬͷऔΓ૊Έͱ՝୊ Wantedly Tech Night #1 LT May 24, 2024
2. ©2024 Wantedly, Inc. ݪ
   ߶࢜
   5TVZPTIJ
   )BSB !DIMPF w 8BOUFEMZ
   *OD
   w 'SPOUFOE
   $IBQUFS
   -FBE
   w ࠷ۙͷझຯɾ޷͖ͳ΋ͷ
   w #"#:.&5"-
   w ࢄา
   
   μΠΤοτ ࣗݾ঺հ
3. ©2024 Wantedly, Inc. • ௚ۙ਺೥ͷϑϩϯτΤϯυվળͷऔΓ૊Έ • ࠓޙղܾ͍͖͍ͯͨ͠՝୊΍ల๬ ࿩͢͜ͱ
4. ©2024 Wantedly, Inc. 8BOUFEMZ
   ͸αʔϏε։͔࢝Β
   ೥Ҏ্͕ܦա ·͕͖͑
5. ©2024 Wantedly, Inc. ࠓޙ΋8BOUFEMZ
   ͷ
   8FC
   ΞϓϦΛ
   ΋ͬͱ͍͍ײ͡ʹ͍͖͍ͯͨ͠ ·͕͖͑
6. ©2024 Wantedly, Inc. αʔϏεՁ஋Λܧଓతʹ
   Ϣʔβʔʹಧ͚Δ
   ٕज़ج൫ɾ૊৫Λ੔උ͍ͨ͠ ·͕͖͑
7. ©2024 Wantedly, Inc. ͦͷͨΊʹ͸ղܾ͢Δ΂͖
   ՝୊͕ͨ͘͞Μ͋Δ ·͕͖͑
8. ©2024 Wantedly, Inc. ௚ۙ਺೥ͷऔΓ૊Έͱ
   ࠓޙͷํ਑ͳͲʹ͍ͭͯ࿩͠·͢ ·͕͖͑
9. ©2024 Wantedly, Inc. 1. ཧ૝ڷ 2. ݱࡏ஍ͱཧ૝ڷʹࢸΔͨΊͷऔΓ૊Έ 1. 10೥ؒͰͰ͖ͨ஍૚ͷղফ 2. σβΠϯγεςϜͷ React ࣮૷ͷ੔උ 3. R&D ໨࣍
10. ©2024 Wantedly, Inc. զʑͷཧ૝ڷ 3VCZ
    PO
    3BJMT
    ج൫͔Βͷ୤٫ͱ
    /FYUKT
    ج൫΁ͷҠߦ
11. ©2024 Wantedly, Inc. զʑͷཧ૝ڷ (2024/05/24࣌఺) Web ΞϓϦ͕ಠཱͨ͠ Next.js ج൫ʹ͋Γɺ όοΫΤϯυͱ GraphQL Ͱ௨৴͍ͯ͠Δঢ়ଶ
12. ©2024 Wantedly, Inc. զʑͷݱࡏ஍ (2024/05/24࣌఺) Web ΞϓϦ͕ಠཱ͓ͯ͠Βͣ ෳ਺ͷٕज़ج൫ͷ্ʹ৐͍ͬͯΔঢ়ଶ
13. ©2024 Wantedly, Inc. 10೥ؒͰͰ͖ͨ஍૚ͷղফ վળͷྺ࢙
14. ©2024 Wantedly, Inc. 10೥ؒͰͰ͖ͨ஍૚ͷղফ Wantedly ͷϑϩϯτΤϯυʹ͸4ͭͷ஍૚͕͋Δ
15. ©2024 Wantedly, Inc. v2 ͷ css module → styled-components Ҡߦ 10೥ؒͰͰ͖ͨ஍૚ͷղফ 2020೥ʙ2021೥ʹ͔͚ͯߦΘΕͨϑϩϯτΤϯυ࡮৽ͷ ϓϩδΣΫτͷҰ؏Ͱɺv2Ͱ΋styled-components͕ ࢖ΘΕΔΑ͏ʹͳΓ·ͨ͠ɻ ͜Ε·Ͱͷվળͷྺ࢙
16. ©2024 Wantedly, Inc. 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙ v2 ͷ css module → styled-components Ҡߦ
17. ©2024 Wantedly, Inc. v2 ͷ JavaScript → TypeScript v2, v3 ͸ಉ͡ϨϙδτϦ্ʹଘࡏ͍ͯ͠·͕͢ɺͦΕͧ Ε JS, TS Ͱॻ͔Ε͓ͯΓɺ·ͨผʑͷ webpack ͷઃఆ ϑΝΠϧ͕ॻ͔Ε͍ͯ·ͨ͠ɻ ͦΕΒΛ౷߹Ͱ͖ͨ͜ͱʹΑΓɺv2 ͱ v3 ͷڥք͕͍͋ ·͍ʹͳΓͦΕ΄Ͳҙࣝ͢Δ͜ͱ͕গͳ͘ͳΓ·ͨ͠ɻ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
18. ©2024 Wantedly, Inc. 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙ v2 ͷ JavaScript → TypeScript
19. ©2024 Wantedly, Inc. v1 ͷ CoffeeScript ͷ JS Խ Developer eXperience (DX) squad ͷऔΓ૊ΈʹΑΓɺ v1 Ͱ࢖༻͞Ε͍ͯͨ CoffeeScript ͕ JavaScript ΁ͱม ׵͞Ε·ͨ͠ɻ ຊདྷ͸ TypeScript Ҡߦ·ͰͰ͖Δͱྑ͍ͷͰ͕͢ɺݹ͍ ػೳͰͲ͜·Ͱ΍Δ͔ͱ͍͏؍఺Ͱߟ͑ΔͱҰ୴͜͜· ͰͰ΋͍͍͔ͳͱߟ͍͑ͯ·͢ɻ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
20. ©2024 Wantedly, Inc. 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙ v1 ͷ CoffeeScript ͷ JS Խ
21. ©2024 Wantedly, Inc. ٕज़త஍૚Λ઴ਐతʹվળ͍ͯ͠Δ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
22. ©2024 Wantedly, Inc. 5೥લ͔Βͷ Before/After 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͳΜͱ͍͏͜ͱͰ͠ΐ͏
23. ©2024 Wantedly, Inc. W
    ͱ
    W  
    ͷؒʹ͸அઈ͕͋Δ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
24. ©2024 Wantedly, Inc. Wʹ͍ΔػೳΛ
    3FBDU
    Խͯ͠
    
    W
    ʹ͍͖͍࣋ͬͯͨ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
25. ©2024 Wantedly, Inc. v1 ʹࡌ͍ͬͯΔػೳΛ v4 ʹগͣͭ͠Ҡߦ͍ͨ͠ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
26. ©2024 Wantedly, Inc. ืूҰཡɾৄࡉը໘ΛNext.jsج൫΁Ҡߦ (~2023೥) 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
27. ©2024 Wantedly, Inc. /FYUKT
    ج൫΁ͷҠߦਪਐ͍ͨ͠ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ࠷ऴతʹ͸
28. ©2024 Wantedly, Inc. σβΠϯγεςϜͷ React ࣮૷ͷ੔උ ύοέʔδͷϒϥογϡΞοϓͱެ։໨ࢦ͍ͨ͠
29. ©2024 Wantedly, Inc. σβΠϯγεςϜͷ੔උ σβΠϯγεςϜʹྗΛೖΕ͍ͯΔ
30. ©2024 Wantedly, Inc. ࣮͸σβΠϯγεςϜͷ
    3FBDU࣮૷ʹ΋஍૚͕͋Δ σβΠϯγεςϜͷ੔උ
31. ©2024 Wantedly, Inc. σβΠϯγεςϜͷ੔උ ݟͨ໨͚ͩ͸Ͱ͖͍ͯͨ v1
32. ©2024 Wantedly, Inc. σβΠϯγεςϜͷ੔උ σβΠφʔͷࢥ૝΋൓өͤͨ͞ v2
33. ©2024 Wantedly, Inc. σβΠϯγεςϜͷ੔උ લੈ୅ͷ՝୊Λղܾ͢Δ΂͘ੜ·Εͨv3
34. ©2024 Wantedly, Inc. ϖʔδʹΑͬͯґଘ͍ͯ͠Δ
    ύοέʔδͷόʔδϣϯ͕ҟͳΔ σβΠϯγεςϜͷ੔උ
35. ©2024 Wantedly, Inc. W΁ͷҠߦਪਐ͍ͨ͠ σβΠϯγεςϜͷ੔උ
36. ©2024 Wantedly, Inc. σβΠϯγεςϜͷ੔උ ESLint ϧʔϧ΍ JSDoc Λ࢖ͬͯҠߦΛଅ͍ͯ͠Δ
37. ©2024 Wantedly, Inc. σβΠϯγεςϜͷ੔උ Design System Guild ʹΑΔվળ React ࣮૷Λ੔͑Δ͚ͩͰ͸ͳ͘ࠓճͷࢥ૝΍ఆٛͷ Ϩϕϧ͔ΒվળͰ͖ΔΑ͏ʹؔ܎͢ΔΤϯδχΞͱ σβΠφʔΛूΊͨ૊৫Λ্ཱͪ͛·ͨ͠ɻ
38. ©2024 Wantedly, Inc. ͍ͣΕ͸ύοέʔδެ։΋໨ࢦ͍ͨ͠ σβΠϯγεςϜͷ React ࣮૷੔උ
39. ©2024 Wantedly, Inc. R&D ະདྷʹ޲͚ͯ
40. ©2024 Wantedly, Inc. R&D αʔϏεՁ஋޲্ʹͭͳ͕Δٕज़తͳνϟϨϯδΛ ਪਐ͍ͨ͠ • ΑΓྑ͍ UX ͷͨΊʹ Island Architecture ͷϑϨʔϜϫʔΫݕূͨ͠Γ • ΑΓྑ͍ DX ͷͨΊʹ ESbuild ͱ͔ SWC ͱ͔ vite ͱ͔࢖ͬͨϏϧυߴ଎Λߟ͑ͨΓ • Edge Compute Λ࢖ͬͨػೳͷՄೳੑΛ୳ͬͨΓ
41. ©2024 Wantedly, Inc. ·ͱΊ
42. ©2024 Wantedly, Inc. • ௚ۙ਺೥ͷ Frontend Chapter ͷऔΓ૊Έ • ࠓޙղܾ͍͖͍ͯͨ͠՝୊ ࿩ͨ͜͠ͱ 1. 10೥ؒͰͰ͖ͨ஍૚ͷղফ 2. σβΠϯγεςϜͷ React ࣮૷ͷ੔උ 3. R&D
43. ©2024 Wantedly, Inc. ࿩Λฉ͖ʹདྷ͍ͯͩ͘͞ʂ We’re hiring!
44. ©2024 Wantedly, Inc. Thank you!