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

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

Transcript

1. ©2021 Wantedly, Inc.
   WantedlyͷϑϩϯτΤϯυྖҬͷऔΓ૊Έͱ՝୊
   JSConf JP 2022 εϙϯαʔ LT
   Nov 26, 2022
   

   View Slide

2. ©2021 Wantedly, Inc.
   ݪ߶࢜ 5TVZPTIJ)BSB
   
   !DIMPF
   w 8BOUFEMZ *OD
   w 'SPOUFOE$IBQUFS-FBE
   w ࠷ۙͷझຯɾ޷͖ͳ΋ͷ
   w ΏΔݴޠֶϥδΦ
   w ೫໦ࡔ
   w ౔ುͰਬ͍ͨ͝൧
   ࣗݾ঺հ
   

   View Slide

3. ©2021 Wantedly, Inc.
   • ௚ۙ਺೥ͷϑϩϯτΤϯυվળͷऔΓ૊Έ
   • ࠓޙղܾ͍͖͍ͯͨ͠՝୊
   ࿩͢͜ͱ
   

   View Slide

4. ©2021 Wantedly, Inc.
   8BOUFEMZ͸αʔϏε։͔࢝Β
   ೥Ҏ্͕ܦա
   ·͕͖͑
   

   View Slide

5. ©2021 Wantedly, Inc.
   ࠓޙ΋8BOUFEMZͷ8FCΞϓϦΛ
   ΋ͬͱ͍͍ײ͡ʹ͍͖͍ͯͨ͠
   ·͕͖͑
   

   View Slide

6. ©2021 Wantedly, Inc.
   αʔϏεՁ஋Λܧଓతʹ
   Ϣʔβʔʹಧ͚Δ
   ٕज़ج൫ɾ૊৫Λ੔උ͍ͨ͠
   ·͕͖͑
   

   View Slide

7. ©2021 Wantedly, Inc.
   ͦͷͨΊʹ͸ղܾ͢Δ΂͖
   ՝୊͕ͨ͘͞Μ͋Δ
   ·͕͖͑
   

   View Slide

8. ©2021 Wantedly, Inc.
   ௚ۙ਺೥ͷऔΓ૊Έͱ
   ࠓޙͷํ਑ͳͲʹ͍ͭͯ࿩͠·͢
   ·͕͖͑
   

   View Slide

9. ©2021 Wantedly, Inc.
   1. 10೥ؒͰͰ͖ͨ஍૚ͷղফ
   2. σβΠϯγεςϜͷ React ࣮૷ͷ੔උ
   3. R&D
   ໨࣍
   

   View Slide

10. ©2021 Wantedly, Inc.
    10೥ؒͰͰ͖ͨ஍૚ͷղফ
    3VCZPO3BJMTج൫͔Β/FYUKTج൫΁ͷҠߦ
    

    View Slide

11. ©2021 Wantedly, Inc.
    10೥ؒͰͰ͖ͨ஍૚ͷղফ
    Wantedly ͷϑϩϯτΤϯυʹ͸4ͭͷ஍૚͕͋Δ
    

    View Slide

12. ©2021 Wantedly, Inc.
    v2 ͷ styled-components Խ
    10೥ؒͰͰ͖ͨ஍૚ͷղফ
    2020೥ʙ2021೥ʹ͔͚ͯߦΘΕͨϑϩϯτΤϯυ࡮৽ͷ
    ϓϩδΣΫτͷҰ؏Ͱɺv2Ͱ΋styled-components͕
    ࢖ΘΕΔΑ͏ʹͳͬͨɻ
    ͜Ε·Ͱͷվળͷྺ࢙
    

    View Slide

13. ©2021 Wantedly, Inc.
    v2 ͷ styled-components Խ
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
    

    View Slide

14. ©2021 Wantedly, Inc.
    v2 ͷ TypeScript Խ
    v2, v3 ͸ಉ͡ϨϙδτϦ্ʹଘࡏ͠ɺ͔ͭผʑͷ
    webpack ͷઃఆϑΝΠϧ͕ॻ͔Ε͍ͯ·ͨ͠ɻ
    ͦΕΒΛ౷߹Ͱ͖ͨ͜ͱʹΑΓɺv2 ͱ v3 ͷڥք͕͍͋
    ·͍ʹͳΓͦΕ΄Ͳҙࣝ͢Δ͜ͱ͕গͳ͘ͳΓ·ͨ͠ɻ
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
    

    View Slide

15. ©2021 Wantedly, Inc.
    10೥ؒͰͰ͖ͨ஍૚ͷղফ
    v2 ͷ TypeScript Խ
    ͜Ε·Ͱͷվળͷྺ࢙
    

    View Slide

16. ©2021 Wantedly, Inc.
    v1 ͷ CoffeeScript ͷ JS Խ
    Developer eXperience (DX) squad ͷऔΓ૊ΈʹΑΓɺ
    v1 Ͱ࢖༻͞Ε͍ͯͨ CoffeeScript ͕ JavaScript ΁ͱม
    ׵͞Εͨɻ
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
    

    View Slide

17. ©2021 Wantedly, Inc.
    v1 ͷ CoffeeScript ͷ JS Խ
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
    

    View Slide

18. ©2021 Wantedly, Inc.
    ٕज़త஍૚Λ઴ਐతʹվળ͍ͯ͠Δ
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε·Ͱͷվળͷྺ࢙
    

    View Slide

19. ©2021 Wantedly, Inc.
    3೥લ͔Βͷ Before/After
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͳΜͱ͍͏͜ͱͰ͠ΐ͏
    

    View Slide

20. ©2021 Wantedly, Inc.
    WͱW ͷؒʹ͸அઈ͕͋Δ
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
    

    View Slide

21. ©2021 Wantedly, Inc.
    Wʹ͍ΔػೳΛ3FBDUԽͯ͠
    Wʹ͍͖͍࣋ͬͯͨ
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
    

    View Slide

22. ©2021 Wantedly, Inc.
    v1 ʹࡌ͍ͬͯΔػೳΛ v4 ʹগͣͭ͠Ҡߦ͍ͨ͠
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ͜Ε͔Βͷվળͷํ਑
    

    View Slide

23. ©2021 Wantedly, Inc.
    /FYUKTج൫΁ͷҠߦਪਐ͍ͨ͠
    10೥ؒͰͰ͖ͨ஍૚ͷղফ ࠷ऴతʹ͸
    

    View Slide

24. ©2021 Wantedly, Inc.
    σβΠϯγεςϜͷ React ࣮૷ͷ੔උ
    ύοέʔδͷϒϥογϡΞοϓͱެ։໨ࢦ͍ͨ͠
    

    View Slide

25. ©2021 Wantedly, Inc.
    σβΠϯγεςϜͷ React ࣮૷੔උ
    σβΠϯγεςϜʹྗΛೖΕ͍ͯΔ
    

    View Slide

26. ©2021 Wantedly, Inc.
    ࣮͸σβΠϯγεςϜͷ
    3FBDU࣮૷ʹ΋஍૚͕͋Δ
    σβΠϯγεςϜͷ React ࣮૷੔උ
    

    View Slide

27. ©2021 Wantedly, Inc.
    σβΠϯγεςϜͷ React ࣮૷੔උ
    ݟͨ໨͚ͩ͸Ͱ͖͍ͯͨ v1
    

    View Slide

28. ©2021 Wantedly, Inc.
    σβΠϯγεςϜͷ React ࣮૷੔උ
    σβΠφʔͷࢥ૝΋൓өͤͨ͞ v2
    

    View Slide

29. ©2021 Wantedly, Inc.
    σβΠϯγεςϜͷ React ࣮૷੔උ
    લੈ୅ͷ՝୊Λղܾ͢Δ΂͘ੜ·Εͨv3
    

    View Slide

30. ©2021 Wantedly, Inc.
    ϖʔδʹΑͬͯґଘ͍ͯ͠Δ
    ύοέʔδͷόʔδϣϯ͕ҟͳΔ
    σβΠϯγεςϜͷ React ࣮૷੔උ
    

    View Slide

31. ©2021 Wantedly, Inc.
    W΁ͷҠߦਪਐ͍ͨ͠
    σβΠϯγεςϜͷ React ࣮૷੔උ
    

    View Slide

32. ©2021 Wantedly, Inc.
    σβΠϯγεςϜͷ React ࣮૷੔උ
    ESLint ϧʔϧ΍ JSDoc Λ࢖ͬͯҠߦΛଅ͍ͯ͠Δ
    

    View Slide

33. ©2021 Wantedly, Inc.
    ͍ͣΕ͸ύοέʔδެ։΋໨ࢦ͍ͨ͠
    σβΠϯγεςϜͷ React ࣮૷੔උ
    

    View Slide

34. ©2021 Wantedly, Inc.
    R&D
    ະདྷʹ޲͚ͯ
    

    View Slide

35. ©2021 Wantedly, Inc.
    R&D
    αʔϏεՁ஋޲্ʹͭͳ͕Δٕज़తͳνϟϨϯδΛ
    ਪਐ͍ͨ͠
    • ΑΓྑ͍ UX ͷͨΊʹ Island Architecture ͷϑϨʔϜϫʔΫݕূͨ͠Γ
    • ΑΓྑ͍ DX ͷͨΊʹ ESbuild ͱ͔ SWC ͱ͔ vite ͱ͔࢖ͬͨϏϧυߴ଎Λߟ͑ͨΓ
    • Edge Compute Λ࢖ͬͨػೳͷՄೳੑΛ୳ͬͨΓ
    

    View Slide

36. ©2021 Wantedly, Inc.
    ·ͱΊ
    

    View Slide

37. ©2021 Wantedly, Inc.
    • ௚ۙ਺೥ͷ Frontend chapter ͷऔΓ૊Έ
    • ࠓޙղܾ͍͖͍ͯͨ͠՝୊
    ࿩ͨ͜͠ͱ
    1. 10೥ؒͰͰ͖ͨ஍૚ͷղফ
    2. σβΠϯγεςϜͷ React ࣮૷ͷ੔උ
    3. R&D
    

    View Slide

38. ©2021 Wantedly, Inc.
    Advertisement
    Wantedly ͷΤϯδχΞ૊৫ͱͯ͠ɺ৽نࢀೖऀʹ޲͚ͯ
    ʮ͜ΕΛ஌͓͍ͬͯͯ΄͍͠ʂʯ͜ͱΛɺ֎෦ʹ΋ެ։
    Ͱ͖ΔΑ͏ʹ·ͱΊͨυΩϡϝϯτͰ͢ɻ
    Spatial chat ͷεϙϯαʔϒʔεͰ෺ཧຊΛ༣ૹͰ
    ϓϨθϯτ͢Δاը΍ͬͯ·͢ͷͰͥͻ͓੠͕͚ͩ͘͞
    ͍ʂ
    Wantedly ͷٕज़͕٧·ͬͨυΩϡϝϯτެ։த
    

    View Slide

39. ©2021 Wantedly, Inc.
    ࿩Λฉ͖ʹདྷ͍ͯͩ͘͞ʂ
    Advertisement
    

    View Slide

40. ©2021 Wantedly, Inc.
    Thank you!
    

    View Slide