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
770
サイレントヒーローを作らない取り組み
jaxx2104
1
180
開発組織のメンバーからリーダーになって
jaxx2104
0
130
Nikuman
jaxx2104
0
440
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
350
Other Decks in Programming
See All in Programming
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
技術的負債の正体を知って向き合う
irof
0
250
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
オンデバイスAIとXcode
ryodeveloper
0
130
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
400
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
540
iOSでSVG画像を扱う
kishikawakatsumi
0
170
CSC305 Lecture 11
javiergs
PRO
0
270
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
470
マンガアプリViewerの大画面対応を考える
kk__777
0
250
Featured
See All Featured
A better future with KSS
kneath
239
18k
The World Runs on Bad Software
bkeepers
PRO
72
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Code Reviewing Like a Champion
maltzj
526
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Designing Experiences People Love
moore
142
24k
Practical Orchestrator
shlominoach
190
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Docker and Python
trallard
46
3.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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!