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!