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
自力でTTSモデルを作った話
zgock999
0
120
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
120
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
730
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
Domain-Driven Design (Tutorial)
hschwentner
13
22k
Jasprが凄い話
hyshu
0
180
GoとPHPのインターフェイスの違い
shimabox
2
210
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
sappoRo.R #12 初心者セッション
kosugitti
0
280
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Cult of Friendly URLs
andyhume
78
6.2k
Adopting Sorbet at Scale
ufuk
75
9.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
A designer walks into a library…
pauljervisheath
205
24k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
KATA
mclloyd
29
14k
Practical Orchestrator
shlominoach
186
10k
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!