Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
"Laravel/ui" 使い始め #larasap
Kihara, Takuya
October 31, 2019
Technology
2
290
"Laravel/ui" 使い始め #larasap
Laravel x Vue.js 勉強会 in ゆめみ札幌 vol.2 LT資料
https://larasap.connpass.com/event/148886/
Kihara, Takuya
October 31, 2019
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
AWS Amplify で触れる AWS CDK #jawsug_cdk #jawsug
tacck
1
220
ゆるWeb勉強会@札幌 OnLine #18 #ゆるWeb札幌
tacck
0
120
AWS Amplify でホスティングしよう #ゆるWeb札幌
tacck
0
72
AWS Amplify と AWS CDK の良い関係 #awsbasics #AWSAmplifyJP
tacck
1
780
ゆるWeb勉強会@札幌 OnLine #17 #ゆるWeb札幌
tacck
0
53
Twitter の OAuth 2.0 を使ってみた #ゆるWeb札幌
tacck
0
100
ゆるWeb勉強会@札幌 OnLine #16 #ゆるWeb札幌
tacck
0
69
Create your "personal" products with AWS Amplify #jawsug #jawspankration #jawspankration2021
tacck
1
90
ゆるWeb勉強会@札幌 OnLine #15 #ゆるWeb札幌
tacck
0
250
Other Decks in Technology
See All in Technology
1人目QAエンジニアよもやま話 / QA Test Talk Vol.1
nametake
4
220
リファインメントは楽しいかね?
kitamu_mu
1
330
noteの品質課題に立ち上げ直後のQAチームが挑んだ軌跡
hiroki_tanaka
1
190
JJUG2022_spring_Keycloak (Red Hat Single Sign-on)
tinoue
0
190
越境チャレンジの現在地 〜Epic大臣制度の今〜
yousak
0
700
UWBを使ってみた
norioikedo
0
380
セキュリティ 開運研修2022 / security 2022
cybozuinsideout
PRO
2
3.1k
会社訪問アプリ「Wantedly Visit」における推薦システム開発事例
hakubishin3
2
490
さいきんのRaspberry Pi。 / osc22do-rpi
akkiesoft
4
4.5k
Modern Android dependency injection
hugovisser
1
120
Internet Explorer は Microsoft Edge へ - IE の歩みとこれから -
yuhara0928
1
3.4k
Istio入門
nutslove
15
4.8k
Featured
See All Featured
Statistics for Hackers
jakevdp
781
210k
Agile that works and the tools we love
rasmusluckow
319
19k
Designing for humans not robots
tammielis
241
23k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Docker and Python
trallard
27
1.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Building Applications with DynamoDB
mza
83
4.7k
GraphQLとの向き合い方2022年版
quramy
16
8.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Transcript
-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 $
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ $ composer create-project --prefer-dist laravel/laravel blog “6.0.*" $
cd blog $ php artisan make:auth
!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
!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 ࠔͬͨΒެࣜΛ֬ೝ 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൪Ḧ͡
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ $ composer create-project --prefer-dist laravel/laravel blog “6.0.*" $
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
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ app.js ͱ ExampleComponent.vue εΩϟϑΥʔϧσΟϯά͞Ε͍ͯΔɻ
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ ExampleComponent Λݺͼग़͢ɺ example.blade.php Λ࡞ɻ
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ example.blade.php Λݺͼग़͢ ϧʔτΛՃɻ
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ
!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ม
!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ಈ࡞͍ͯ͠ͳ͍ɻ
!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өɻ
!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
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ xxxxxx xxxxxx xxxxxx xxxxxx _ _ __ xxxxxx
xxxxxx xxxxxx αΠυͷϝχϡʔ͝ͱʹ Blade Ͱ࡞ɻ (ϖʔδભҠΞΫγϣϯ༗Γ) ϖʔδͷσʔλαʔόͰऔಘ͠ɺ Vue.js ͷίϯϙʔωϯτʹଐੑͰҾ͖͠ɻ
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ xxxxxx xxxxxx xxxxxx xxxxxx _ _ __ xxxxxx
xxxxxx xxxxxx ϖʔδͷίϯϙʔωϯτΛ Vue.js Ͱ࡞ɻ λϒΓସ͑ͰͷϖʔδભҠແ͠ɻ Ճใ͕ແ͚Εɺ௨৴ෆཁɻ
!UBDDL -BSBWFMY7VFKTษڧձJOΏΊΈࡳຈWPMMBSBTBQ FOE