Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
サイボウズWebフロントエンド脱レガシーの今までとこれから
Hiroyuki ANAI
March 10, 2021
Programming
5
15k
サイボウズ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
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
160
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
190
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.4k
Web Share Target API #w3fukuoka
pirosikick
0
470
Google I/O '19のWebをまとめる会
pirosikick
2
670
PuppeteerでいらないCSSを消す
pirosikick
24
25k
Progressive Hydration #react_fukuoka
pirosikick
5
1.2k
WebFEのテストにおける気持ちの変遷
pirosikick
0
320
私が考えるReactのよさ #fukuokajs
pirosikick
2
610
Other Decks in Programming
See All in Programming
MBSD Cybersecurity Challenges 2022 最終審査会 IPFactory 発表スライド
futabato
0
830
Form実装基本を学び直してみた
hyugatsukui
0
220
はてなリモートインターンシップ2022 Web API 講義資料
hatena
0
150
なぜRubyコミュニティにコミットするのか?
luccafort
0
290
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
610
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.2k
Felteで作る簡単フォームバリデーション
kubotak
1
140
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
120
Swift Concurrency in GoodNotes
inamiy
4
1.3k
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
530
子育てとEMと転職と
_atsushisakai
1
330
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
304
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Navigating Team Friction
lara
176
12k
Automating Front-end Workflow
addyosmani
1351
200k
Statistics for Hackers
jakevdp
785
210k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Making the Leap to Tech Lead
cromwellryan
116
7.6k
Music & Morning Musume
bryan
36
4.6k
Unsuck your backbone
ammeep
659
56k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
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
͓ΘΓ 🍺͋Γ͕ͱ͏͍͟͝·ͨ͠🍺