Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Wantedlyのフロントエンド領域の取り組みと課題
Search
Tsuyoshi HARA
November 26, 2022
Programming
0
8.2k
Wantedlyのフロントエンド領域の取り組みと課題
JSConf JP 2022 のスポンサー LT で発表したスライドです。
Wantedly のフロントエンドが抱える課題について、直近数年間の取り組みと今後に向けた方針などについて話しました。
Tsuyoshi HARA
November 26, 2022
Tweet
Share
More Decks by Tsuyoshi HARA
See All by Tsuyoshi HARA
Design System Guild の1年を振り返る
chloe463
0
130
スキーマ駆動で加速するフロントエンド開発
chloe463
0
380
Wantedly のフロントエンド領域の取り組みと課題
chloe463
0
160
GraphQL Fragment Colocation の話
chloe463
2
1.1k
デザインシステム仕切り直し
chloe463
1
3.1k
5分でできる生産性改善~ESLint Custom Rule を作ろう~
chloe463
0
4k
GraphQLサーバーのスキーマファースト開発を半年経て
chloe463
2
2.5k
Other Decks in Programming
See All in Programming
Le côté obscur des IA génératives
pascallemerrer
0
140
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
270
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
理論と実務のギャップを超える
eycjur
0
120
開発生産性を上げるための生成AI活用術
starfish719
3
400
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
660
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
Serena MCPのすすめ
wadakatu
4
960
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
140
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
270
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
350
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Balancing Empowerment & Direction
lara
4
680
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
How STYLIGHT went responsive
nonsquared
100
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Automating Front-end Workflow
addyosmani
1371
200k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The World Runs on Bad Software
bkeepers
PRO
71
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Being A Developer After 40
akosma
91
590k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
©2021 Wantedly, Inc. WantedlyͷϑϩϯτΤϯυྖҬͷऔΓΈͱ՝ JSConf JP 2022 εϙϯαʔ LT Nov
26, 2022
©2021 Wantedly, Inc. ݪ߶࢜ 5TVZPTIJ)BSB !DIMPF w 8BOUFEMZ *OD w
'SPOUFOE$IBQUFS-FBE w ࠷ۙͷझຯɾ͖ͳͷ 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/After 10ؒͰͰ͖ͨͷղফ ͳΜͱ͍͏͜ͱͰ͠ΐ͏
©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. Advertisement Wantedly ͷΤϯδχΞ৫ͱͯ͠ɺ৽نࢀೖऀʹ͚ͯ ʮ͜ΕΛ͓͍ͬͯͯ΄͍͠ʂʯ͜ͱΛɺ֎෦ʹެ։ Ͱ͖ΔΑ͏ʹ·ͱΊͨυΩϡϝϯτͰ͢ɻ Spatial chat
ͷεϙϯαʔϒʔεͰཧຊΛ༣ૹͰ ϓϨθϯτ͢Δاըͬͯ·͢ͷͰͥͻ͓͕͚ͩ͘͞ ͍ʂ Wantedly ͷٕज़͕٧·ͬͨυΩϡϝϯτެ։த
©2021 Wantedly, Inc. Λฉ͖ʹདྷ͍ͯͩ͘͞ʂ Advertisement
©2021 Wantedly, Inc. Thank you!