Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js with Apollo Client 2018

takanorip
December 06, 2018

Nuxt.js with Apollo Client 2018

takanorip

December 06, 2018
Tweet

More Decks by takanorip

Other Decks in Programming

Transcript

  1. /VYUKTXJUI
    "QPMMP$MJFOU

    5BLBOPSJ0LJ!/VYU.FFUVQ

    View Slide

  2. ࣗݾ঺հ
    w 5BLBOPUJ0LJʢ!UBLBOPSJQʣ
    w ϑϩϯτΤϯυΤϯδχΞ
    w 3FBDU/VYUKT1PMZNFS8FC$PNQPOFOUT
    w ϑΥϯτ͕޷͖
    w ΢ΣϒϑΥϯτͷΞυϕϯτΧϨϯμʔΛॻ͍ͯΔ

    ͷͰօ͞ΜಡΜͰ͍ͩ͘͞ʢॻ͍͍ͯͩ͘͞ʂʣ

    View Slide

  3. "QPMMP$MJFOU

    View Slide

  4. (SBQI2-
    w "1*ͱ௨৴͢ΔͨΊͷΫΤϦݴޠ
    w ΫϥΠΞϯτ͔ΒαʔόʔʹΫΤϦΛ1045͢Δͱɺ

    ΫΤϦʹԠͨ͡σʔλ͕ฦͬͯ͘Δ
    w ΤϯυϙΠϯτ͸جຊతʹͭʢHSBQIRMʣ

    View Slide

  5. (SBQI2-
    w ܕγεςϜ͕૊Έࠐ·Ε͓ͯΓɺαʔόʔαΠυͰ
    4DIFNFΛఆٛ͢Δඞཁ͕͋Δ

    View Slide

  6. "QPMMP$MJFOU
    w (SBQI2-αʔόʔͱ௨৴͢ΔͨΊͷϥΠϒϥϦ
    w ֤ϑϨʔϜϫʔΫ͝ͱʹ࣮૷͕͋Γɺ/VYUKTͰ͸

    WVFBQPMMP΍OVYUDPNNVOJUZBQPMMPNPEVMFΛ
    ࢖༻͢Δ

    IUUQTHJUIVCDPNOVYUDPNNVOJUZBQPMMPNPEVMF

    View Slide

  7. )PXUPVTF
    w (JU)VC"1*W͔ΒσʔλΛऔಘ͢ΔαϯϓϧΛ

    ࢖ͬͯɺ/VYUKTͰͷ"QPMMP$MJFOUͷ࢖͍ํΛ

    આ໌͢Δ

    View Slide

  8. OVYUDPOpHKT
    w NPEVMFͷ௥ՃͱઃఆϑΝΠϧͷύεͷ௥ه

    View Slide

  9. dBQPMMPDMJFOUDPOpHTEFGBVMUKT

    View Slide

  10. dBQPMMPDMJFOUDPOpHTEFGBVMUKT

    View Slide

  11. dBQPMMPDMJFOUDPOpHTEFGBVMUKT

    View Slide

  12. "QPMMP-JOL
    w "QPMMP$MJFOUͰ͸"QPMMP-JOLΛ࢖༻ͯ͠ɺ)551

    ௨৴࣌ͷॲཧΛఆٛ͢Δ
    w "QPMMP-JOL͸NJEEMFXBSFͷΑ͏ͳ΋ͷ
    -JOL
    -JOL -JOL 4FSWFS
    $MJFOU
    ઀ଓઌͷ
    ఆٛ
    τʔΫϯ
    ෇༩
    Τϥʔ
    ϋϯυϦϯά

    View Slide

  13. dBQPMMPHRMHFU3FQPTHRM

    View Slide

  14. QBHFTJOEFYWVF
    w ΫΤϦΛΠϯϙʔτ
    w ίϯϙʔωϯτͷBQPMMPϓϩύςΟΛ࢖༻ͯ͠
    "QPMMP$MJFOUΛݺͼग़͢
    w EBUBϓϩύςΟʹऔಘσʔλͷ֨ೲઌΛఆٛ
    w BQPMMPϓϩύςΟ͸ϦΞΫςΟϒͳͷͰɺEBUBͰ

    ఆٛ͞Ε͍ͯΔม਺͕มԽ͢Δͨͼʹ஋Λऔಘ͢Δ

    View Slide

  15. View Slide

  16. ஫ҙ఺

    View Slide

  17. ஫ҙ఺
    w BQPMMPNPEVMFͷ3&"%.&ʹ͸ʮθϩίϯϑΟάͰ
    0,ʯͱ͔ॻ͍ͯΔ͚ͲΠϚΠνͳͷͰɺ;ͭ͏ʹઃఆ
    ϑΝΠϧΛॻ͘΍Γํ͕ྑͦ͞͏
    w WVFBQPMMP΍BQPMMPDMJFOUެࣜυΩϡϝϯτʹ͸

    BQPMMPCPPTUͱ͍͏ॳظઃఆ΍ͬͯ͘ΕΔܥͷ

    ϥΠϒϥϦΛ࢖͏΍Γํ͕঺հ͞Ε͍ͯΔ͕ɺ

    ͜Ε΋ඍົͳͷͰࣗ෼ͰઃఆΛॻ͘΍Γํ͕ྑͦ͞͏

    View Slide

  18. ઃܭࢦ਑

    View Slide

  19. "QPMMP$MJFOU࢖༻࣌ͷઃܭࢦ਑
    ϖʔδ୯ҐͰ׬݁ͤ͞Δ
    .VUBUJPO͚ͩ7VFYͱ઀ଓ͢Δ
    2VFSZ͚ͩ7VFYͱ઀ଓ͢Δ
    ྆ํ7VFYʹ઀ଓ͢Δ

    View Slide

  20. ϩʔΧϧεςʔτ͸7VFYɺ
    αʔόʔͱ΍ΓऔΓ͢Δ஋͸
    "QPMMP$MJFOUͰ؅ཧ͢Δ

    View Slide

  21. "QPMMP$MJFOUͷ
    ΩϟογϡΛར༻͍ͨ͠ͷͰ
    7VFYͱͷ઀ଓ͸͋·Γͨ͘͠ͳ͍

    View Slide

  22. ϖʔδίϯϙʔωϯτ͝ͱʹ
    "QPMMP$MJFOUΛݺͼग़͠ɺ
    ͦͷϖʔδͰඞཁͳ஋͸ϖʔδ಺Ͱ
    औಘ͢Δ

    View Slide

  23. Ͳ͏ͯ͠΋άϩʔόϧʹڞ༗͍ͨ͠
    ΋ͷ͚ͩ7VFYʹ֨ೲ͢Δ

    View Slide

  24. /VYUKTͱ
    (SBQI2-"QPMMP$MJFOUͷ

    Մೳੑ

    View Slide

  25. Մೳੑ
    w ΫϥΠΞϯταΠυͷϧʔςΟϯάͱ"1*ઃܭΛ੾Γ
    ཭ͤΔͷͰɺΑΓॊೈͳઃܭ͕ՄೳʹͳΔ
    w αʔόʔαΠυͱͷ௨৴Λ࠷௿ݶʹ཈͑ΒΕΔ
    w /VYUKTΛαʔόʔαΠυͰಈ͔͢ͱ͖ʹ/PEFKTͷ
    (SBQI2-αʔόʔΛ࡞Ε͹ɺ#''Λ΍Γ΍͍͢

    View Slide

  26. ՝୊
    w 7VFYͱͲ͏ڞଘ͍ͤͯ͘͞ͷ͕ྑ͍ͷ͔
    w ϑϩϯτΤϯυͷܕఆٛΛαʔόʔαΠυͷ4DIFNF
    ͔ΒࣗಈͰఆ͍ٛͨ͠
    w BQPMMPMJOLTUBUFͲ͏ͳΔʁ
    w 3&45"1*ͱͷڞଘͱ͔

    View Slide

  27. ऴΘΓʂ

    View Slide