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