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.2k
Wantedlyのフロントエンド領域の取り組みと課題
JSConf JP 2022 のスポンサー LT で発表したスライドです。
Wantedly のフロントエンドが抱える課題について、直近数年間の取り組みと今後に向けた方針などについて話しました。
Tsuyoshi HARA
November 26, 2022
Tweet
Share
More Decks by Tsuyoshi HARA
See All by Tsuyoshi HARA
GraphQL Fragment Colocation の話
chloe463
0
260
デザインシステム仕切り直し
chloe463
1
2.1k
5分でできる生産性改善~ESLint Custom Rule を作ろう~
chloe463
0
3.5k
GraphQLサーバーのスキーマファースト開発を半年経て
chloe463
2
2.1k
Other Decks in Programming
See All in Programming
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
460
sbt-assemblyにハマってDB接続できず時間が溶けた話
wakye5815
1
660
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
830
『データ可視化学入門』をPythonからRに翻訳した話(増強版)
bob3bob3
0
280
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
850
一休.comレストランのRustバックエンド開発の様子
kymmt90
13
7.9k
まっちすいっち戦争 / match vs switch
takuyakatsusa
1
630
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
240
PHP で読む楽しいコアダンプ
sji
0
220
CSC308B Lecture 12
javiergs
PRO
0
110
before_rails_girls_after_rails_girls
maimux2x
0
310
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
2
490
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.1k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
GitHub's CSS Performance
jonrohan
1023
450k
What the flash - Photography Introduction
edds
64
11k
Docker and Python
trallard
33
2.6k
Done Done
chrislema
178
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
The Invisible Side of Design
smashingmag
293
49k
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!