"Laravel/ui" 使い始め #larasap

"Laravel/ui" 使い始め #larasap

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

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

October 31, 2019
Tweet

Transcript

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

  2. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ ୭ • ໊લ tacck / ໦ݪ ୎໵ •

    ॴଐ גࣜձࣾϊʔεσΟςʔϧ • ओ࠵ • ΏΔWebษڧձ@ࡳຈ • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
  3. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ -BSBWFMY3FMFBTF IUUQTMBSBWFMOFXTDPNMBSBWFM<>

  4. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ ͓ͬͦ͘͞໿ଋͷ QIQBSUJTBONBLFBVUI
 Ϣʔβʔೝূػೳ௥Ճ

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

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

    cd blog $ php artisan make:auth
  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
  8. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ ࠔͬͨΒެࣜΛ֬ೝ https://laravel.com/docs/6.x/frontend

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

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

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

  12. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ -BSBWFM͔Βɺ
 6*ཁૉ͸lMBSBWFMVJzʹ
 ෼཭͞Ε·ͨ͠ɻ

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

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

    cd blog $
  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 [։ൃ༻αʔόىಈ]
  16. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ [ผλʔϛφϧ] [webpack.mix.js ʹ௥ه] ``` mix.browserSync({ proxy: 'http://localhost:8000' });

    ``` $ npm run dev [BrowserSyncؔ࿈ͷύοέʔδ௥Ճͷϝοηʔδ] $ npm run watch [ϒϥ΢βͰ http://localhost:3000/ Λ։͘]
  17. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ

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

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

  20. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ app.js ͱ ExampleComponent.vue ͸
 εΩϟϑΥʔϧσΟϯά͞Ε͍ͯΔɻ

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

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

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

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

  25. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ ͓·͚ ɹϑϩϯτΤϯυ
 ɹ-BSBWFM #MBEF Ͱॻ͔͘
 ɹ7VFKTͰॻ͔͘

  26. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ ϑϩϯτΤϯυͷਓ͕
 -BSBWFM #MBEF ʹؔΘͬͨ࣌ʹ ໎͍͕ͪ
 ˞ݸਓͷײ૝

  27. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ όοΫΤϯυͷਓ͸
 ͦ΋ͦ΋7VFKT͕Θ͔Βͳ͍ ɹˠ#MBEFҰ୒
 ˞֬৴

  28. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ ྫ͑͹ɺϢʔβʔৄࡉϖʔδΛ
 ϒϥ΢βͰݟΔͱͯ͠ɻ

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

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

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

    ม׵͞ΕͨHTML͕
 ϒϥ΢βͰදࣔ https://www.example.com/user/1
  32. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ #MBEF 7VFKTͷ৔߹

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

  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΁ม׵
  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͸ಈ࡞͍ͯ͠ͳ͍ɻ
  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΁൓өɻ
  37. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ ը໘ཁૉ࡞੒λΠϛϯά͕ճ • Laravel ͕ Blade ͔Β HTML ࡞੒


    → ͜͜Ͱ൓ө͞ΕΔͷ͸ *.blade.php ϑΝΠϧ
 ɹVue.js ͷίϯϙʔωϯτʹ͸ʮଐੑʯͰͷҾ͖౉͠ͷΈɻ
 ɹͦΕҎ֎Ͱ͸ɺίϯϙʔωϯτͷதΛૢ࡞Ͱ͖ͳ͍ɻ • ϒϥ΢β ͕ Vue.js Λ DOM ΁൓ө
 → ͜͜Ͱ൓ө͞ΕΔͷ͸ app.js (*.vue) ϑΝΠϧ
 ɹଐੑͰड͚औͬͨ΋ͷҎ֎ɺ
 ɹઐ༻API͕ͳ͍ͱαʔό͔Β৘ใΛऔΕͳ͍ɻ
  38. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ xxxxxx xxxxxx xxxxxx xxxxxx _ _ __ xxxxxx

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

    xxxxxx xxxxxx αΠυͷϝχϡʔ͝ͱʹ Blade Ͱ࡞੒ɻ
 (ϖʔδભҠΞΫγϣϯ༗Γ) ϖʔδ಺ͷσʔλ͸αʔόͰऔಘ͠ɺ
 Vue.js ͷίϯϙʔωϯτʹଐੑͰҾ͖౉͠ɻ
  40. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ xxxxxx xxxxxx xxxxxx xxxxxx _ _ __ xxxxxx

    xxxxxx xxxxxx ϖʔδ಺ͷίϯϙʔωϯτΛ Vue.js Ͱ࡞੒ɻ
 λϒ੾Γସ͑ͰͷϖʔδભҠແ͠ɻ ௥Ճ৘ใ͕ແ͚Ε͹ɺ௨৴΋ෆཁɻ
  41. !UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ FOE