Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
LaravelとVue.jsのSPAな関係
saisai
January 26, 2019
Technology
0
260
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
160
GCPUG Sendai Vol2 GKE 入門
saisai
1
190
ゼロから初めたGCP.pdf
saisai
0
250
Other Decks in Technology
See All in Technology
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
daiksy
1
360
2022年度新卒技術研修「 ソフトウェアテスト」講義
excitejp
PRO
0
310
会社訪問アプリ「Wantedly Visit」における推薦システム開発事例
hakubishin3
2
480
miisan's career talk
mii3king
0
210
はてなブログとチーム構成とスクラムのこの1年 #dmm_hatena
polamjag
0
1.1k
覗いてみよう!現場のスクラムチーム
tkredman
0
910
OPENLOGI Company Profile
hr01
0
210
Scrum Fest Osaka 2022 フルリモート下でのチームビルディング
moritamasami
2
870
What's Data Lake ? Azure Data Lake best practice
ryomaru0825
2
700
トランザクションスクリプトはどこから来たのか トランザクションスクリプトは何者か トランザクションスクリプトはどこへ行くのか #sekkeinight
a_suenami
7
2.1k
多様な成熟度のデータ活用を総合支援するKADOKAWA Connectedのデータ組織について
kadokawaconnected
PRO
0
170
インタラクティブなメディアの地図投影法: WebメルカトルからAdaptive Projectionsへ / MIERUNE 社内勉強会 #033
sorami
2
210
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
415
59k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Support Driven Design
roundedbygravity
86
8.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
We Have a Design System, Now What?
morganepeng
35
2.9k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Happy Clients
brianwarren
89
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Web Components: a chance to create the future
zenorocha
303
40k
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