Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
©2024 Wantedly, Inc. WantedlyͷϑϩϯτΤϯυྖҬͷऔΓΈͱ՝ Wantedly Tech Night #1 LT May 24, 2024
Slide 2
Slide 2 text
©2024 Wantedly, Inc. ݪ߶࢜ 5TVZPTIJ)BSB !DIMPF w 8BOUFEMZ *OD w 'SPOUFOE$IBQUFS-FBE w ࠷ۙͷझຯɾ͖ͳͷ w #"#:.&5"- w ࢄาμΠΤοτ ࣗݾհ
Slide 3
Slide 3 text
©2024 Wantedly, Inc. • ۙͷϑϩϯτΤϯυվળͷऔΓΈ • ࠓޙղܾ͍͖͍ͯͨ͠՝ల ͢͜ͱ
Slide 4
Slide 4 text
©2024 Wantedly, Inc. 8BOUFEMZαʔϏε։͔࢝Β Ҏ্͕ܦա ·͕͖͑
Slide 5
Slide 5 text
©2024 Wantedly, Inc. ࠓޙ8BOUFEMZͷ8FCΞϓϦΛ ͬͱ͍͍ײ͡ʹ͍͖͍ͯͨ͠ ·͕͖͑
Slide 6
Slide 6 text
©2024 Wantedly, Inc. αʔϏεՁΛܧଓతʹ Ϣʔβʔʹಧ͚Δ ٕज़ج൫ɾ৫Λඋ͍ͨ͠ ·͕͖͑
Slide 7
Slide 7 text
©2024 Wantedly, Inc. ͦͷͨΊʹղܾ͢Δ͖ ՝͕ͨ͘͞Μ͋Δ ·͕͖͑
Slide 8
Slide 8 text
©2024 Wantedly, Inc. ۙͷऔΓΈͱ ࠓޙͷํͳͲʹ͍ͭͯ͠·͢ ·͕͖͑
Slide 9
Slide 9 text
©2024 Wantedly, Inc. 1. ཧڷ 2. ݱࡏͱཧڷʹࢸΔͨΊͷऔΓΈ 1. 10ؒͰͰ͖ͨͷղফ 2. σβΠϯγεςϜͷ React ࣮ͷඋ 3. R&D ࣍
Slide 10
Slide 10 text
©2024 Wantedly, Inc. զʑͷཧڷ 3VCZPO3BJMTج൫͔Βͷ٫ͱ/FYUKTج൫ͷҠߦ
Slide 11
Slide 11 text
©2024 Wantedly, Inc. զʑͷཧڷ (2024/05/24࣌) Web ΞϓϦ͕ಠཱͨ͠ Next.js ج൫ʹ͋Γɺ όοΫΤϯυͱ GraphQL Ͱ௨৴͍ͯ͠Δঢ়ଶ
Slide 12
Slide 12 text
©2024 Wantedly, Inc. զʑͷݱࡏ (2024/05/24࣌) Web ΞϓϦ͕ಠཱ͓ͯ͠Βͣ ෳͷٕज़ج൫ͷ্ʹ͍ͬͯΔঢ়ଶ
Slide 13
Slide 13 text
©2024 Wantedly, Inc. 10ؒͰͰ͖ͨͷղফ վળͷྺ࢙
Slide 14
Slide 14 text
©2024 Wantedly, Inc. 10ؒͰͰ͖ͨͷղফ Wantedly ͷϑϩϯτΤϯυʹ4ͭͷ͕͋Δ
Slide 15
Slide 15 text
©2024 Wantedly, Inc. v2 ͷ css module → styled-components Ҡߦ 10ؒͰͰ͖ͨͷղফ 2020ʙ2021ʹ͔͚ͯߦΘΕͨϑϩϯτΤϯυ৽ͷ ϓϩδΣΫτͷҰ؏Ͱɺv2Ͱstyled-components͕ ΘΕΔΑ͏ʹͳΓ·ͨ͠ɻ ͜Ε·Ͱͷվળͷྺ࢙
Slide 16
Slide 16 text
©2024 Wantedly, Inc. 10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙ v2 ͷ css module → styled-components Ҡߦ
Slide 17
Slide 17 text
©2024 Wantedly, Inc. v2 ͷ JavaScript → TypeScript v2, v3 ಉ͡ϨϙδτϦ্ʹଘࡏ͍ͯ͠·͕͢ɺͦΕͧ Ε JS, TS Ͱॻ͔Ε͓ͯΓɺ·ͨผʑͷ webpack ͷઃఆ ϑΝΠϧ͕ॻ͔Ε͍ͯ·ͨ͠ɻ ͦΕΒΛ౷߹Ͱ͖ͨ͜ͱʹΑΓɺv2 ͱ v3 ͷڥք͕͍͋ ·͍ʹͳΓͦΕ΄Ͳҙࣝ͢Δ͜ͱ͕গͳ͘ͳΓ·ͨ͠ɻ 10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙
Slide 18
Slide 18 text
©2024 Wantedly, Inc. 10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙ v2 ͷ JavaScript → TypeScript
Slide 19
Slide 19 text
©2024 Wantedly, Inc. v1 ͷ CoffeeScript ͷ JS Խ Developer eXperience (DX) squad ͷऔΓΈʹΑΓɺ v1 Ͱ༻͞Ε͍ͯͨ CoffeeScript ͕ JavaScript ͱม ͞Ε·ͨ͠ɻ ຊདྷ TypeScript Ҡߦ·ͰͰ͖Δͱྑ͍ͷͰ͕͢ɺݹ͍ ػೳͰͲ͜·ͰΔ͔ͱ͍͏؍Ͱߟ͑ΔͱҰ୴͜͜· ͰͰ͍͍͔ͳͱߟ͍͑ͯ·͢ɻ 10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙
Slide 20
Slide 20 text
©2024 Wantedly, Inc. 10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙ v1 ͷ CoffeeScript ͷ JS Խ
Slide 21
Slide 21 text
©2024 Wantedly, Inc. ٕज़తΛਐతʹվળ͍ͯ͠Δ 10ؒͰͰ͖ͨͷղফ ͜Ε·Ͱͷվળͷྺ࢙
Slide 22
Slide 22 text
©2024 Wantedly, Inc. 5લ͔Βͷ Before/After 10ؒͰͰ͖ͨͷղফ ͳΜͱ͍͏͜ͱͰ͠ΐ͏
Slide 23
Slide 23 text
©2024 Wantedly, Inc. WͱW ͷؒʹஅઈ͕͋Δ 10ؒͰͰ͖ͨͷղফ ͜Ε͔Βͷվળͷํ
Slide 24
Slide 24 text
©2024 Wantedly, Inc. Wʹ͍ΔػೳΛ3FBDUԽͯ͠ Wʹ͍͖͍࣋ͬͯͨ 10ؒͰͰ͖ͨͷղফ ͜Ε͔Βͷվળͷํ
Slide 25
Slide 25 text
©2024 Wantedly, Inc. v1 ʹࡌ͍ͬͯΔػೳΛ v4 ʹগͣͭ͠Ҡߦ͍ͨ͠ 10ؒͰͰ͖ͨͷղফ ͜Ε͔Βͷվળͷํ
Slide 26
Slide 26 text
©2024 Wantedly, Inc. ืूҰཡɾৄࡉը໘ΛNext.jsج൫Ҡߦ (~2023) 10ؒͰͰ͖ͨͷղফ ͜Ε͔Βͷվળͷํ
Slide 27
Slide 27 text
©2024 Wantedly, Inc. /FYUKTج൫ͷҠߦਪਐ͍ͨ͠ 10ؒͰͰ͖ͨͷղফ ࠷ऴతʹ
Slide 28
Slide 28 text
©2024 Wantedly, Inc. σβΠϯγεςϜͷ React ࣮ͷඋ ύοέʔδͷϒϥογϡΞοϓͱެ։ࢦ͍ͨ͠
Slide 29
Slide 29 text
©2024 Wantedly, Inc. σβΠϯγεςϜͷඋ σβΠϯγεςϜʹྗΛೖΕ͍ͯΔ
Slide 30
Slide 30 text
©2024 Wantedly, Inc. ࣮σβΠϯγεςϜͷ 3FBDU࣮ʹ͕͋Δ σβΠϯγεςϜͷඋ
Slide 31
Slide 31 text
©2024 Wantedly, Inc. σβΠϯγεςϜͷඋ ݟ͚ͨͩͰ͖͍ͯͨ v1
Slide 32
Slide 32 text
©2024 Wantedly, Inc. σβΠϯγεςϜͷඋ σβΠφʔͷࢥөͤͨ͞ v2
Slide 33
Slide 33 text
©2024 Wantedly, Inc. σβΠϯγεςϜͷඋ લੈͷ՝Λղܾ͢Δ͘ੜ·Εͨv3
Slide 34
Slide 34 text
©2024 Wantedly, Inc. ϖʔδʹΑͬͯґଘ͍ͯ͠Δ ύοέʔδͷόʔδϣϯ͕ҟͳΔ σβΠϯγεςϜͷඋ
Slide 35
Slide 35 text
©2024 Wantedly, Inc. WͷҠߦਪਐ͍ͨ͠ σβΠϯγεςϜͷඋ
Slide 36
Slide 36 text
©2024 Wantedly, Inc. σβΠϯγεςϜͷඋ ESLint ϧʔϧ JSDoc ΛͬͯҠߦΛଅ͍ͯ͠Δ
Slide 37
Slide 37 text
©2024 Wantedly, Inc. σβΠϯγεςϜͷඋ Design System Guild ʹΑΔվળ React ࣮Λ͑Δ͚ͩͰͳ͘ࠓճͷࢥఆٛͷ Ϩϕϧ͔ΒվળͰ͖ΔΑ͏ʹؔ͢ΔΤϯδχΞͱ σβΠφʔΛूΊͨ৫Λ্ཱͪ͛·ͨ͠ɻ
Slide 38
Slide 38 text
©2024 Wantedly, Inc. ͍ͣΕύοέʔδެ։ࢦ͍ͨ͠ σβΠϯγεςϜͷ React ࣮උ
Slide 39
Slide 39 text
©2024 Wantedly, Inc. R&D ະདྷʹ͚ͯ
Slide 40
Slide 40 text
©2024 Wantedly, Inc. R&D αʔϏεՁ্ʹͭͳ͕Δٕज़తͳνϟϨϯδΛ ਪਐ͍ͨ͠ • ΑΓྑ͍ UX ͷͨΊʹ Island Architecture ͷϑϨʔϜϫʔΫݕূͨ͠Γ • ΑΓྑ͍ DX ͷͨΊʹ ESbuild ͱ͔ SWC ͱ͔ vite ͱ͔ͬͨϏϧυߴΛߟ͑ͨΓ • Edge Compute ΛͬͨػೳͷՄೳੑΛ୳ͬͨΓ
Slide 41
Slide 41 text
©2024 Wantedly, Inc. ·ͱΊ
Slide 42
Slide 42 text
©2024 Wantedly, Inc. • ۙͷ Frontend Chapter ͷऔΓΈ • ࠓޙղܾ͍͖͍ͯͨ͠՝ ͨ͜͠ͱ 1. 10ؒͰͰ͖ͨͷղফ 2. σβΠϯγεςϜͷ React ࣮ͷඋ 3. R&D
Slide 43
Slide 43 text
©2024 Wantedly, Inc. Λฉ͖ʹདྷ͍ͯͩ͘͞ʂ We’re hiring!
Slide 44
Slide 44 text
©2024 Wantedly, Inc. Thank you!