AWSを用いたフロントエンド開発

Transcript

1. "8 4 Λ ༻ ͍ ͨ ϑ ϩ ϯ τ Τ ϯ υ ։ ൃ גࣜձࣾCI લాܓհ ؔ੢ϑϩϯτΤϯυUG 2019
2. ࣗ ݾ ঺ հ
   
   
   Š
   /BNF
   
   લాܓհ
   
   Š
   $PNQBOZ
   גࣜձࣾ
   $*
   γʔΞΠ
   
   Š
   8PSLT
   
   
   
   
   
   
   
   8FC
   &OHJOFFS
   
   
   
   
   
   
   
   "84
   4PMVUJPO
   "SDIJUFDU "TTPDJBUF
   
   Š
   -BOHVBHF
   
   'SBNFXPSL -JCSBSZ
   
   
   
   
   
   
   
   +BWB4DSJQU
   3FBDU
   3FBDU/BUJWF
   
   
   
   
   
   
   
   1)1
   -BSBWFM 2
3. גࣜձࣾ
   $* $SFBUJWF
   *OOPWBUJPO $POUJOVPVT
   *OUFHSBUJPO ձ໊ࣾ גࣜձࣾ$*
   γʔΞΠ ୅ද ౬ඌ
   ஐݦ ઃཱ 2017೥3݄9೔ 3
4. 4 .3ͷ࡞੒
   
   
   ϒϥϯνͷ164) ՝୊ͷ௥Ճɺ՝୊ͷߋ৽ $IBUXPSL
   
   "QJͱ8FCIPPLΛར༻ͯ͠
   (JUMBCɺ#BDLMPHͷߋ৽Λ$IBUXPSL΁௨஌ ࣾ ಺ ۀ ຿ ޮ ཰ ޲ ্
5. 5 ε ς ο Χ ʔ ഑ ͬͯ · ͢ɻ ϒ ʔε ग़ ల ͠ ͯ ͍ · ͢ ʂ
6. "8 4 Λ ༻ ͍ ͨ ϑ ϩ ϯ τ Τ ϯ υ ։ ൃ ଟʑ͋Δ"84αʔϏεͷதͰɺϑϩϯτ։ൃͰ༗ޮ׆༻Ͱ͖Δٕज़ 6
7. Ұͭɺ͓࿩ 7 όοΫΤϯυΤϯδχΞͬͯڧ͘ͳ͍ʁ
8. ͱ͋Δձࣾɺۀ຿தɺϑϩϯτΤϯδχΞ͕͜Ε͔Βݺͼग़͢"1*࢓༷ॻΛݟͯʜ 8 ͢Έ·ͤΜʜ͜͜ʜϚελʔͷ*%ͩ ͚͡Όͳͯ͘஋΋Ұॹʹฦͯ͠΄͠ ͍ΜͰ͚͢Ͳʜ
   ը໘ʹϚελͷ৘ใ͕ग़ͤͳͯ͘ʜ Ϛελʔͷ"1*͋ΔΜ͔ͩΒɻͦΕ࢖ ͑͹஋Θ͔Δ͡ΌΜ όοΫΤϯυΤϯδχΞͬͯڧ͘ͳ͍ʁ
9. 9 ͢Έ·ͤΜʜϨεϙϯεͷΩʔΛε ωʔΫ͡Όͳͯ͘Ωϟϝϧʹͯ͠ཉ͠ ͍ͷͰ͕͢ʜ Զ͸1)1ͩɻ όοΫΤϯυΤϯδχΞͬͯڧ͘ͳ͍ʁ
10. 10 όοΫΤϯυΤϯδχΞͬͯڧ͘ͳ͍ʁ αʔόͷ͓कΓʜ 1)1ͷ᠘ʜ BQBDIFʜ ։ൃ؀ڥʜ ຊ൪؀ڥʜ σϓϩΠʜ ԑͷԼͷྗ࣋ͪʂ
11. 11 ϑϩϯτΤϯυΤϯδχΞϑΝʔετ
12. 12 ϑϩϯτΤϯυΤϯδχΞϑΝʔετ Ͱ͸ͳͯ͘ʜ
13. 13 όοΫΤϯυͷ͍Βͳ͍։ൃ
14. "8 4 Λ ༻ ͍ ͨ ϑ ϩ ϯ τ Τ ϯ υ ։ ൃ ଟʑ͋Δ"84αʔϏεͷதͰɺϑϩϯτ։ൃͰ༗ޮ׆༻Ͱ͖Δٕज़ 14
15. "NB[PO
    8FC
    4FSWJDF 15 ଟछଟ༷ͳҎ্ͷαʔϏεɻ ݄ؒ
    ΞΫςΟϒΧελϚʔ
    ສਓҎ্ "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ
16. 16 "NB[PO
    4 Մ༻ੑYͷσʔλ଱ٱੑΛތΔετϨʔδαʔϏε
    8FC4JUF)PTUJOHػೳͰɺ੩తαΠτΛϗεςΟϯάͰ͖Δɻ ϑϩϯτΤϯυΤϯδχΞϑΝʔετͳɺαʔϏε ྫ Ͳ͔͜ΒͰ΋͓޷Έͷྔͷσʔλͷอଘͱऔಘ͕؆୯ʹߦ͑ΔΦϒδΣΫτετϨʔδ "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ
17. 17 "NB[PO
    $PHOJUP Ϣʔβʔσʔλϕʔε͓ΑͼϢʔβͷೝূೝՄαʔϏε
    ͪ͜ΒΛ࢖͏͜ͱͰ؆୯ʹϝΞυɺϢʔβ໊ͰͷαΠϯΠϯαΠϯΞ΢τ ͕΢ΣϒΞϓϦɺωΠςΟϒΞϓϦʹ࣮૷Ͱ͖·͢ɻ
    ೝূϝʔϧΛඈ͹ͯ͘͠ΕͨΓɺઃఆ͢Ε͹4.4ೝূ΋؆୯ʹग़དྷ·͢ɻ ϑϩϯτΤϯυΤϯδχΞϑΝʔετͳɺαʔϏε ྫ γϯϓϧͰηΩϡΞͳϢʔβʔͷαΠϯΞοϓɺαΠϯΠϯɺ͓ΑͼΞΫηείϯτϩʔϧ "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ
18. 18 "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ "84
    "QQ4ZOD
19. 19 "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ (SBQI2- "1*ΫΤϦݴޠ type Project { name: String tagline: String contributors: [User] } σʔλܕΛ࡞੒ { project(name: "GraphQL") { tagline } } ཉ͍͠৘ใͱر๬ͷܗΛࢦఆ { "project": { "tagline": "A query language for APIs" } } ཉ͍͠৘ใ͕ر๬ͷܗͰऔಘ
20. 20 GraphQL AWS AppSync Ͱ͸ɺαʔόʔʹ͋ΔσʔλͷϑΣονɺ มߋɺαϒεΫϥΠϒΛΫϥΠΞϯτΞϓϦέʔγϣϯ͔ Β࣮ߦͰ͖ΔσʔλݴޠɺGraphQL ͕࢖༻͞Ε·͢ɻ 1 ϦΞϧλΠϜͷσʔλΞΫηεͱߋ৽ AWS AppSync Ͱ͸ɺGraphQL αϒεΫϦϓγϣϯΛ࢖༻ ͯ͠ɺσʔλͷͲͷ෦෼ΛϦΞϧλΠϜͰར༻Մೳʹ͢Δ ͔ΛࢦఆͰ͖·͢ɻ 2 ΦϑϥΠϯͰͷσʔλಉظ σόΠε͕ΦϑϥΠϯͷͱ͖ɺΞϓϦέʔγϣϯ UI ͸Φ ϑϥΠϯσʔλʹΑͬͯࣗಈతʹߋ৽͞Ε·͢ɻ AppSync Ͱ͸ɺΦϑϥΠϯ࣌ͷσʔλΩϟογϡํ๏ ΍ɺ͞·͟·ͳωοτϫʔΫ৚݅ʹ͓͚ΔΩϟογϡߋ৽ ͷ؅ཧํ๏Λࢦఆ͠·͢ɻ 3 "84
    "QQ4ZOD "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ
21. ಋೖฤ 21 ૊ΈࠐΈେม͡Όͳ͍ʁ ؆୯͡Όͳ͍͚Ͳɻ೉͘͠͸ͳ͍ "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ
22. 22 "84
    "NQMJGZ "84ެࣜͷɺΞϓϦέʔγϣϯߏஙϑϨʔϜϫʔΫ "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ
23. 23 "84
    "NQMJGZ ΞϓϦέʔγϣϯʹରͯ͠ɺ
    ೝূ $PHOJUP ɺ4UPSBHF 4 ɺ%BUB "QQ4ZOD ͷઃఆΛͯ͘͠ΕΔɻ ΞϓϦέʔγϣϯσϓϩΠ͕Մೳ
    σϓϩΠ͞ΕͨΞϓϦέʔγϣϯʹ͸ࣗಈͰɺ$MPVE'SPOU άϩʔόϧ$%/ αʔϏε ͕ઃఆ͞ΕΔͨΊߴෛՙʹڧ͍ ͳͲͳͲ "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ
24. 24 "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ BNQMJGZ
    JOJU ࣮ߦޙ
25. 25 "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ $PHOJUP
    4JHOJO
26. 26 "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ 4
    4UPSBHF
27. 27 "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ BNQMJGZ
    BEE
    BQJ
28. 28 "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ BNQMJGZ
    QVTI
29. 29 "84Λ༻͍ͨϑϩϯτΤϯυ։ൃ
30. ·ͱΊ 30 "84
    "NQMJGZ Λར༻͢Ε͹ɺೝূ͔Β"1*ͷ࡞੒ɺ࣮ߦɺ4UPSBHFར༻͕Ͱ͖Δɻ
    ·͞ʹɻόοΫΤϯυཁΒͣͷϑϩϯτΤϯυΤϯδχΞϑΝʔετ ͨͩɻ όοΫΤϯυ͞Μ͕͍ͳ͍ͱ࡞Εͳ͍γεςϜ΍ͬͺΓ͋Γ·͢ɻ ͳͷͰɻ ࠷దͳܗΛɺΠϯϑϥɺόοΫΤϯυɺϑϩϯτΤϯυͰ஥ྑ͘૬ஊܾͯ͠Ί·͠ΐ͏
31. ͝੩ௌɺ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ