Nuxt.js with Apollo Client 2018

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