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
7.5k
Wantedlyのフロントエンド領域の取り組みと課題
JSConf JP 2022 のスポンサー LT で発表したスライドです。
Wantedly のフロントエンドが抱える課題について、直近数年間の取り組みと今後に向けた方針などについて話しました。
Tsuyoshi HARA
November 26, 2022
Tweet
Share
More Decks by Tsuyoshi HARA
See All by Tsuyoshi HARA
スキーマ駆動で加速するフロントエンド開発
chloe463
0
65
Wantedly のフロントエンド領域の取り組みと課題
chloe463
0
32
GraphQL Fragment Colocation の話
chloe463
1
520
デザインシステム仕切り直し
chloe463
1
2.5k
5分でできる生産性改善~ESLint Custom Rule を作ろう~
chloe463
0
3.7k
GraphQLサーバーのスキーマファースト開発を半年経て
chloe463
2
2.2k
Other Decks in Programming
See All in Programming
英語
s_shimotori
1
220
Rust.Nagoya #1
codemountains
0
170
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Temporalを取り巻く仕様を整理する
sajikix
0
120
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Product Management LT会_クアンド新家
shinshin
0
260
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Agile that works and the tools we love
rasmusluckow
325
20k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Leading Effective Engineering Teams 2024
addyosmani
3
300
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!