"Laravel/ui" 使い始め #larasap

Laravel x Vue.js 勉強会 in ゆめみ札幌 vol.2 LT資料
https://larasap.connpass.com/event/148886/

Transcript

1. -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPM
   !UBDDL
   -BSBWFMVJ࢖͍࢝Ί
   ೥݄೔
   

   View Slide

2. !UBDDL
   -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
   ୭
   • ໊લ
   
   tacck / ໦ݪ ୎໵
   
   • ॴଐ
   
   גࣜձࣾϊʔεσΟςʔϧ
   
   • ओ࠵
   
   • ΏΔWebษڧձ@ࡳຈ
   
   • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ
   
   • ޷͖ͳϑΟΪϡΞεέʔτͷٕ
   
   εϓϨουɾΠʔάϧ
   

   View Slide

3. !UBDDL
   -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
   -BSBWFMY3FMFBTF
   IUUQTMBSBWFMOFXTDPNMBSBWFM<>
   

   View Slide

4. !UBDDL
   -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
   ͓ͬͦ͘͞໿ଋͷ
   QIQBSUJTBONBLFBVUI

   Ϣʔβʔೝূػೳ௥Ճ
   
   

   View Slide

5. !UBDDL
   -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
   $ composer create-project --prefer-dist laravel/laravel
   blog “6.0.*"
   $ cd blog
   $
   

   View Slide

6. !UBDDL
   -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
   $ composer create-project --prefer-dist laravel/laravel
   blog “6.0.*"
   $ cd blog
   $ php artisan make:auth
   

   View Slide

7. !UBDDL
   -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
   $ composer create-project --prefer-dist laravel/laravel
   blog “6.0.*"
   $ cd blog
   $ php artisan make:auth
   Command "make:auth" is not defined.
   Did you mean one of these?
   make:channel
   make:command
   make:controller
   make:event
   make:exception
   make:factory
   make:job
   make:listener
   

   View Slide

8. !UBDDL
   -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
   ࠔͬͨΒެࣜΛ֬ೝ
   https://laravel.com/docs/6.x/frontend
   

   View Slide

9. !UBDDL
   -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
   ࠔͬͨΒެࣜΛ֬ೝ
   https://laravel.com/docs/6.x/frontend
   

   View Slide

10. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    ࠔͬͨΒެࣜΛ֬ೝ
    https://laravel.com/docs/6.x/frontend
    

    View Slide

11. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    ࠔͬͨΒެࣜΛ֬ೝ
    https://laravel.com/docs/6.x/frontend
    ΊͬͪΌॻ͍ͯ͋Δ
    

    View Slide

12. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    -BSBWFM͔Βɺ

    6*ཁૉ͸lMBSBWFMVJzʹ

    ෼཭͞Ε·ͨ͠ɻ
    

    View Slide

13. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    ͱ͍͏Θ͚ͰɺެࣜΛݟͳ͕Β
    ࢼͯ͠Έ·͢ɻ O൪Ḧ͡
    
    

    View Slide

14. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    $ composer create-project --prefer-dist laravel/laravel
    blog “6.0.*"
    $ cd blog
    $
    

    View Slide

15. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    $ composer create-project --prefer-dist laravel/laravel
    blog "6.0.*"
    $ cd blog
    $ composer require laravel/ui --dev
    $ php artisan ui vue --auth
    $ npm install
    $ php artisan serve
    Laravel development server started: http://127.0.0.1:8000
    [։ൃ༻αʔόىಈ]
    

    View Slide

16. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    [ผλʔϛφϧ]
    [webpack.mix.js ʹ௥ه]
    ```
    mix.browserSync({
    proxy: 'http://localhost:8000'
    });
    ```
    $ npm run dev
    [BrowserSyncؔ࿈ͷύοέʔδ௥Ճͷϝοηʔδ]
    $ npm run watch
    [ϒϥ΢βͰ http://localhost:3000/ Λ։͘]
    

    View Slide

17. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    

    View Slide

18. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    7VFKTͷίϯϙʔωϯτΛ

    ࢖ͬͯΈΔ
    

    View Slide

19. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    

    View Slide

20. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    app.js ͱ ExampleComponent.vue ͸

    εΩϟϑΥʔϧσΟϯά͞Ε͍ͯΔɻ
    

    View Slide

21. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    

    View Slide

22. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    ExampleComponent Λݺͼग़͢ɺ
    example.blade.php Λ࡞੒ɻ
    

    View Slide

23. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    example.blade.php Λݺͼग़͢
    ϧʔτΛ௥Ճɻ
    

    View Slide

24. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    

    View Slide

25. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    ͓·͚
    ɹϑϩϯτΤϯυ

    ɹ-BSBWFM #MBEF
    Ͱॻ͔͘

    ɹ7VFKTͰॻ͔͘
    

    View Slide

26. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    ϑϩϯτΤϯυͷਓ͕

    -BSBWFM #MBEF
    ʹؔΘͬͨ࣌ʹ
    ໎͍͕ͪ

    ˞ݸਓͷײ૝
    

    View Slide

27. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    όοΫΤϯυͷਓ͸

    ͦ΋ͦ΋7VFKT͕Θ͔Βͳ͍
    ɹˠ#MBEFҰ୒

    ˞֬৴
    

    View Slide

28. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    ྫ͑͹ɺϢʔβʔৄࡉϖʔδΛ

    ϒϥ΢βͰݟΔͱͯ͠ɻ
    

    View Slide

29. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    #MBEFͷΈͷ৔߹
    

    View Slide

30. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    View
    ϒϥ΢β Webαʔό Laravel
    Blade
    https://www.example.com/user/1
    

    View Slide

31. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    View
    ϒϥ΢β Webαʔό Laravel
    Blade
    HTML
    HTML
    HTML΁ม׵
    ม׵͞ΕͨHTML͕

    ϒϥ΢βͰදࣔ
    https://www.example.com/user/1
    

    View Slide

32. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    #MBEF7VFKTͷ৔߹
    

    View Slide

33. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    View
    ϒϥ΢β Webαʔό Laravel
    Blade
    Vue.js
    https://www.example.com/user/1
    

    View Slide

34. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    View
    ϒϥ΢β Webαʔό Laravel
    Blade
    Vue.js
    HTML
    HTML
    app.js
    ม׵͞ΕͨϑΝΠϧ܈͕

    ϒϥ΢βͰදࣔ
    https://www.example.com/user/1
    app.js
    Vue.js ͸ࣄલʹϏϧυ
    Blade෦෼͸HTML΁ม׵
    

    View Slide

35. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    View
    ϒϥ΢β Webαʔό Laravel
    Blade
    Vue.js
    HTML
    HTML
    app.js
    ม׵͞ΕͨϑΝΠϧ܈͕

    ϒϥ΢βͰදࣔ
    https://www.example.com/user/1
    app.js
    Vue.js ͸ࣄલʹϏϧυ
    Blade෦෼͸HTML΁ม׵
    αʔόͷ৘ใΛ࢖ͬͯ

    HTMLΛΛ࡞੒ɻ
    ͜͜Ͱ͸JS͸ಈ࡞͍ͯ͠ͳ͍ɻ
    

    View Slide

36. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    View
    ϒϥ΢β Webαʔό Laravel
    Blade
    Vue.js
    HTML
    HTML
    app.js
    ม׵͞ΕͨϑΝΠϧ܈͕

    ϒϥ΢βͰදࣔ
    https://www.example.com/user/1
    app.js
    Vue.js ͸ࣄલʹϏϧυ
    Blade෦෼͸HTML΁ม׵
    ͜͜ͰɺVue.jsͷίϯϙʔωϯτΛ

    ϒϥ΢β͕DOM΁൓өɻ
    

    View Slide

37. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    ը໘ཁૉ࡞੒λΠϛϯά͕ճ
    • Laravel ͕ Blade ͔Β HTML ࡞੒

    → ͜͜Ͱ൓ө͞ΕΔͷ͸ *.blade.php ϑΝΠϧ

    ɹVue.js ͷίϯϙʔωϯτʹ͸ʮଐੑʯͰͷҾ͖౉͠ͷΈɻ

    ɹͦΕҎ֎Ͱ͸ɺίϯϙʔωϯτͷதΛૢ࡞Ͱ͖ͳ͍ɻ
    
    • ϒϥ΢β ͕ Vue.js Λ DOM ΁൓ө

    → ͜͜Ͱ൓ө͞ΕΔͷ͸ app.js (*.vue) ϑΝΠϧ

    ɹଐੑͰड͚औͬͨ΋ͷҎ֎ɺ

    ɹઐ༻API͕ͳ͍ͱαʔό͔Β৘ใΛऔΕͳ͍ɻ
    

    View Slide

38. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    xxxxxx
    xxxxxx
    xxxxxx
    xxxxxx
    _
    _
    __
    xxxxxx xxxxxx xxxxxx
    

    View Slide

39. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    xxxxxx
    xxxxxx
    xxxxxx
    xxxxxx
    _
    _
    __
    xxxxxx xxxxxx xxxxxx
    αΠυͷϝχϡʔ͝ͱʹ Blade Ͱ࡞੒ɻ

    (ϖʔδભҠΞΫγϣϯ༗Γ)
    ϖʔδ಺ͷσʔλ͸αʔόͰऔಘ͠ɺ

    Vue.js ͷίϯϙʔωϯτʹଐੑͰҾ͖౉͠ɻ
    

    View Slide

40. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    xxxxxx
    xxxxxx
    xxxxxx
    xxxxxx
    _
    _
    __
    xxxxxx xxxxxx xxxxxx
    ϖʔδ಺ͷίϯϙʔωϯτΛ
    Vue.js Ͱ࡞੒ɻ

    λϒ੾Γସ͑ͰͷϖʔδભҠແ͠ɻ
    ௥Ճ৘ใ͕ແ͚Ε͹ɺ௨৴΋ෆཁɻ
    

    View Slide

41. !UBDDL
    -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
    FOE
    

    View Slide