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
サイボウズWebフロントエンド脱レガシーの今までとこれから
Search
Hiroyuki ANAI
March 10, 2021
Programming
5
17k
サイボウズWebフロントエンド脱レガシーの今までとこれから
UIT meetup vol.12『リニューアル戦略発表会(一部から全部まで)』 - connpass
https://uit.connpass.com/event/201312/
Hiroyuki ANAI
March 10, 2021
Tweet
Share
More Decks by Hiroyuki ANAI
See All by Hiroyuki ANAI
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
1
360
compilerOptions、全部読んだ
pirosikick
1
210
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
390
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
350
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.8k
Web Share Target API #w3fukuoka
pirosikick
0
670
Google I/O '19のWebをまとめる会
pirosikick
2
830
PuppeteerでいらないCSSを消す
pirosikick
23
29k
Progressive Hydration #react_fukuoka
pirosikick
5
1.7k
Other Decks in Programming
See All in Programming
Effect の双対、Coeffect
yukikurage
5
1.4k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
130
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
130
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
GraphRAGの仕組みまるわかり
tosuri13
7
460
Claude Codeの使い方
ttnyt8701
1
130
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
740
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
300
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
1
200
Java on Azure で LangGraph!
kohei3110
0
170
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
150
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
Why Our Code Smells
bkeepers
PRO
337
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Documentation Writing (for coders)
carmenintech
71
4.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
The Cult of Friendly URLs
andyhume
79
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
RailsConf 2023
tenderlove
30
1.1k
Transcript
!QJSPTJLJDL αΠϘζ 8FCϑϩϯτΤϯυϨΨγʔͷ ࠓ·Ͱͱ͜Ε͔Β 8FE 6*5NFFUVQWPMʰϦχϡʔΞϧઓུൃදձ Ұ෦͔Βશ෦·Ͱ ʱ
!QJSPTJLJDL w αΠϘζגࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜʢिʣ גࣜձࣾ;FOFΤϯδχΞʢिʣ w ࣗ༝ͳಇ͖ํͰ͖ΔαΠϘζɺΑ͍ w ԬʹॅΜͰ͍·͢👨 Ϗʔϧ͕͖Ͱ͢🍺
w ݄ʹೖࣾɺ ͣͬͱվળϨΨγʔΛͬͯ·͢ ݀Ҫ ࠷ۙҿΜͰ͏·͔ͬͨͭ 3FWJTJPO.PPO8PMG
w ࠓ·Ͱͷ w αΠϘζͷϑϩϯτΤϯυΤΩεύʔτνʔϜͰ ਐߦதͷϨΨγʔʹ͍ͭͯ w ͬͨ͜ͱɾ͍ͬͯΔ͜ͱ w ٕज़తͳ͋Ε͜Ε w
ݸਓతͳڭ܇ w ͜Ε͔Βͷ w ࠓޙͷ՝ w ˞ίʔυ΄ͱΜͲग़͖ͯ·ͤΜ
ࠓ·Ͱͷ
w αΠϘζͷϑϩϯτΤϯυΛ ࠷ߴʹ͢Δ w 8FCϑϩϯτΤϯυͷ؍͔Β ϓϩμΫτΛࢧԉ͢ΔνʔϜ w ݄ʹੜ w ݱࡏ໊
౦ژਓɺԬਓɺେࡕਓ ϑϩϯτΤϯυ ΤΩεύʔτνʔϜ ͜͜ˢ ʮαΠϘζͷϑϩϯτΤϯυΤΩεύʔτνʔϜͷհʯΑΓൈਮ IUUQTCMPHDZCP[VJPFOUSZ
αΠϘζͷϓϩμΫτ ΞϓϦɿσʔλϕʔεɺใڞ༗ɺίϛϡχέʔγϣϯΛͻͱͭʹ άϧʔϓΣΞɿେاۀ͚ཧػೳΛࡌ άϧʔϓΣΞɿதখاۀ͚͔ΜͨΜΒ͘Β͘άϧʔϓΣΞ ϝʔϧڞ༗ɿಧ͍ͨϝʔϧΛෳਓͰڞ༗Ͱ͖Δπʔϧ
αΠϘζͷϓϩμΫτ ΞϓϦɿσʔλϕʔεɺใڞ༗ɺίϛϡχέʔγϣϯΛͻͱͭʹ άϧʔϓΣΞɿେاۀ͚ཧػೳΛࡌ άϧʔϓΣΞɿதখاۀ͚͔ΜͨΜΒ͘Β͘άϧʔϓΣΞ ϝʔϧڞ༗ɿಧ͍ͨϝʔϧΛෳਓͰڞ༗Ͱ͖Δπʔϧ ͍ͭˢͷͭͷϓϩμΫτͷվળΛओʹߦ͍ͬͯΔͷͰ ࠓ͜ͷͭʹ͍ͭͯ͠·͢ɻ
ͬͨ͜ͱɾ͍ͬͯΔ͜ͱ Ұ෦ LJOUPOFͷελοΫࠒˠݱࡏ w $MPTVSF5PPMT w όʔδϣϯݹΊ w ಠࣗύον͋Γ w
4BTT $PNQBTT w +4)JOU w FUD w 5ZQF4DSJQUɾ3FBDUڥʹҠߦத w $MPTVSF5PPMTΞοϓσʔτத w ಠࣗύονͷҰ෦ຊՈʹϚʔδࡁ w $PNQBTT w &4-JOU w QSFUUJFSͷಋೖ
ͬͨ͜ͱɾ͍ͬͯΔ͜ͱ Ұ෦ ΨϧʔϯͷελοΫࠒˠݱࡏ w 1)1 K2VFSZɺҰ෦:6* w ϞόΠϧK2VFSZ.PCJMF w ੜͷ$44
w :6*ΛࣙΊΔରԠத w K2VFSZʹҰຊԽ w Ұ෦ͷෳࡶͳ6*3FBDUʹҠߦ w K2VFSZ.PCJMFΛ54ɾ3FBDUڥʹ Ҡߦத w 4BTTԽɻTUZMFMJOUͷಋೖ
Ҡߦʹؔ͢Δٕज़తͳ ҠߦͷਐΊํ w ΄ͱΜͲͷϖʔδ͕41"Ͱͳ͍ͷͰɺϖʔδͣͭஔ͖͍͑ͯΔ w ίʔυϕʔε͕ڊେͳͷͰɺ "45Λͬͨࣗಈมطଘࢿ࢈ͷྲྀ༻ͷಓ୳ٻ͕ͨ͠ɺ طଘࢿ࢈ͷྲྀ༻ͳΔ͘ߦΘͣʹஔ͖͍͑ͯΔ
Ҡߦʹؔ͢Δٕज़తͳ ҠߦͰؾΛ͚͍ͭͯΔ w BZతʹσάϨΛى͜͞ͳ͍Α͏ʹؾΛ͚͍ͭͯΔ w $MPTVSF-JCSBSZͱK2VFSZ.PCJMFɺBZతʹΑ͘Ͱ͖͍ͯΔ͕ଟʑ͋Δ w BZνʔϜͱ࿈ܞ͠ɺݱঢ়ͷ͍͍ɾѱ͍Λཧ w BZతʹ͍͍ͦͷ··ʹɺѱ͍վળ͢Δ
ݸਓతͳڭ܇ ઐνʔϜ͕͋ͬͯΑ͔ͬͨ w ϓϩμΫτ։ൃͱผʹϨΨγʔɾվળΛΔਓһ͕ډͯΑ͔ͬͨ w ٕज़తʹҰےೄͰ͍͔ͳ͍͜ͱ͕ଟʑ͋Γɺ ͦͷɺௐࠪͨ͠ΓઓུΛ࿅Δඞཁ͕͋ͬͨ w "45ʹΑΔࣗಈมϚΠΫϩϑϩϯτΤϯυͳͲɺ ઑͬͨΞϓϩʔνΛࢼͯ͠ݕ౼͢Δ༨༟͕͋ͬͨ
ݸਓతͳڭ܇ ͳΔ͘খ͘͞ਐΊΔ w Ұʹଟ͘ͷ͜ͱΛΖ͏ͱ͢Δͱ 13͕େ͖͘ͳͬͯɺϚʔδ·Ͱʹ͕͔͔࣌ؒΓ͕ͪ w ˠϚʔδઌϒϥϯνͱͷဃ͕େ͖͘ͳͬͯ͠·͍ɺਏ͍ w ˠϚʔδ࣌ͷϨϏϡʔ͕ਏ͍FUD w
ॻ੶ϞϊϦε͔ΒϚΠΫϩαʔϏεষ ʮϑΟʔυόοΫ͕ಘ͍͢ɺࣦഊͨ͠ͱ͖ʹϩʔϧόοΫ͍͢͠ʯ
8&# %#13&44WPM ಛूʮϑϩϯτΤϯυϨΨγʔʯ ʹ৭ʑॻ͍ͨͷͰڵຯ͕͋Ε ͥͻಡΜͰΈ͍ͯͩ͘͞🙏
αΠϘζͷϨΨγʔ ·ͩ࢝·͔ͬͨΓ💪
͜Ε͔Βͷ
ࠓޙͷ՝ ෳࡶͳ6*ͷҠߦ w ྫ͑ɺLJOUPOFͷϦονςΩετΤσΟλʔ w Ϣʔεέʔε͕ಛघͳͷͰɺطଘͷ044Ͱஔ͖͑Δͷ͕͍͠ w ͖͘߹͏ඞཁ͕͋Γͦ͏ w ଞʹLJOUPOFͷΞϓϦฤूʢϑΥʔϜ࡞ʣɺ
ΨϧʔϯͷεέδϡʔϧදࣔɾฤूͳͲ w طଘͷίʔυΛϥοϓ͢ΔͳͲͯ͠ҠߦΛޙճ͠ʹ͢Δɺ ͳͲͷઓུ͕ඞཁʹͳΔ͔
ࠓޙͷ՝ ϢʔβʔΧελϚΠζͷରԠ w Ϣʔβʔ͕+4$44ΛՃͯ͠ɺ LJOUPOFΨϧʔϯͷը໘্Ͱ࣮ߦͰ͖Δػೳ͕͋Δ w 3FBDUɺ3FBDU֎͔Βͷ%0.ૢ࡞ͱ૬ੑ͕ѱ͍ͷͰɺ ৽͍͠ελοΫҠߦޙʹϢʔβʔΧελϚΠζΛͲͷΑ͏ʹ࣮ݱ͢Δ͔ w LPCBࢯ͕୳ڀ͍ͯ͠ΔͷͰɺڵຯ͕͋Δํͥͻೖࣾ͠·͠ΐ͏
ࠓޙͷ՝ /ޙɺϨΨγʔΛ͠ͳ͍ͨΊʹͲ͏͢Ε͍͍͔ʁ w #UP#ଉ͕͍ w LJOUPOFɺΨϧʔϯɺ0⒏DFҎ্ʂ w ͳʹରࡦ͠ͳ͚Εɺ ͨͿΜ·ͨ/ޙʹϨΨγʔͯͦ͠͏ͱ͍͏ෆ҆
/ޙɺϨΨγʔΛ͠ͳ͍ͨΊʹͲ͏͢Ε͍͍͔ʁ ʮαϘͬͨʯ͔Βࠓ͕͋ΔΘ͚͡Όͳ͍ w Ή͠ΖɺϓϩμΫτͷʹूத͍ͯ͠Δͱ ʮͦΕϢʔβʔʹՁΛఏڙ͍ͯ͠Δͷ͔ʯ Έ͍ͨͳؾ͕࣋ͪৗʹಇ͘ͷͰɺ ϢʔβʔՁ͕໌֬Ͱͳ͍վળ͕ޙखʹճΔͷํͳ͍ w Ͳ͏͢Δ͔ʁҊ w
վળΛճ͍͢͠ڥɾจԽͮ͘Γ w վળͷλΠϛϯάΛϧʔϧԽ w ϨΨγʔ߹͍ΛՄࢹԽFUD
/ޙɺϨΨγʔΛ͠ͳ͍ͨΊʹͲ͏͢Ε͍͍͔ʁ վળΛճ͍͢͠ڥɾจԽͮ͘Γ w 5FTUJOH5SPQIZͰ͍͏*OUFHSBUJPO5FTUΛ૿͢ w յΕͯͳ͍͜ͱ͕อূͰ͖ΕɺվળΛճ͘͢͠ͳΔͣ w UFTUJOHMJCSBSZʴ"3*"Ͱదʹ༡ͼͷ͋Δ݁߹ςετ͕ॻ͚ΔͷͰɺ *OUFHSBUJPO5FTUΛ૿͍ͨ͠ w
ϘʔΠεΧτϧʔϧͷීٴ w ػೳ։ൃͷ͍ͭͰʹվળͰ͖Ε৺ཧతʹָͦ͏
/ޙɺϨΨγʔΛ͠ͳ͍ͨΊʹͲ͏͢Ε͍͍͔ʁ վળͷλΠϛϯάΛϧʔϧԽ w ॻ੶ʮਐԽతΞʔΩςΫνϟʯͷϥΠϒϥϦɾϑϨʔϜϫʔΫͷఆٛ w ϥΠϒϥϦ։ൃऀͷίʔυ͕ݺͼग़͢ͷ w ϑϨʔϜϫʔΫ։ൃऀͷίʔυΛݺͼग़͢ͷ w ϑϨʔϜϫʔΫͷมߋΞϓϦʹӨڹ͍͢͠ɺසߴΊͰߋ৽͖͢
w ྫ͑ʮϑϨʔϜϫʔΫϚΠφʔόʔδϣϯͰैʯΈ͍ͨͳϧʔϧͰ վળͷλΠϛϯάΛܾΊͪΌ͏
/ޙɺϨΨγʔΛ͠ͳ͍ͨΊʹͲ͏͢Ε͍͍͔ʁ ϨΨγʔ߹͍ΛՄࢹԽ w ϨΨγʔͷ߹͍͕ͲΕ͘Β͍Ͱɺ ͦΕΛղফ͢ΔͷʹͲΕ͘Β͍͕ඞཁͳͷ͔ɺ͕͔Βͳ͍ͱ ͍ͭɾͲͷఔΛׂ͖͔͘ͷτϨʔυΦϑ͕Ͱ͖ͳ͍ w ॻ੶ʮਐԽతΞʔΩςΫνϟʯ͕ώϯτʹͳΓͦ͏ͳؾ͕͍ͯ͠Δ w దԠؔΛࢹͯ͠ɺϓϩμΫτ͕ਐԽ͍ͨ͠ํʹ͔͍ͬͯΔ͔
ͳʹ͔͍͍औΓΈ͕ ͋ͬͨΒͥͻڭ͍͑ͯͩ͘͞🙏
·ͱΊ
w αΠϘζͷ8FCϑϩϯτΤϯυͷϨΨγʔ ·ͩΔ͜ͱ͕͍ͬͺ͍͋Δ w #UP#ଉ͕͍ɻ ϨΨγʔʹ͖߹͏͜ͱ͕#UP$ΑΓଟ͍͔͠Εͳ͍ w Ҡߦͨ͠ޙ͕ຊ൪ɻ ʑͷվળΛͲ͏ͬͯ͏·͘ճ͔͢ࠓޙ՝ w
ϑϩϯτΤϯυΤΩεύʔτνʔϜͷ׆ಈࠓޙॏཁͦ͏
ϨΨγʔҎ֎৭ʑͬͯ·͢ w %FWFMPQFS&YQFSJFODFͷํͷ%9 w σβΠϯγεςϜFUD w $ZCP[V'SPOUFOE.POUIMZΛ ຖ݄:PV5VCF-JWFͰ৴த w IUUQTDZCP[VHJUIVCJP
GSPOUFOENPOUIMZ 8FSFIJSJOH💪 αΠϘζϑϩϯτΤϯυΤΩεύʔτνʔϜʹ͍ͭͯ4QFBLFS%FDL IUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUGSPOUFOEFYQFSUUFBN
͓ΘΓ 🍺͋Γ͕ͱ͏͍͟͝·ͨ͠🍺