Vue.jsとLambdaの導入

Transcript

1. Vue.jsͱLambdaͷಋೖ JSϑϨʔϜϫʔΫͱαʔόʔϨε
2. v1.3͸࡞੒ը໘ͷվम • ࡞੒ը໘ͷػೳ௥Ճ • ࡞੒ը໘ͷUIݟ௚͠ • Vueͷಋೖ • AWS Lambdaͷಋೖ
3. ϦϦʔε࣌ͷٕज़తෛ࠴
4. Vueͷಋೖ • jQueryͰ͸SPA։ൃͭΒ͍ • ߏจ͕ͳ͍ͷͰ੹຿͕෼཭Ͱ͖ͳ͍ • DOMૢ࡞ʹΑΔίʔυྔͷංେԽ • ڝ߹αΠτͰͷJSϑϨʔϜϫʔΫ࠾༻ࣄྫ
5. Vueͷػೳ • ςϯϓϨʔτػೳ (੹຿ͷ෼཭) • DOMૢ࡞ͷࣗಈԽ (։ൃͷޮ཰Խͱදࣔͷߴ଎Խ) • ίϯϙʔωϯτ (ઃܭɾ࠶ར༻ੑ)
6. Answers Λྫʹઆ໌͠·͢ HTMLଆ͸ϩδοΫΛ࣋ͨͳ͍ͷͰDOMૢ࡞͢ΔͱJSͱ݁߹ͯ͠͠·͏ HTMLଆ΋ϩδοΫΛ࣋ͭͷͰՄಡੑ্͕͕Δ(ٕज़ͷ෼཭ -> ੹຿ͷ෼཭)
7. ςϯϓϨʔτػೳ <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ଆ΋ϩδοΫΛ࣋ͭͷͰՄಡੑ্͕͕Δ(ٕज़ͷ෼཭ -> ੹຿ͷ෼཭)
8. 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ʹΑͬͯঢ়ଶΛอ࣋ࠩ͠෼͕૸͍ͬͯΔͷͰσʔλͷѻ͍͚ͩूதͰ͖Δ
9. ίϯϙʔωϯτ <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> දࣔҎ֎ʹঢ়ଶͱΠϕϯτ͕ίϯϙʔωϯτΛߏ੒͍͍ͯͯ͠Δ ࠶ར༻΍ϝϯςφϯεੑΛߴΊΔͨΊͷઃܭࢥ૝
10. ಋೖͯ͠Έͯ • ϝϦοτ • ෳ਺ਓͰͷ։ൃ • HTMLͷมߋͷ༰қ͞ • ϝϯςφϯεੑͷ޲্ • ϑϩϯτΤϯυͷػೳ޲্ • ՝୊ • ໾ׂ෼୲ʢΠϕϯτɾόϦσʔγϣϯɾϧʔςΟϯάɾXSSʣ • ίϯϙʔωϯτͷ֓೦ • αʔόʔϨε ΋͘͠͸ αʔόʔαΠυϨϯμϦϯά
11. ࢿྉ ಋೖࣄྫ 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
12. AWS Lambdaͷಋೖ • s3fs Ͱͳ͘AWS SDKͰΞοϓϩʔυ͍ͨ͠ • ϦαΠζ࣌ؒͷ୹ॖ • ଞαΠτͷAWSҠߦ࣌ͷ՝୊Λղܾ͍ͨ͠
13. AWS Lambdaͷػೳ • s3ͳͲ֤αʔϏε಺ͰॲཧΛ׬݁Ͱ͖Δ • Node.jsͰ։ൃʢΠϕϯτۦಈɺඇಉظʣ • EC2Λ໾ׂܰݮɺকདྷ͸αʔόʔϨε΋
14. ݱߦͷߏ੒ਤ Amazon EC2 Amazon
 S3 client 6* τϦϛϯά ϦαΠζ όϦσʔγϣϯ Ξοϓϩʔυ ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ τΠμεαΠτ ࡞੒ɾճ౴ը໘
15. ؆୯ʹઆ໌ ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ ॲཧ͕ଟ͍ ஗͍ 4%,࢖ͬͯͳ͍ 6* τϦϛϯά ϦαΠζ όϦσʔγϣϯ Ξοϓϩʔυ τΠμεαΠτ ࡞੒ɾճ౴ը໘
16. 1.3ͷߏ੒ਤ Amazon EC2 Amazon
 S3 Amazon API Gateway client AWS Lambda ϦαΠζ Ξοϓϩʔυ Vue ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ "1* 6* όϦσʔγϣϯ τΠμεαΠτ ࡞੒ɾճ౴ը໘ τϦϛϯά
17. ؆୯ʹઆ໌ AWS Lambda ϦαΠζ Ξοϓϩʔυ Vue ॲཧͷ࠷దԽ 69޲্ ඇಉظԽ 6* όϦσʔγϣϯ τΠμεαΠτ ࡞੒ɾճ౴ը໘ τϦϛϯά ҆શ
18. কདྷతͳߏ੒ਤ Amazon
 S3 Amazon API Gateway client AWS Lambda ϦαΠζ Ξοϓϩʔυ ϑϩϯτΤϯυ +4 ϑΝΠϧαʔόʔ "1* τΠμεαΠτ τΠμε"1* 6* όϦσʔγϣϯ ࡞੒ɾճ౴ը໘ τϦϛϯά αʔόʔϨε 69޲্ ҆શ ҆Ձ Vue ଞαΠτͰ΋ڞ௨ͷϊ΢ϋ΢
19. Thank you!