NuxtとLaravelを連携する上でやったこと

Transcript

1. /VYUͱ-BSBWFMΛ࿈ܞ͢Δ্Ͱ΍ͬͨ͜ͱ
   
   7VF/JHIUJO'VLVPLB
   ٢໺խ໹
   

   View Slide

2. ٢໺խ໹ :PTIJOP.BTBZB
   
   'VTJDΤϯδχΞ
   ʮՎͬͯགྷΕΔΤϯδχΞʯ
   !BZBTBNJOE
   ࣗݾ঺հ
   

   View Slide

3. View Slide

4. ༨ஊ
   

   View Slide

5. ࣾһཱྀߦͰόϦʹߦ͖ͬͯ·ͨ͠ʂʂ
   

   View Slide

6. ຊ୊
   

   View Slide

7. /VYUͱ-BSBWFMΛ࿈ܞ͢Δ্Ͱ΍ͬͨ͜ͱ
   
   7VF/JHIUJO'VLVPLB
   ٢໺խ໹
   

   View Slide

8. ·ͣ͸֬ೝ
   

   View Slide

9. /VYUKTΛ࢖ͬͨ͜ͱ͕ͳ͍!
   

   View Slide

10. /VYUKTΛͪΐͬͱ৮ͬͨ͜ͱ͕͋Δ!
    

    View Slide

11. /VYUKTΛ࣮ࡍʹҊ݅Ͱ࢖ͬͨ͜ͱ͕͋Δ!
    

    View Slide

12. /VYUKT׬શཧղ✌ bТ✌
    
    

    View Slide

13. ର৅ɿ
    /VYUKTΛ࢖ͬͨ͜ͱ͕ͳ͍!
    /VYUKTΛͪΐͬͱ৮ͬͨ͜ͱ͕͋Δ!
    

    View Slide

14. ͸͡Ίͯ/VYUΛҊ݅Ͱ࢖ͬͨ࣌ʹ
    ೰Μͩ͜ͱɺ͜·ͬͨ͜ͱ
    Λ·ͱΊ·ͨ͠ɻ
    

    View Slide

15. ɾ7VF͔/VYU͔
    ɾσΟϨΫτϦߏ଄Ͳ͏͢Δ͔
    ɾϝʔϧͷػߏͲ͏͢Δ
    ɾͦͷଞ
    ໨࣍
    

    View Slide

16. 7VF͔/VYU͔
    

    View Slide

17. https://github.com/ayasamind/cake_webpacker
    CakePHP + VueͷSPA͸Ҋ݅Ͱ΍ͬͯΈͨ
    

    View Slide

18. ͔ͤͬͩ͘͠ɺ࣍͸/VYU࢖ͬͯΈΑ͏
    

    View Slide

19. ݸਓత݁࿦
    7VF͔/VYU͔
    

    View Slide

20. அવ/VYUʂ
    7VF͔/VYU͔
    

    View Slide

21. ɾ΍ͬͺΓSPVUJOH͔͔ͳ͍͍ͯ͘ͷ͕ɺͱͯ΋ָɻ
    ɾNJEEMFXBSF΋ඇৗʹศརɻ
    ɾ7VFͰ41"Λ࡞Δ৔߹͸ɺجຊ/VYUͰ͍͍ͷͰ͸
    7VF͔/VYU͔
    

    View Slide

22. σΟϨΫτϦߏ଄Ͳ͏͢Δ͔
    

    View Slide

23. σΟϨΫτϦߏ଄Ͳ͏͢Δ͔
    > views > ~.vue
    LaravelσϑΥϧτͷvue࿈ܞͷ৔߹
    

    View Slide

24. σΟϨΫτϦߏ଄Ͳ͏͢Δ͔
    /VYUͷ৔߹ɺɺɺͲ͏͠Α͏ʁ
    

    View Slide

25. σΟϨΫτϦߏ଄Ͳ͏͢Δ͔
    -BSWBMͷ"1*༻ϦϙδτϦ
    /VYUͷϑϩϯτ༻ϦϙδτϦ
    ʹ෼ׂɻ
    

    View Slide

26. σΟϨΫτϦߏ଄Ͳ͏͢Δ͔
    ɾ"1*ͱϑϩϯτ͸ಉ͡8FCαʔόʔͰಈ͍ͯ΄͍͠ɻ
    ˠQVCMJD഑Լʹ/VYUHFOFSBUFͰੜ੒ͨ͠ϑΝΠϧΛ
    ɹઃஔ͢ΔεΫϦϓτΛ૊Ήɻ
    

    View Slide

27. ϝʔϧͷػߏͲ͏͢Δ͔
    

    View Slide

28. ϝʔϧೝূͷػߏΛͲ͏࡞Δ͔
    ɾϝʔϧΛૹΔͷ͸-BSBWFMଆɻ
    ɾϝʔϧͷຊจ͔ΒભҠ͢Δ63-͸/VYUଆɻ
    ɾϝʔϧೝূ͢Δͷ͸-BSBWFMଆɻ
    ϝʔϧͷػߏͲ͏͢Δ͔
    

    View Slide

29. -BSBWFMଆͷDPOpHʹϑϩϯτͷ63-Λهड़ɻ
    63-ͷΫΤϦʹೝূ༻63-Λ͚ͭΔɻ
    ΞΫηε࣌ʹBYJPTͰHFUͯ͠ɺϝʔϧೝূ׬ྃ
    ͦͷଞ໎ͬͨ͜ͱ
    https://qiita.com/ayasamind/items/abadb9737e9d6480806b
    

    View Slide

30. ͦͷଞ໎ͬͨ͜ͱ
    

    View Slide

31. 443೉͍͠ɺɺɺ
    ͦͷଞ໎ͬͨ͜ͱ
    

    View Slide

32. ͦͷଞ໎ͬͨ͜ͱ
    ಛʹΞϓϦͷىಈ࣌ʹσʔλऔಘ͢Δ৔߹΍
    ೝূͰstoreΛ࢖͏৔߹ͳͲ͸ɺ
    ϥΠϑαΠΫϧͷͪΌΜͱͨ͠ཧղ͕ඞཁɻ
    

    View Slide

33. ·ͱΊ
    ɾ/VYUศརɻ
    ɾ࣍͸443௅ઓ͍ͨ͠ɻ
    

    View Slide

34. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide