Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
"Laravel/ui" 使い始め #larasap
Search
Kihara, Takuya
PRO
October 31, 2019
Technology
2
590
"Laravel/ui" 使い始め #larasap
Laravel x Vue.js 勉強会 in ゆめみ札幌 vol.2 LT資料
https://larasap.connpass.com/event/148886/
Kihara, Takuya
PRO
October 31, 2019
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
Flutter を始めよう! - Flutter の開発現場から
tacck
PRO
0
72
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
120
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
120
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
430
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
120
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
79
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
110
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
1
860
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
69
Other Decks in Technology
See All in Technology
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
2
140
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
0
130
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
400
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
220
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
840
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
230
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
110
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
140
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
250
Findy Freelance 利用シーン別AI活用例
ness
0
200
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
120
多様なニーズに応える Movable Type ラインナップ 全紹介
masakah
0
120
Featured
See All Featured
KATA
mclloyd
31
14k
For a Future-Friendly Web
brad_frost
179
9.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Scaling GitHub
holman
461
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Docker and Python
trallard
45
3.5k
It's Worth the Effort
3n
185
28k
The Cult of Friendly URLs
andyhume
79
6.5k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
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