JSConf JP 2022 のスポンサー LT で発表したスライドです。 Wantedly のフロントエンドが抱える課題について、直近数年間の取り組みと今後に向けた方針などについて話しました。
©2021 Wantedly, Inc.WantedlyͷϑϩϯτΤϯυྖҬͷऔΓΈͱ՝JSConf JP 2022 εϙϯαʔ LTNov 26, 2022
View Slide
©2021 Wantedly, Inc.ݪ߶࢜ 5TVZPTIJ)BSB!DIMPFw 8BOUFEMZ *ODw 'SPOUFOE$IBQUFS-FBEw ࠷ۙͷझຯɾ͖ͳͷw ΏΔݴޠֶϥδΦw ೫ࡔw ುͰਬ͍ͨ͝൧ࣗݾհ
©2021 Wantedly, Inc.• ۙͷϑϩϯτΤϯυվળͷऔΓΈ• ࠓޙղܾ͍͖͍ͯͨ͠՝͢͜ͱ
©2021 Wantedly, Inc.8BOUFEMZαʔϏε։͔࢝ΒҎ্͕ܦա·͕͖͑
©2021 Wantedly, Inc.ࠓޙ8BOUFEMZͷ8FCΞϓϦΛͬͱ͍͍ײ͡ʹ͍͖͍ͯͨ͠·͕͖͑
©2021 Wantedly, Inc.αʔϏεՁΛܧଓతʹϢʔβʔʹಧ͚Δٕज़ج൫ɾ৫Λඋ͍ͨ͠·͕͖͑
©2021 Wantedly, Inc.ͦͷͨΊʹղܾ͢Δ͖՝͕ͨ͘͞Μ͋Δ·͕͖͑
©2021 Wantedly, Inc.ۙͷऔΓΈͱࠓޙͷํͳͲʹ͍ͭͯ͠·͢·͕͖͑
©2021 Wantedly, Inc.1. 10ؒͰͰ͖ͨͷղফ2. σβΠϯγεςϜͷ React ࣮ͷඋ3. R&D࣍
©2021 Wantedly, Inc.10ؒͰͰ͖ͨͷղফ3VCZPO3BJMTج൫͔Β/FYUKTج൫ͷҠߦ
©2021 Wantedly, Inc.10ؒͰͰ͖ͨͷղফWantedly ͷϑϩϯτΤϯυʹ4ͭͷ͕͋Δ
©2021 Wantedly, Inc.v2 ͷ styled-components Խ10ؒͰͰ͖ͨͷղফ2020ʙ2021ʹ͔͚ͯߦΘΕͨϑϩϯτΤϯυ৽ͷϓϩδΣΫτͷҰ؏Ͱɺv2Ͱstyled-components͕ΘΕΔΑ͏ʹͳͬͨɻ͜Ε·Ͱͷվળͷྺ࢙
©2021 Wantedly, Inc.v2 ͷ styled-components Խ10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙
©2021 Wantedly, Inc.v2 ͷ TypeScript Խv2, v3 ಉ͡ϨϙδτϦ্ʹଘࡏ͠ɺ͔ͭผʑͷwebpack ͷઃఆϑΝΠϧ͕ॻ͔Ε͍ͯ·ͨ͠ɻͦΕΒΛ౷߹Ͱ͖ͨ͜ͱʹΑΓɺv2 ͱ v3 ͷڥք͕͍͋·͍ʹͳΓͦΕ΄Ͳҙࣝ͢Δ͜ͱ͕গͳ͘ͳΓ·ͨ͠ɻ10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙
©2021 Wantedly, Inc.10ؒͰͰ͖ͨͷղফv2 ͷ TypeScript Խ͜Ε·Ͱͷվળͷྺ࢙
©2021 Wantedly, Inc.v1 ͷ CoffeeScript ͷ JS ԽDeveloper eXperience (DX) squad ͷऔΓΈʹΑΓɺv1 Ͱ༻͞Ε͍ͯͨ CoffeeScript ͕ JavaScript ͱม͞Εͨɻ10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙
©2021 Wantedly, Inc.v1 ͷ CoffeeScript ͷ JS Խ10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙
©2021 Wantedly, Inc.ٕज़తΛਐతʹվળ͍ͯ͠Δ10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙
©2021 Wantedly, Inc.3લ͔Βͷ Before/After10ؒͰͰ͖ͨͷղফ ͳΜͱ͍͏͜ͱͰ͠ΐ͏
©2021 Wantedly, Inc.WͱW ͷؒʹஅઈ͕͋Δ10ؒͰͰ͖ͨͷղফ ͜Ε͔Βͷվળͷํ
©2021 Wantedly, Inc.Wʹ͍ΔػೳΛ3FBDUԽͯ͠Wʹ͍͖͍࣋ͬͯͨ10ؒͰͰ͖ͨͷղফ ͜Ε͔Βͷվળͷํ
©2021 Wantedly, Inc.v1 ʹࡌ͍ͬͯΔػೳΛ v4 ʹগͣͭ͠Ҡߦ͍ͨ͠10ؒͰͰ͖ͨͷղফ ͜Ε͔Βͷվળͷํ
©2021 Wantedly, Inc./FYUKTج൫ͷҠߦਪਐ͍ͨ͠10ؒͰͰ͖ͨͷղফ ࠷ऴతʹ
©2021 Wantedly, Inc.σβΠϯγεςϜͷ React ࣮ͷඋύοέʔδͷϒϥογϡΞοϓͱެ։ࢦ͍ͨ͠
©2021 Wantedly, Inc.σβΠϯγεςϜͷ React ࣮උσβΠϯγεςϜʹྗΛೖΕ͍ͯΔ
©2021 Wantedly, Inc.࣮σβΠϯγεςϜͷ3FBDU࣮ʹ͕͋ΔσβΠϯγεςϜͷ React ࣮උ
©2021 Wantedly, Inc.σβΠϯγεςϜͷ React ࣮උݟ͚ͨͩͰ͖͍ͯͨ v1
©2021 Wantedly, Inc.σβΠϯγεςϜͷ React ࣮උσβΠφʔͷࢥөͤͨ͞ v2
©2021 Wantedly, Inc.σβΠϯγεςϜͷ React ࣮උલੈͷ՝Λղܾ͢Δ͘ੜ·Εͨv3
©2021 Wantedly, Inc.ϖʔδʹΑͬͯґଘ͍ͯ͠Δύοέʔδͷόʔδϣϯ͕ҟͳΔσβΠϯγεςϜͷ React ࣮උ
©2021 Wantedly, Inc.WͷҠߦਪਐ͍ͨ͠σβΠϯγεςϜͷ React ࣮උ
©2021 Wantedly, Inc.σβΠϯγεςϜͷ React ࣮උESLint ϧʔϧ JSDoc ΛͬͯҠߦΛଅ͍ͯ͠Δ
©2021 Wantedly, Inc.͍ͣΕύοέʔδެ։ࢦ͍ͨ͠σβΠϯγεςϜͷ React ࣮උ
©2021 Wantedly, Inc.R&Dະདྷʹ͚ͯ
©2021 Wantedly, Inc.R&DαʔϏεՁ্ʹͭͳ͕Δٕज़తͳνϟϨϯδΛਪਐ͍ͨ͠• ΑΓྑ͍ UX ͷͨΊʹ Island Architecture ͷϑϨʔϜϫʔΫݕূͨ͠Γ• ΑΓྑ͍ DX ͷͨΊʹ ESbuild ͱ͔ SWC ͱ͔ vite ͱ͔ͬͨϏϧυߴΛߟ͑ͨΓ• Edge Compute ΛͬͨػೳͷՄೳੑΛ୳ͬͨΓ
©2021 Wantedly, Inc.·ͱΊ
©2021 Wantedly, Inc.• ۙͷ Frontend chapter ͷऔΓΈ• ࠓޙղܾ͍͖͍ͯͨ͠՝ͨ͜͠ͱ1. 10ؒͰͰ͖ͨͷղফ2. σβΠϯγεςϜͷ React ࣮ͷඋ3. R&D
©2021 Wantedly, Inc.AdvertisementWantedly ͷΤϯδχΞ৫ͱͯ͠ɺ৽نࢀೖऀʹ͚ͯʮ͜ΕΛ͓͍ͬͯͯ΄͍͠ʂʯ͜ͱΛɺ֎෦ʹެ։Ͱ͖ΔΑ͏ʹ·ͱΊͨυΩϡϝϯτͰ͢ɻSpatial chat ͷεϙϯαʔϒʔεͰཧຊΛ༣ૹͰϓϨθϯτ͢Δاըͬͯ·͢ͷͰͥͻ͓͕͚͍ͩ͘͞ʂWantedly ͷٕज़͕٧·ͬͨυΩϡϝϯτެ։த
©2021 Wantedly, Inc.Λฉ͖ʹདྷ͍ͯͩ͘͞ʂAdvertisement
©2021 Wantedly, Inc.Thank you!