LaravelとVue.jsのSPAな関係

Transcript

1. LaravelとVue.jsの SPAな関係 2019/1/26 PHPカンファレンス仙台 株式会社ビデオマーケット 齋 洋行 1

2. 2 About Me 齋 洋行 ・37歳 仙台在住 ・Server Side Enginner

   (PHP/Go/AWS/GCP) ・株式会社ビデオマーケット ※エンジニア募集中！ 　　主にLaravel使ってます ・PHP歴7年くらい、最近はGoもやってます ・趣味＝釣り（船もってます）※釣り仲間募集中！

3. 3 ビデオマーケット 映画・ドラマ・アニメ etc 配信作品は21万本 中身はほぼPHP

4. 4 フロント知識ゼロでVue.jsを 導入した話 今日話すこと

5. 5 導入のキッカケ

6. 6 導入のキッカケ 新規案件の要件 ・ビジネスロジックはWebAPI、Viewはコンポーネント化 は必須 ・エンジニアのリソースは自分一人 ・限られた検証期間 ・作るのは社内で使う管理画面

7. 7 技術選定

8. 8 自分の技術スタック ・PHP（Laravel4〜5.2）、Java、C#、Go、AWS etc... フロントの知識がほぼゼロ

9. 9 ・検証はViewのみにフォーカス ・WebAPIは使い慣れたLaravel Laravel + Vue.jsで検証

10. 10 試してみた

11. 11 フロントの開発環境

12. 12 80%くらいのユースケースで使えるエレガントなWebpackのラッ パー ・webpackの設定をいい感じでやってくれて最速で構築 Laravel Mix

13. 13 デザイン

14. 14 Element UI ・十分すぎるコンポーネント

15. 15 検証結果

16. 16 検証結果 • 可読性 ◦ 単一ファイルコンポーネントなので、完全に処理が 分離 ◦ DSLが楽。smartyとかbladeを使っていたので入り やすい

17. 17 検証結果 • 保守性 ◦ 日本語マニュアルが豊富、最近は導入事例も増え てきている ◦ コミュニティが活発 ◦

    Laravel mixがかなり楽 ▪ sassとか正直わかんないのでいい感じにやっ てくれる

18. 18 導入したらこうなった

19. 19 導入したらこうなった 画面数:30 API:15本 JWT認証 2ヶ月弱で作成

20. 20 まとめ

21. 21 まとめ ・Vue.jsの学習コストは予想以上に低い ・vue-router、vuexなどの標準ライブラリが強力 大事なのは ・取捨選択しながら身近なものから少しずつやってい くと色々スムーズ ・地方にいると幅広いスキルセットが必要になるの で、枠を超えて動く

22. 22 Thank you