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
2
360
compilerOptions、全部読んだ
pirosikick
1
210
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
410
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
360
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.8k
Web Share Target API #w3fukuoka
pirosikick
0
680
Google I/O '19のWebをまとめる会
pirosikick
2
830
PuppeteerでいらないCSSを消す
pirosikick
23
29k
Progressive Hydration #react_fukuoka
pirosikick
5
1.8k
Other Decks in Programming
See All in Programming
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
0
190
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
TypeScriptでDXを上げろ! Hono編
yusukebe
3
850
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
780
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
260
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
Workers を定期実行する方法は一つじゃない
rokuosan
0
120
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
230
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
550
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Scaling GitHub
holman
461
140k
Writing Fast Ruby
sferik
628
62k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Unsuck your backbone
ammeep
671
58k
A designer walks into a library…
pauljervisheath
207
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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
͓ΘΓ 🍺͋Γ͕ͱ͏͍͟͝·ͨ͠🍺