Vue.jsとLambdaの導入

 Vue.jsとLambdaの導入

3163582dea3e2c8164e2d690b36a8501?s=128

jaxx2104

March 05, 2017
Tweet

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!