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
Vue.jsとLambdaの導入
Search
jaxx2104
March 05, 2017
Programming
0
390
Vue.jsとLambdaの導入
jaxx2104
March 05, 2017
Tweet
Share
More Decks by jaxx2104
See All by jaxx2104
Relative CI が気になっている話
jaxx2104
0
520
デザインファイルにおける継続的インテグレーション
jaxx2104
2
450
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.3k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
420
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
760
サイレントヒーローを作らない取り組み
jaxx2104
1
180
開発組織のメンバーからリーダーになって
jaxx2104
0
130
Nikuman
jaxx2104
0
430
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
350
Other Decks in Programming
See All in Programming
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
510
実践AIチャットボットUI実装入門
syumai
7
2.4k
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2.1k
Serena MCPのすすめ
wadakatu
4
880
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
890
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
330
iOSDC.pdf
chronos2500
2
650
Catch Up: Go Style Guide Update
andpad
0
120
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
130
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
Facilitating Awesome Meetings
lara
56
6.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Being A Developer After 40
akosma
91
590k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Transcript
Vue.jsͱLambdaͷಋೖ JSϑϨʔϜϫʔΫͱαʔόʔϨε
v1.3࡞ը໘ͷվम • ࡞ը໘ͷػೳՃ • ࡞ը໘ͷUIݟ͠ • Vueͷಋೖ • AWS Lambdaͷಋೖ
ϦϦʔε࣌ͷٕज़తෛ࠴
Vueͷಋೖ • jQueryͰSPA։ൃͭΒ͍ • ߏจ͕ͳ͍ͷͰ͕Ͱ͖ͳ͍ • DOMૢ࡞ʹΑΔίʔυྔͷංେԽ • ڝ߹αΠτͰͷJSϑϨʔϜϫʔΫ࠾༻ࣄྫ
Vueͷػೳ • ςϯϓϨʔτػೳ (ͷ) • DOMૢ࡞ͷࣗಈԽ (։ൃͷޮԽͱදࣔͷߴԽ) • ίϯϙʔωϯτ (ઃܭɾ࠶ར༻ੑ)
Answers Λྫʹઆ໌͠·͢ HTMLଆϩδοΫΛ࣋ͨͳ͍ͷͰDOMૢ࡞͢ΔͱJSͱ݁߹ͯ͠͠·͏ HTMLଆϩδοΫΛ࣋ͭͷͰՄಡੑ্͕͕Δ(ٕज़ͷ -> ͷ)
ςϯϓϨʔτػೳ <button>બࢶՃ</button> <script> for (answer of answers) { $(“button”).html(‘<div class=“card”><input
name=“answer”></div>’); } </script> <button>બࢶՃ</button> <div class=“card” v-for=“answer in answers” > <input name=“answer”> </div> <script> </script> HTMLଆϩδοΫΛ࣋ͨͳ͍ͷͰDOMૢ࡞͢ΔͱJSͱ݁߹ͯ͠͠·͏ HTMLଆϩδοΫΛ࣋ͭͷͰՄಡੑ্͕͕Δ(ٕज़ͷ -> ͷ)
DOMૢ࡞ͷࣗಈԽ <p>બࢶͷ1</p> <button>બࢶՃ</button> <script> var text = $(“p”).text(); text =
text.replace(/\d/, 2); $(“p”).text(text); </script> <p>બࢶͷ{{length}}</p> <button>બࢶՃ</button> <script> data: length :1 data.length = 2 </script> HTMLଆͷঢ়ଶΛอ࣋Ͱ͖ͳ͍ͷͰऔಘͱग़ྗͷॲཧͰʹͳΓ͕ͪ ԾDOMʹΑͬͯঢ়ଶΛอ͕͍࣋ࠩͬͯ͠ΔͷͰσʔλͷѻ͍͚ͩूதͰ͖Δ
ίϯϙʔωϯτ <script> name: “answers” data: answers: [“a1”, “a2”, “a3”], max:
4, input: { max: 100, require: false }, isPhoto: true method: add () { answers.push(“a4”); } </script> ผͷίϯϙʔωϯτ͔Βར༻Ͱ͖Δ <answers max=“8”><answers> දࣔҎ֎ʹঢ়ଶͱΠϕϯτ͕ίϯϙʔωϯτΛߏ͍͍ͯͯ͠Δ ࠶ར༻ϝϯςφϯεੑΛߴΊΔͨΊͷઃܭࢥ
ಋೖͯ͠Έͯ • ϝϦοτ • ෳਓͰͷ։ൃ • HTMLͷมߋͷ༰қ͞ • ϝϯςφϯεੑͷ্ •
ϑϩϯτΤϯυͷػೳ্ • ՝ • ׂ୲ʢΠϕϯτɾόϦσʔγϣϯɾϧʔςΟϯάɾXSSʣ • ίϯϙʔωϯτͷ֓೦ • αʔόʔϨε ͘͠ αʔόʔαΠυϨϯμϦϯά
ࢿྉ ಋೖࣄྫ https://www.netflix.com/jp/ https://www.airbnb.jp/ https://bookingtable.jp/ τΠμεͱಉ͡Α͏ͳαΠτ http://www.playbuzz.com/ https://www.buzzfeed.com/ https://prottapp.com/ja/ https://www.typeform.com/
https://app.apester.com/ ͜Ε͔ΒࢀߟʹͳΓͦ͏ͳهࣄ ϦΫϧʔτςΫϊϩδʔζͷϑϩϯτΤϯυ։ൃ 2016 http://yosuke-furukawa.hatenablog.com/entry/2016/12/01/175446 ϦονͳWebΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇʲ༁ʳ http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
AWS Lambdaͷಋೖ • s3fs Ͱͳ͘AWS SDKͰΞοϓϩʔυ͍ͨ͠ • ϦαΠζ࣌ؒͷॖ • ଞαΠτͷAWSҠߦ࣌ͷ՝Λղܾ͍ͨ͠
AWS Lambdaͷػೳ • s3ͳͲ֤αʔϏεͰॲཧΛ݁Ͱ͖Δ • Node.jsͰ։ൃʢΠϕϯτۦಈɺඇಉظʣ • EC2ΛׂܰݮɺকདྷαʔόʔϨε
ݱߦͷߏਤ Amazon EC2 Amazon S3 client 6* τϦϛϯά ϦαΠζ όϦσʔγϣϯ
Ξοϓϩʔυ ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ τΠμεαΠτ ࡞ɾճը໘
؆୯ʹઆ໌ ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ ॲཧ͕ଟ͍ ͍ 4%,ͬͯͳ͍ 6*
τϦϛϯά ϦαΠζ όϦσʔγϣϯ Ξοϓϩʔυ τΠμεαΠτ ࡞ɾճը໘
1.3ͷߏਤ Amazon EC2 Amazon S3 Amazon API Gateway client AWS
Lambda ϦαΠζ Ξοϓϩʔυ Vue ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ "1* 6* όϦσʔγϣϯ τΠμεαΠτ ࡞ɾճը໘ τϦϛϯά
؆୯ʹઆ໌ AWS Lambda ϦαΠζ Ξοϓϩʔυ Vue ॲཧͷ࠷దԽ 69্ ඇಉظԽ 6*
όϦσʔγϣϯ τΠμεαΠτ ࡞ɾճը໘ τϦϛϯά ҆શ
কདྷతͳߏਤ Amazon S3 Amazon API Gateway client AWS Lambda ϦαΠζ
Ξοϓϩʔυ ϑϩϯτΤϯυ +4 ϑΝΠϧαʔόʔ "1* τΠμεαΠτ τΠμε"1* 6* όϦσʔγϣϯ ࡞ɾճը໘ τϦϛϯά αʔόʔϨε 69্ ҆શ ҆Ձ Vue ଞαΠτͰڞ௨ͷϊϋ
Thank you!