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

"Laravel/ui" 使い始め #larasap

"Laravel/ui" 使い始め #larasap

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

Kihara, Takuya

October 31, 2019
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

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