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
580
"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
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
74
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
110
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
370
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
110
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
68
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
93
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
820
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
60
TypeScript 雰囲気勢がライブラリのコードリーディングで得た知識 #sacss
tacck
PRO
1
100
Other Decks in Technology
See All in Technology
Copilot Agentを普段使いしてわかった、バックエンド開発で使えるTips
ykagano
1
1.2k
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
3.5k
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
360
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
200
Kotlinで学ぶ 代数的データ型
ysknsid25
5
1.1k
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
590
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
220
AWS全冠したので振りかえってみる
tajimon
0
140
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
14
1.8k
Rubyで作る論理回路シミュレータの設計の話 - Kashiwa.rb #12
kozy4324
1
310
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
130
成立するElixirの再束縛(再代入)可という選択
kubell_hr
0
340
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Balancing Empowerment & Direction
lara
1
300
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
780
How to train your dragon (web standard)
notwaldorf
92
6.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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