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
compilerOptions、全部読んだ
pirosikick
1
160
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
300
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
320
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.8k
Web Share Target API #w3fukuoka
pirosikick
0
630
Google I/O '19のWebをまとめる会
pirosikick
2
790
PuppeteerでいらないCSSを消す
pirosikick
24
28k
Progressive Hydration #react_fukuoka
pirosikick
5
1.7k
WebFEのテストにおける気持ちの変遷
pirosikick
0
480
Other Decks in Programming
See All in Programming
return文におけるstd::moveについて
onihusube
1
1.4k
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
190
2025.01.17_Sansan × DMM.swift
riofujimon
2
570
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
390
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
390
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
2.8k
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
4.2k
AHC041解説
terryu16
0
400
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
570
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
960
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Done Done
chrislema
182
16k
Optimising Largest Contentful Paint
csswizardry
33
3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Designing for humans not robots
tammielis
250
25k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
870
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Statistics for Hackers
jakevdp
797
220k
Speed Design
sergeychernyshev
25
740
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
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
͓ΘΓ 🍺͋Γ͕ͱ͏͍͟͝·ͨ͠🍺