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とVue.jsのSPAな関係
Search
sai
January 26, 2019
Technology
470
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
LaravelとVue.jsのSPAな関係
PHPカンファレンス仙台2019のLT資料です
https://phpcon-sendai.net/2019/
sai
January 26, 2019
More Decks by sai
See All by sai
GDG Cloud Cloud Run
saisai
0
400
GCPUG Sendai Vol2 GKE 入門
saisai
1
400
ゼロから初めたGCP.pdf
saisai
0
510
Other Decks in Technology
See All in Technology
伝票作成AIエージェントを支える、LLMOpsとインフラの選択肢 / AICon2026_takeda
rakus_dev
0
260
インフラと開発の垣根を超えていき!〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
hatahata021
3
390
ファミコンでPHPを動かす / PHP on the Famicom
tomzoh
2
600
複数プロダクトで進めるAI機能実装 ── 実践から得たリアルな学びとロードマップ実現への挑戦 / AICon2026_yanari
rakus_dev
1
270
副作用のある Lambda でも Lambda Power Tuning は使えるのか / lambda-power-tuning-side-effects
koukihosaka
1
140
SoccerMaster: A Vision Foundation Model for Soccer Understanding
kzykmyzw
0
160
AI x 開発生産性を取り巻く予算戦略と投資対効果
i35_267
7
2.9k
2026年のソフトウェア開発を考える(2026/07版) / Agentic Software Engineering 2026-07 Findy Edition
twada
PRO
25
10k
AI時代の開発生産性は、個人技からチーム設計へ
moongift
PRO
4
2.5k
Aurora MySQL 8.4リリース! Rubyistが備えること / what-rubyist-should-prepare-for-aurora-mysql-8-4
fkmy
0
640
インシデント事例と パッケージの全量解析に学ぶ ソフトウェアサプライチェーンの守り方 / supply-chain-attack-defense
flatt_security
0
890
AIとハーネスで育てるトランスコンパイラ / 20260722 Yasushi Katayama
shift_evolve
PRO
3
770
Featured
See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
500
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.7k
Mobile First: as difficult as doing things right
swwweet
225
10k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
Heart Work Chapter 1 - Part 1
lfama
PRO
8
36k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
270
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
470
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
640
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
390
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
380
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
350
Transcript
LaravelとVue.jsの SPAな関係 2019/1/26 PHPカンファレンス仙台 株式会社ビデオマーケット 齋 洋行 1
2 About Me 齋 洋行 ・37歳 仙台在住 ・Server Side Enginner
(PHP/Go/AWS/GCP) ・株式会社ビデオマーケット ※エンジニア募集中! 主にLaravel使ってます ・PHP歴7年くらい、最近はGoもやってます ・趣味=釣り(船もってます)※釣り仲間募集中!
3 ビデオマーケット 映画・ドラマ・アニメ etc 配信作品は21万本 中身はほぼPHP
4 フロント知識ゼロでVue.jsを 導入した話 今日話すこと
5 導入のキッカケ
6 導入のキッカケ 新規案件の要件 ・ビジネスロジックはWebAPI、Viewはコンポーネント化 は必須 ・エンジニアのリソースは自分一人 ・限られた検証期間 ・作るのは社内で使う管理画面
7 技術選定
8 自分の技術スタック ・PHP(Laravel4〜5.2)、Java、C#、Go、AWS etc... フロントの知識がほぼゼロ
9 ・検証はViewのみにフォーカス ・WebAPIは使い慣れたLaravel Laravel + Vue.jsで検証
10 試してみた
11 フロントの開発環境
12 80%くらいのユースケースで使えるエレガントなWebpackのラッ パー ・webpackの設定をいい感じでやってくれて最速で構築 Laravel Mix
13 デザイン
14 Element UI ・十分すぎるコンポーネント
15 検証結果
16 検証結果 • 可読性 ◦ 単一ファイルコンポーネントなので、完全に処理が 分離 ◦ DSLが楽。smartyとかbladeを使っていたので入り やすい
17 検証結果 • 保守性 ◦ 日本語マニュアルが豊富、最近は導入事例も増え てきている ◦ コミュニティが活発 ◦
Laravel mixがかなり楽 ▪ sassとか正直わかんないのでいい感じにやっ てくれる
18 導入したらこうなった
19 導入したらこうなった 画面数:30 API:15本 JWT認証 2ヶ月弱で作成
20 まとめ
21 まとめ ・Vue.jsの学習コストは予想以上に低い ・vue-router、vuexなどの標準ライブラリが強力 大事なのは ・取捨選択しながら身近なものから少しずつやってい くと色々スムーズ ・地方にいると幅広いスキルセットが必要になるの で、枠を超えて動く
22 Thank you