LaravelとVue.jsのSPAな関係

E5b6a68a675f9f566dc0a623d766b14d?s=47 saisai
January 26, 2019

 LaravelとVue.jsのSPAな関係

PHPカンファレンス仙台2019のLT資料です
https://phpcon-sendai.net/2019/

E5b6a68a675f9f566dc0a623d766b14d?s=128

saisai

January 26, 2019
Tweet

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