"Laravel/ui" 使い始め #larasap

by Kihara, Takuya

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

!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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

!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 [։ൃ༻αʔόىಈ]

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ View ϒϥ΢β Webαʔό Laravel Blade HTML HTML HTML΁ม׵ ม׵͞ΕͨHTML͕  ϒϥ΢βͰදࣔ https://www.example.com/user/1

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

!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΁ม׵

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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