Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Tsuyoshi HARA
November 26, 2022

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

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

Tsuyoshi HARA

November 26, 2022
Tweet

More Decks by Tsuyoshi HARA

Other Decks in Programming

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