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!