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
October 31, 2019
Technology
2
450
"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 Lambda で LLRT を動かしてみた #北海道まったりLT大会
tacck
0
55
地方から始める登壇のステップアップ 〜Java Do から JJUG CCC への登壇参加記録 #javado
tacck
0
84
ゆるWebの新型コロナ Before/After とこれからのこと #seb_yearend
tacck
0
24
AWS Amplify と Amazon Bedrock を使ってオレオレ生成AIサイトを作る #ゆるWeb札幌
tacck
0
140
「普通」のエンジニアとしての生存戦略〜または、いかにして技術を楽しむか。 #情報メディア入門
tacck
0
55
噂の Amazon Bedrock を Java から使ってみる #javado
tacck
1
270
ソラカメとAmplifyでお手軽ライブカメラを作ってみた(制限あり) #ゆるWeb札幌
tacck
0
220
ゆるWeb勉強会@札幌 #24 #ゆるWeb札幌
tacck
0
110
AWS Amplify と Cloudflare Pages 比べてみれば / #CloudflareUG_cts #AWSAmplifyJP
tacck
1
620
Other Decks in Technology
See All in Technology
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
1
120
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
0
290
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
610
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.2k
Apple Vision Pro trial session
akkeylab
0
120
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.8k
CSSDAY 2024
kevinshallvari
0
180
オブザーバビリティの Primary Signals
onk
PRO
0
530
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
Signals Unleashed: The Full Guide
rainerhahnekamp
0
350
Databricks におけるデータエンジニアリング
databricksjapan
0
360
メールセキュリティの DMARC周りの設定を少しずつ設定してみたお話
miu_crescent
1
260
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Designing for Performance
lara
601
67k
Code Review Best Practice
trishagee
54
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
The Mythical Team-Month
searls
214
42k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Web development in the modern age
philhawksworth
201
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Art, The Web, and Tiny UX
lynnandtonic
288
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
The Invisible Customer
myddelton
114
12k
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