"Laravel/ui" 使い始め #larasap

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

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

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

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

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

cd blog $ php artisan make:auth

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

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

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

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

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

cd blog $

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app.js ม׵͞ΕͨϑΝΠϧ܈͕  ϒϥ΢βͰදࣔ https://www.example.com/user/1 app.js Vue.js ͸ࣄલʹϏϧυ Blade෦෼͸HTML΁ม׵ αʔόͷ৘ใΛ࢖ͬͯ  HTMLΛΛ࡞੒ɻ ͜͜Ͱ͸JS͸ಈ࡞͍ͯ͠ͳ͍ɻ

app.js ม׵͞ΕͨϑΝΠϧ܈͕  ϒϥ΢βͰදࣔ https://www.example.com/user/1 app.js Vue.js ͸ࣄલʹϏϧυ Blade෦෼͸HTML΁ม׵ ͜͜ͰɺVue.jsͷίϯϙʔωϯτΛ  ϒϥ΢β͕DOM΁൓өɻ

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

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

xxxxxx xxxxxx αΠυͷϝχϡʔ͝ͱʹ Blade Ͱ࡞੒ɻ  (ϖʔδભҠΞΫγϣϯ༗Γ) ϖʔδ಺ͷσʔλ͸αʔόͰऔಘ͠ɺ  Vue.js ͷίϯϙʔωϯτʹଐੑͰҾ͖౉͠ɻ

xxxxxx xxxxxx ϖʔδ಺ͷίϯϙʔωϯτΛ Vue.js Ͱ࡞੒ɻ  λϒ੾Γସ͑ͰͷϖʔδભҠແ͠ɻ ௥Ճ৘ใ͕ແ͚Ε͹ɺ௨৴΋ෆཁɻ

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

"Laravel/ui" 使い始め #larasap

"Laravel/ui" 使い始め #larasap

More Decks by Kihara, Takuya

Other Decks in Technology

Featured

Transcript