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
360
Vue.jsとLambdaの導入
jaxx2104
March 05, 2017
Tweet
Share
More Decks by jaxx2104
See All by jaxx2104
Relative CI が気になっている話
jaxx2104
0
490
デザインファイルにおける継続的インテグレーション
jaxx2104
2
410
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.2k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
360
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
700
サイレントヒーローを作らない取り組み
jaxx2104
1
150
開発組織のメンバーからリーダーになって
jaxx2104
0
110
Nikuman
jaxx2104
0
370
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
320
Other Decks in Programming
See All in Programming
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
980
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
470
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1k
Jakarta EE meets AI
ivargrimstad
0
350
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
320
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fireside Chat
paigeccino
34
3.2k
Thoughts on Productivity
jonyablonski
69
4.5k
Building an army of robots
kneath
303
45k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Automating Front-end Workflow
addyosmani
1368
200k
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!