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

JSConf JP 2022 のスポンサー LT で発表したスライドです。
Wantedly のフロントエンドが抱える課題について、直近数年間の取り組みと今後に向けた方針などについて話しました。

Transcript

1. ©2021 Wantedly, Inc. WantedlyͷϑϩϯτΤϯυྖҬͷऔΓ૊Έͱ՝୊ JSConf JP 2022 εϙϯαʔ LT Nov 26, 2022
2. ©2021 Wantedly, Inc. ݪ
   ߶࢜
   5TVZPTIJ
   )BSB !DIMPF w 8BOUFEMZ
   *OD
   w 'SPOUFOE
   $IBQUFS
   -FBE
   w ࠷ۙͷझຯɾ޷͖ͳ΋ͷ
   w ΏΔݴޠֶϥδΦ
   w ೫໦ࡔ
   w ౔ುͰਬ͍ͨ͝൧ ࣗݾ঺հ
3. ©2021 Wantedly, Inc. • ௚ۙ਺೥ͷϑϩϯτΤϯυվળͷऔΓ૊Έ • ࠓޙղܾ͍͖͍ͯͨ͠՝୊ ࿩͢͜ͱ
4. ©2021 Wantedly, Inc. 8BOUFEMZ
   ͸αʔϏε։͔࢝Β
   ೥Ҏ্͕ܦա ·͕͖͑
5. ©2021 Wantedly, Inc. ࠓޙ΋8BOUFEMZ
   ͷ
   8FC
   ΞϓϦΛ
   ΋ͬͱ͍͍ײ͡ʹ͍͖͍ͯͨ͠ ·͕͖͑
6. ©2021 Wantedly, Inc. αʔϏεՁ஋Λܧଓతʹ
   Ϣʔβʔʹಧ͚Δ
   ٕज़ج൫ɾ૊৫Λ੔උ͍ͨ͠ ·͕͖͑
7. ©2021 Wantedly, Inc. ͦͷͨΊʹ͸ղܾ͢Δ΂͖
   ՝୊͕ͨ͘͞Μ͋Δ ·͕͖͑
8. ©2021 Wantedly, Inc. ௚ۙ਺೥ͷऔΓ૊Έͱ
   ࠓޙͷํ਑ͳͲʹ͍ͭͯ࿩͠·͢ ·͕͖͑
9. ©2021 Wantedly, Inc. 1. 10೥ؒͰͰ͖ͨ஍૚ͷղফ 2. σβΠϯγεςϜͷ React ࣮૷ͷ੔උ 3. R&D ໨࣍
10. ©2021 Wantedly, Inc. 10೥ؒͰͰ͖ͨ஍૚ͷղফ 3VCZ
    PO
    3BJMT
    ج൫͔Β
    /FYUKT
    ج൫΁ͷҠߦ
11. ©2021 Wantedly, Inc. 10೥ؒͰͰ͖ͨ஍૚ͷղফ Wantedly ͷϑϩϯτΤϯυʹ͸4ͭͷ஍૚͕͋Δ
12. ©2021 Wantedly, Inc. v2 ͷ styled-components Խ 10೥ؒͰͰ͖ͨ஍૚ͷղফ 2020೥ʙ2021೥ʹ͔͚ͯߦΘΕͨϑϩϯτΤϯυ࡮৽ͷ ϓϩδΣΫτͷҰ؏Ͱɺv2Ͱ΋styled-components͕ ࢖ΘΕΔΑ͏ʹͳͬͨɻ ͜Ε·Ͱͷվળͷྺ࢙
13. ©2021 Wantedly, Inc. v2 ͷ styled-components Խ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
14. ©2021 Wantedly, Inc. v2 ͷ TypeScript Խ v2, v3 ͸ಉ͡ϨϙδτϦ্ʹଘࡏ͠ɺ͔ͭผʑͷ webpack ͷઃఆϑΝΠϧ͕ॻ͔Ε͍ͯ·ͨ͠ɻ ͦΕΒΛ౷߹Ͱ͖ͨ͜ͱʹΑΓɺv2 ͱ v3 ͷڥք͕͍͋ ·͍ʹͳΓͦΕ΄Ͳҙࣝ͢Δ͜ͱ͕গͳ͘ͳΓ·ͨ͠ɻ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
15. ©2021 Wantedly, Inc. 10೥ؒͰͰ͖ͨ஍૚ͷղফ v2 ͷ TypeScript Խ ͜Ε·Ͱͷվળͷྺ࢙
16. ©2021 Wantedly, Inc. v1 ͷ CoffeeScript ͷ JS Խ Developer eXperience (DX) squad ͷऔΓ૊ΈʹΑΓɺ v1 Ͱ࢖༻͞Ε͍ͯͨ CoffeeScript ͕ JavaScript ΁ͱม ׵͞Εͨɻ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
17. ©2021 Wantedly, Inc. v1 ͷ CoffeeScript ͷ JS Խ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
18. ©2021 Wantedly, Inc. ٕज़త஍૚Λ઴ਐతʹվળ͍ͯ͠Δ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
19. ©2021 Wantedly, Inc. 3೥લ͔Βͷ Before/After 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͳΜͱ͍͏͜ͱͰ͠ΐ͏
20. ©2021 Wantedly, Inc. W
    ͱ
    W  
    ͷؒʹ͸அઈ͕͋Δ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
21. ©2021 Wantedly, Inc. Wʹ͍ΔػೳΛ
    3FBDU
    Խͯ͠
    
    W
    ʹ͍͖͍࣋ͬͯͨ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
22. ©2021 Wantedly, Inc. v1 ʹࡌ͍ͬͯΔػೳΛ v4 ʹগͣͭ͠Ҡߦ͍ͨ͠ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
23. ©2021 Wantedly, Inc. /FYUKT
    ج൫΁ͷҠߦਪਐ͍ͨ͠ 10೥ؒͰͰ͖ͨ஍૚ͷղফ ࠷ऴతʹ͸
24. ©2021 Wantedly, Inc. σβΠϯγεςϜͷ React ࣮૷ͷ੔උ ύοέʔδͷϒϥογϡΞοϓͱެ։໨ࢦ͍ͨ͠
25. ©2021 Wantedly, Inc. σβΠϯγεςϜͷ React ࣮૷੔උ σβΠϯγεςϜʹྗΛೖΕ͍ͯΔ
26. ©2021 Wantedly, Inc. ࣮͸σβΠϯγεςϜͷ
    3FBDU࣮૷ʹ΋஍૚͕͋Δ σβΠϯγεςϜͷ React ࣮૷੔උ
27. ©2021 Wantedly, Inc. σβΠϯγεςϜͷ React ࣮૷੔උ ݟͨ໨͚ͩ͸Ͱ͖͍ͯͨ v1
28. ©2021 Wantedly, Inc. σβΠϯγεςϜͷ React ࣮૷੔උ σβΠφʔͷࢥ૝΋൓өͤͨ͞ v2
29. ©2021 Wantedly, Inc. σβΠϯγεςϜͷ React ࣮૷੔උ લੈ୅ͷ՝୊Λղܾ͢Δ΂͘ੜ·Εͨv3
30. ©2021 Wantedly, Inc. ϖʔδʹΑͬͯґଘ͍ͯ͠Δ
    ύοέʔδͷόʔδϣϯ͕ҟͳΔ σβΠϯγεςϜͷ React ࣮૷੔උ
31. ©2021 Wantedly, Inc. W΁ͷҠߦਪਐ͍ͨ͠ σβΠϯγεςϜͷ React ࣮૷੔උ
32. ©2021 Wantedly, Inc. σβΠϯγεςϜͷ React ࣮૷੔උ ESLint ϧʔϧ΍ JSDoc Λ࢖ͬͯҠߦΛଅ͍ͯ͠Δ
33. ©2021 Wantedly, Inc. ͍ͣΕ͸ύοέʔδެ։΋໨ࢦ͍ͨ͠ σβΠϯγεςϜͷ React ࣮૷੔උ
34. ©2021 Wantedly, Inc. R&D ະདྷʹ޲͚ͯ
35. ©2021 Wantedly, Inc. R&D αʔϏεՁ஋޲্ʹͭͳ͕Δٕज़తͳνϟϨϯδΛ ਪਐ͍ͨ͠ • ΑΓྑ͍ UX ͷͨΊʹ Island Architecture ͷϑϨʔϜϫʔΫݕূͨ͠Γ • ΑΓྑ͍ DX ͷͨΊʹ ESbuild ͱ͔ SWC ͱ͔ vite ͱ͔࢖ͬͨϏϧυߴ଎Λߟ͑ͨΓ • Edge Compute Λ࢖ͬͨػೳͷՄೳੑΛ୳ͬͨΓ
36. ©2021 Wantedly, Inc. ·ͱΊ
37. ©2021 Wantedly, Inc. • ௚ۙ਺೥ͷ Frontend chapter ͷऔΓ૊Έ • ࠓޙղܾ͍͖͍ͯͨ͠՝୊ ࿩ͨ͜͠ͱ 1. 10೥ؒͰͰ͖ͨ஍૚ͷղফ 2. σβΠϯγεςϜͷ React ࣮૷ͷ੔උ 3. R&D
38. ©2021 Wantedly, Inc. Advertisement Wantedly ͷΤϯδχΞ૊৫ͱͯ͠ɺ৽نࢀೖऀʹ޲͚ͯ ʮ͜ΕΛ஌͓͍ͬͯͯ΄͍͠ʂʯ͜ͱΛɺ֎෦ʹ΋ެ։ Ͱ͖ΔΑ͏ʹ·ͱΊͨυΩϡϝϯτͰ͢ɻ Spatial chat ͷεϙϯαʔϒʔεͰ෺ཧຊΛ༣ૹͰ ϓϨθϯτ͢Δاը΍ͬͯ·͢ͷͰͥͻ͓੠͕͚ͩ͘͞ ͍ʂ Wantedly ͷٕज़͕٧·ͬͨυΩϡϝϯτެ։த
39. ©2021 Wantedly, Inc. ࿩Λฉ͖ʹདྷ͍ͯͩ͘͞ʂ Advertisement
40. ©2021 Wantedly, Inc. Thank you!