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

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

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

MasayaYoshino

January 30, 2019
Tweet

More Decks by MasayaYoshino

Other Decks in Technology

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