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
saisai
January 26, 2019
Technology
0
400
LaravelとVue.jsのSPAな関係
PHPカンファレンス仙台2019のLT資料です
https://phpcon-sendai.net/2019/
saisai
January 26, 2019
Tweet
Share
More Decks by saisai
See All by saisai
GDG Cloud Cloud Run
saisai
0
330
GCPUG Sendai Vol2 GKE 入門
saisai
1
380
ゼロから初めたGCP.pdf
saisai
0
500
Other Decks in Technology
See All in Technology
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
220
How Community Opened Global Doors
hiroramos4
PRO
1
130
怖くない!はじめてのClaude Code
shinya337
0
300
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
930
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
460
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
370
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
220
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.3k
Geminiとv0による高速プロトタイピング
shinya337
0
200
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
790
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
180
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
390
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Visualization
eitanlees
146
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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