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
ProgressiveにVueを導入している話 / vue-progressive-integ...
Search
hivesbee
September 06, 2019
Programming
1
610
ProgressiveにVueを導入している話 / vue-progressive-integration
hivesbee
September 06, 2019
Tweet
Share
More Decks by hivesbee
See All by hivesbee
組織・プロセス・技術 フロントエンドの生産性向上への複眼的アプローチ
hivesbee
0
24
Design System Meets Vue.js
hivesbee
0
130
mabl を融和させるための取り組み in クラウドサイン / how-to-fusion-mabl-in-cloudsign
hivesbee
0
210
フロントエンドの組織について考える / think-about-front-end-organization
hivesbee
5
2.9k
ProgressiveにVueを導入している現場から送る小ネタ / vue-progressive-integration-tips-dialog
hivesbee
1
580
クラスへの割り込み処理とProxyとReflect / method-intercept-with-proxy-and-reflect
hivesbee
1
120
Other Decks in Programming
See All in Programming
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
520
ソフトウェア設計とAI技術の活用
masuda220
PRO
21
5.2k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
33
11k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
20
5.8k
型で語るカタ
irof
0
720
PicoRuby on Rails
makicamel
3
140
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
360
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Automating Front-end Workflow
addyosmani
1370
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Navigating Team Friction
lara
187
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Why Our Code Smells
bkeepers
PRO
337
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
1SPHSFTTJWFʹ7VFΛ ಋೖ͍ͯ͠Δ 7TFOEBJ7VFKT/VYUKTNFFUVQ .BTBTIJ)BHBʢ!)JWFTCFFʣ
⾣6ODBVHIU3FGFSFODF&SSPS)BHBJTOPUEFpOFE .BTBTIJ)BHB (JUIVCIJWFTCFF 5XJUUFS!)JWFTCFFʢ;͕͊ʣ 'SPOUFOE&OHJOFFSBU$MPVE4JHO (SBEVBUFEઋిߴઐʢͩͬͨͱ͜Ζʣ ❤7VFKT K2VFSZ Έͣ͞Θʢલམ߹ʹ͋Γ·͢ʣ ɹ͜ͷલͷBZ$POGFSFODFͰதຊͷਓೝఆΛड͚Δ
ࠓճ͓͢Δ͜ͱ 1SPHSFTTJWFʹ 7VFΛಋೖ͍ͯ͠ΔݱͰͷ ಋೖઓུ࣮ࡍͷઃܭϓϥΫςΟεΛ Ίʹ͝հ
໔ࣄ߲ ॾઆ͋Γ·͢
None
ܖަব͕ࡁΜͩࡁͷܖॻΛΞοϓϩʔυ͠ɺ ૬खํ͕ঝೝ͢Δ͚ͩͰܖΛΉ͢Ϳ͜ͱ͕ग़དྷ·͢ɻ ॻྨͷड৴ऀΫϥυαΠϯʹొ͢Δඞཁ͕͋Γ·ͤΜɻ ܖక͔݁Βܖॻཧ·ͰՄೳͳ ΫϥυܕͷిࢠܖαʔϏε ܖަবࡁͷܖॻΛΞοϓϩʔυ͠ɺ૬खํ͕ঝೝ͢Δ͚ͩͰܖΛ݁Ϳ͜ͱ͕ग़དྷ·͢ɻ ॻྨͷड৴ऀΫϥυαΠϯʹొ͢Δඞཁ͕͋Γ·ͤΜɻ ΫϥυαΠϯͱʁ
ΫϥυαΠϯͱʁ ిࢠܖͳΒ εϐʔυΞοϓ҆શੑ࣮ݱͰ͖·͢ ܖక݁·Ͱͷ ϦʔυλΠϜͷॖ िؒ ࢴͷܖॻ ిࢠܖॻ ίϯϓϥΠΞϯεͱ
ηΩϡϦςΟڧԽ ϝʔϧɾυϝΠϯ࿈ಈͷຊਓೝূ ిࢠॺ໊ʴೝఆλΠϜελϯϓͰ ܖ࣌ͷશੑΛ୲อ ✔ ෦ ✔
ΫϥυαΠϯͱʁ
ΫϥυαΠϯͱʁ
͔͜͜Βຊ
എܠ ࠷ॳͷಓ͠Δͷͨͯํ 1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε
എܠ ೖࣾ࣌Ͱͷٕज़ελοΫʜʜ Πϯϑϥɿ"84 αʔόʔɿHP SFWFM ϑϩϯτʢ1$൛ʣɿK2VFSZ ϑϩϯτʢ41൛ʣɿK2VFSZ 7VFKTʢܥʣ ͱ͍͏͜ͱͰϑϩϯτͷओ࣠ HPͷςϯϓϨʔτΤϯδϯͱK2VFSZ
K2VFSZ͋Δ͋Δ ϏδωεϩδοΫͱ%0.͕ࠞࡏ ϑΝΠϧׂʹΑΔϞδϡʔϧԽΛߦ͍͕ͬͯͨɺ ΠϕϯτͷൃՐλΠϛϯάͳͲͳͲෳࡶੑ͕૿͖ͯͨ͠ ͦͷ··QVCMJTI͍ͯͨ͠ͷͰ ίϝϯτ͕ॻ͚ͳ͍ʢҙ֎ͱେࣄʣ 7VFKTΛຊ֨ಋೖ͢ΔྲྀΕʹ
8IZ7VFKTʁ ΨΠυϥΠϯΛͬ͟ͱݟ͍ͯͦ͢͏ KTY͕ͪΐͬͱͱ͖ͬͭͮΒͦ͏ 4'$ͱσβΠφʔͷੑ͕ߴ͍ ͋ͱ΄Μͷग़དྷ৺ʢॏཁʣ
എܠ ࠷ॳͷಓ͠Δͷͨͯํ 1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε
ʮ7VFKTೖΕ·͠ΐ͏ʂʯ ʜ Ͳ͏ͬͯʁ
େ͖ͳํͱͯ͠ʜʜ %SBTUJDʹม͍͑ͯ͘ ظܾઓܕ ͋ΔఔͷόάΛڐ༰͢Δඞཁ͋Γ Γ͖Δͱʮ͔͍͍ͬ͜ʯͬͯݴΘΕΔ 1SPHSFTTJWFʹม͍͑ͯ͘ ظઓܕ όά͍͑ͯ͘ ҋͱର͠ଓ͚͍ͯ͘ Γ͖Δͱʮ͓ർΕ͞·ʯͬͯݴΘΕΔ
࠷ॳͷಓ͠Δͷͨͯํ Ͳ͏அ͢Δ͔ʁ
࠷ॳͷಓ͠Δͷͨͯํ ϓϩμΫτͷಛੑͱ ։ൃ৫ͷ໘͔Β ߟ͑Δ
ϓϩμΫτͷಛੑ͔Βಓ͠ΔΛߟ͑Δ ΫϥυαΠϯʹిࢠܖͷαʔϏε ԾʹαʔϏε͕མͪΔͱʜʜ ͓٬͞·ͷܖ࡞ۀ͕Ͱ͖ͳ͍ˠ͓٬͞·ͷϏδωεʹӨڹେ ಛʹ݄݄ॳʹམͪͨΒக໋త ӨڹൣғΛڱ͘ɺΛى͜͞ͳ͍Α͏ʹ
։ൃ৫ͷ໘͔Βಓ͠ΔΛߟ͑Δ ࣌ɺ̍ਓͷϑϩϯτΤϯυΤϯδχΞ ࢥ͍͖ͬΓม͍͑ͯ͘ʹ ϑϩϯτͷϝϯόʔ͕Γͳ͍ ͦͷؾʹͳΕͰ͖͔ͨ͠Εͳ͍͕ ػೳՃͱ͜ͷ࡞ۀΛಉ࣌ʹ͢͢ΊΔ͜ͱʹͳΓ ऴᖼΛܴ͑Δʢࢲ͕ʣ ϝϯόʔΛ૿͍ͯ͘͜͠ͱؚΊɺಋೖܭըΛ͍ͨͯͯ͘
Ͱ͖͕͋ͬͨಓ͠Δ %SBTUJDʹม͍͑ͯ͘ 1SPHSFTTJWFʹม͍͑ͯ͘ ϝϯόʔͷ૿ՃܭըʹؚΊɺ1SPHSFTTJWFʹಋೖ͍ͯ͘͠
Ͱ͖͕͋ͬͨಓ͠Δ ελʔτ 7VFKTಋೖ։࢝ ΰʔϧ 7VFKTͰϑϧϦϓϨʔε ը໘ͷҰ෦Ͱ 7VFKTಋೖ ϝϯόʔΛ ૿͍ͯ͘͠ 7VFKT
ಋೖൣғͷ֦େ ͷৡ ʢϧʔςΟϯάɺεςʔτཧʣ
ಓ͠Δ͕Ͱ͖Δͱ ࣗવͱઃܭ͕Έ্͕Δ
ࠓͷϑϩϯτΤϯυઃܭ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ϧʔςΟϯάαʔόʔଆͷ·· SFWFMͰग़ྗ͞ΕͨIUNMʹ7VFKTΛ͍͋ͯͯ͘
ࠓͷϑϩϯτΤϯυઃܭʢൈਮʣ ϚϧνϖʔδΞϓϦέʔγϣϯ ϧʔςΟϯάݱߦͷ··ɺ7VFSPVUFSར༻͠ͳ͍ ϖʔδΤϯτϦϙΠϯτ 8FCQBDL͏ʢίϝϯτॻ͖͍ͨΠϯϙʔτ͍ͨ͠ʣ 7VFYجຊΘͳ͍
ࠓͷϑϩϯτΤϯυઃܭʢײʣ ͜͏ͬͯݟΔͱϞμϯͳΠέΠέͳϑϩϯτͱ͍͑ͳ͍ ݱঢ়Λཧղ্ͨ͠Ͱ࠷దղΛऔΔͨΊʹ ͋͑ͯΘͳ͍ɺͱ͍͏ͷେ͍ʹΞϦʢͩͱࢥ͏ʣ ΠέΠέͳͷͷ༠ʹෛ͚ͣɺಓʹ͢͢ΊΔ ڧ͍৺͕ཁ݅ͱͯ͠ඞཁ
എܠ ࠷ॳͷಓ͠Δͷͨͯํ 1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε
1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε Ϛϯτ͢Δίϯϙʔωϯτͷཻ ࢠίϯϙʔωϯτͷཻ
ͦͷ̍ɿϚϯτ͢Δίϯϙʔωϯτͷཻ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ͜͜ͷʜʜ
ͦͷ̍ɿϚϯτ͢Δίϯϙʔωϯτͷཻ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ͜͜ʂ
ͦͷ̍ɿϚϯτ͢Δίϯϙʔωϯτͷཻ ϏδωεϩδοΫͱͯ͠ΓཱͭϨϕϧͷେ͖͞ͰϚϯτ ը໘ͷݕࡧ෦ɺμΠΞϩάɺFUDʜʜ "UPNJD%FTJHOͰ͍͏ͱ͜Ζͷ0SHBOJTNT͘Β͍ Ұ൪লΤωˍΛہॴԽͰ͖Δ
ͦͷ̍ɿϚϯτ͢Δίϯϙʔωϯτͷཻ লΤωɺͱʁ ˠίϯϙʔωϯτཻͷ࠷େɾ࠷খέʔεͰͦΕͧΕߟ͑Δ ."9ɿը໘શମʹϚϯτ ୯७ʹ࿑ྗ͕͔͔Δ IUNMςϯϓϨʔτʹग़ྗ͞Ε͍ͯΔσʔλͷ࠶ݱͱ͔ඞཁ ༨ܭͳͷ·ͰखΛண͚ͨ͘ͳ͍
ͦͷ̍ɿϚϯτ͢Δίϯϙʔωϯτͷཻ .*/ɿখ͞ͳίϯϙʔωϯτ͝ͱʹϚϯτ ίϯϙʔωϯτͷIUNMςϯϓϨʔτσʔλͷྲྀ͠ࠐΈΛͭͭ͠ɺ ίϯϙʔωϯτͷ֎ͰϏδωεϩδοΫΛऔΓѻ͏͜ͱʹ ṖϞδϡʔϧര $PNQPOFOU $PNQPOFOU Ṗ IUNM
ͩͬͨΒίϯϙʔωϯτʹऔΓࠐΜͩ΄͏ָ͕
ͦͷ̍ɿϚϯτ͢Δίϯϙʔωϯτͷཻ ΛہॴԽͰ͖Δɺͱʁ ʢى͖͍͚ͯͳ͍͜ͱ͚ͩͲʣ ϖʔδʹԿ͔͠Βόάͬͨ߹ɺ ϏδωεϩδοΫ͝ͱམͪΔͷͰը໘ͷଞͷՕॴʹӨڹΛٴ ΅͞ͳ͍
ͦͷ̍ɿϚϯτ͢Δίϯϙʔωϯτͷཻ ؙͷͱ͜Ζʹ7VFKTΛϚϯτ Ծʹίί͕όάͬͯϖʔδͷதͷ ଞͷػೳ͕མͪͳ͍ͷͰ͋ΔఔӨڹΛہॴԽͰ͖Δ Ѽઌ Ѽઌ̍ ϑΝΠϧ໊
ͦͷ̎ɿࢠίϯϙʔωϯτͷཻʹ͍ͭͯ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ͜͜ͷʜʜ
ͦͷ̎ɿࢠίϯϙʔωϯτͷཻʹ͍ͭͯ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ͜͜ʂ
ͦͷ̎ɿࢠίϯϙʔωϯτͷཻʹ͍ͭͯ ڞ௨Խ͠ͳ͍ʢڧ͍৺Λͭʣ 'BU$PNQPOFOUΛڐ༰͢Δ
ͦͷ̎ɿࢠίϯϙʔωϯτͷཻʹ͍ͭͯ ࠓͷઃܭը໘ͷҰ෦ʹ7VFKTΛϚϯτ ෦࠷దͷͷ͕ग़དྷ্͕ͬͯ͠·͏ݒ೦ औΓճ͍͢͠͠ίϯϙʔωϯτΛ࡞ΔͨΊʹ w ϖʔδ͝ͱʹίϯϙʔωϯτ͕ग़ἧͬͨλΠϛϯάͰΔ ˞ίϯϙʔωϯτͰऩ·ΔΑ͏ͳϨϕϧͰͩͬͨΒղͯ͠0, w ·ͨΨνͬͯڞ௨Խ࡞ۀΛߦ͏ඞཁ͋Γ ͦͷͨΊʹҰ࣌తͳ'BU$PNQPOFOUڐ༰͞ΕΔ͖
΄͔ʹ΄͔ʹ [JOEFYʹෛ͚ͳ͍μΠΞϩάͮ͘Γͩͱ͔ ˠͪ͜ΒલճͷࢿྉΛ͝ཡ͍ͩ͆͘͞ $44ͷઃܭͬͨΓͱ͔ ☝ίίΒΜؚΊͯ࠙ձͰ͝ҙݟͱ͔͍͚ͨͩΕ
·ͱΊ
·ͱΊ ͦͷ໊ͷ௨Γ7VFKT1SPHSFTTJWFʹಋೖͰ͖Δ ಓ͠Δͷͨͯํ͕େࣄ ϞμϯͳΠέΠέͳϓϥΫςΟεʹखΛ৳͢ͱ ͦͷཌྷΛম͔ΕΔ͜ͱʹͳΔͷͰؾΛ͚ͭͯ ཧղ্ͨ͠Ͱ͍͍ͱ͜ͲΓͰ͖ΔΑ͏ʹ͍ͬͯ͜͏
ͦ͏͍͑ʜʜ
ͦ͏͍͑ʜʜ
8FBSF)JSJOH
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Χϓʔʂ