Tweet
Tweet

Slide 1

Slide 1 text

Vue.jsͱLambdaͷಋೖ JSϑϨʔϜϫʔΫͱαʔόʔϨε

Slide 2

Slide 2 text

v1.3͸࡞੒ը໘ͷվम • ࡞੒ը໘ͷػೳ௥Ճ • ࡞੒ը໘ͷUIݟ௚͠ • Vueͷಋೖ • AWS Lambdaͷಋೖ

Slide 3

Slide 3 text

ϦϦʔε࣌ͷٕज़తෛ࠴

Slide 4

Slide 4 text

Vueͷಋೖ • jQueryͰ͸SPA։ൃͭΒ͍ • ߏจ͕ͳ͍ͷͰ੹຿͕෼཭Ͱ͖ͳ͍ • DOMૢ࡞ʹΑΔίʔυྔͷංେԽ • ڝ߹αΠτͰͷJSϑϨʔϜϫʔΫ࠾༻ࣄྫ

Slide 5

Slide 5 text

Vueͷػೳ • ςϯϓϨʔτػೳ (੹຿ͷ෼཭) • DOMૢ࡞ͷࣗಈԽ (։ൃͷޮ཰Խͱදࣔͷߴ଎Խ) • ίϯϙʔωϯτ (ઃܭɾ࠶ར༻ੑ)

Slide 6

Slide 6 text

Answers Λྫʹઆ໌͠·͢ HTMLଆ͸ϩδοΫΛ࣋ͨͳ͍ͷͰDOMૢ࡞͢ΔͱJSͱ݁߹ͯ͠͠·͏ HTMLଆ΋ϩδοΫΛ࣋ͭͷͰՄಡੑ্͕͕Δ(ٕज़ͷ෼཭ -> ੹຿ͷ෼཭)

Slide 7

Slide 7 text

ςϯϓϨʔτػೳ બ୒ࢶ௥Ճ for (answer of answers) { $(“button”).html(‘<div class=“card”><input name=“answer”></div>’); } બ୒ࢶ௥Ճ
HTMLଆ͸ϩδοΫΛ࣋ͨͳ͍ͷͰDOMૢ࡞͢ΔͱJSͱ݁߹ͯ͠͠·͏ HTMLଆ΋ϩδοΫΛ࣋ͭͷͰՄಡੑ্͕͕Δ(ٕज़ͷ෼཭ -> ੹຿ͷ෼཭)

Slide 8

Slide 8 text

DOMૢ࡞ͷࣗಈԽ

બ୒ࢶͷ਺1

બ୒ࢶ௥Ճ var text = $(“p”).text(); text = text.replace(/\d/, 2); $(“p”).text(text);

બ୒ࢶͷ਺{{length}}

બ୒ࢶ௥Ճ data: length :1 data.length = 2 HTMLଆͷঢ়ଶΛอ࣋Ͱ͖ͳ͍ͷͰऔಘͱग़ྗͷॲཧͰ৑௕ʹͳΓ͕ͪ Ծ૝DOMʹΑͬͯঢ়ଶΛอ࣋ࠩ͠෼͕૸͍ͬͯΔͷͰσʔλͷѻ͍͚ͩूதͰ͖Δ

Slide 9

Slide 9 text

ίϯϙʔωϯτ name: “answers” data: answers: [“a1”, “a2”, “a3”], max: 4, input: { max: 100, require: false }, isPhoto: true method: add () { answers.push(“a4”); } ผͷίϯϙʔωϯτ͔Βར༻Ͱ͖Δ දࣔҎ֎ʹঢ়ଶͱΠϕϯτ͕ίϯϙʔωϯτΛߏ੒͍͍ͯͯ͠Δ ࠶ར༻΍ϝϯςφϯεੑΛߴΊΔͨΊͷઃܭࢥ૝

Slide 10

Slide 10 text

ಋೖͯ͠Έͯ • ϝϦοτ • ෳ਺ਓͰͷ։ൃ • HTMLͷมߋͷ༰қ͞ • ϝϯςφϯεੑͷ޲্ • ϑϩϯτΤϯυͷػೳ޲্ • ՝୊ • ໾ׂ෼୲ʢΠϕϯτɾόϦσʔγϣϯɾϧʔςΟϯάɾXSSʣ • ίϯϙʔωϯτͷ֓೦ • αʔόʔϨε ΋͘͠͸ αʔόʔαΠυϨϯμϦϯά

Slide 11

Slide 11 text

ࢿྉ ಋೖࣄྫ 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

Slide 12

Slide 12 text

AWS Lambdaͷಋೖ • s3fs Ͱͳ͘AWS SDKͰΞοϓϩʔυ͍ͨ͠ • ϦαΠζ࣌ؒͷ୹ॖ • ଞαΠτͷAWSҠߦ࣌ͷ՝୊Λղܾ͍ͨ͠

Slide 13

Slide 13 text

AWS Lambdaͷػೳ • s3ͳͲ֤αʔϏε಺ͰॲཧΛ׬݁Ͱ͖Δ • Node.jsͰ։ൃʢΠϕϯτۦಈɺඇಉظʣ • EC2Λ໾ׂܰݮɺকདྷ͸αʔόʔϨε΋

Slide 14

Slide 14 text

ݱߦͷߏ੒ਤ Amazon EC2 Amazon
 S3 client 6* τϦϛϯά ϦαΠζ όϦσʔγϣϯ Ξοϓϩʔυ ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ τΠμεαΠτ ࡞੒ɾճ౴ը໘

Slide 15

Slide 15 text

؆୯ʹઆ໌ ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ ॲཧ͕ଟ͍ ஗͍ 4%,࢖ͬͯͳ͍ 6* τϦϛϯά ϦαΠζ όϦσʔγϣϯ Ξοϓϩʔυ τΠμεαΠτ ࡞੒ɾճ౴ը໘

Slide 16

Slide 16 text

1.3ͷߏ੒ਤ Amazon EC2 Amazon
 S3 Amazon API Gateway client AWS Lambda ϦαΠζ Ξοϓϩʔυ Vue ϑϩϯτΤϯυ +4 αʔόαΠυ 1)1 ϑΝΠϧαʔόʔ "1* 6* όϦσʔγϣϯ τΠμεαΠτ ࡞੒ɾճ౴ը໘ τϦϛϯά

Slide 17

Slide 17 text

؆୯ʹઆ໌ AWS Lambda ϦαΠζ Ξοϓϩʔυ Vue ॲཧͷ࠷దԽ 69޲্ ඇಉظԽ 6* όϦσʔγϣϯ τΠμεαΠτ ࡞੒ɾճ౴ը໘ τϦϛϯά ҆શ

Slide 18

Slide 18 text

কདྷతͳߏ੒ਤ Amazon
 S3 Amazon API Gateway client AWS Lambda ϦαΠζ Ξοϓϩʔυ ϑϩϯτΤϯυ +4 ϑΝΠϧαʔόʔ "1* τΠμεαΠτ τΠμε"1* 6* όϦσʔγϣϯ ࡞੒ɾճ౴ը໘ τϦϛϯά αʔόʔϨε 69޲্ ҆શ ҆Ձ Vue ଞαΠτͰ΋ڞ௨ͷϊ΢ϋ΢

Slide 19

Slide 19 text

Thank you!