Vue.js with Laravel

C783391048525c3a705559548aed2323?s=47 C058
October 17, 2017

Vue.js with Laravel

社内ワークショップでVue.jsの実装についてLTした際の資料です

C783391048525c3a705559548aed2323?s=128

C058

October 17, 2017
Tweet

Transcript

  1. Vue.js with Laravel @C058

  2. アジェンダ 1. PICUPについて 2. CMSでの考慮ポイント 3. Vue.js, Laravelの説明 4. 開発のはじめ方

    5. Vue.js基礎 6. PICUPでの実装をチョット見せます
  3. ”ピカップ”はあなたが安心して次の一歩を踏み出せる お買い物を”その道のプロ”が提供する情報でサポート するメディア https://picup.allabout.co.jp/

  4. None
  5. 注力ポイント✌ いかに良い情報(記事)を発信できるか ≒ 記事本数をどれだけ増やせるか ⇓ 良いCMSをどのくらい提供できるか

  6. 良いCMS ≒ 良いユーザビリティ ある製品が 特定のユーザによって 特定の状況下で 特定の目標を達成する際に 求められる 有効さ・効率・満足度の度合い

  7. CMSでは • 処理の成功失敗をユーザーが理解出来る • 何を入力したら良いか分かる • 痒いところに手が届く機能 • メディア・業務フローの成熟具合に応じて機能改修・追加しや すい

  8. 以上、踏まえたうえで実装は • UI,UXにこだわる • 機能追加・改善しやすい構造にする • データ構造をシンプルにする • 拡張性を担保する

  9. PICUPの利用フレームワーク • Vue.js 2系 • Laravel 5.4

  10. Vue.js

  11. Vue.js 特徴 • リアクティブ(疎結合でスケーラビリティ高い) なデータバインディング • 再利用性の高いコンポーネント • 仮想DOMによる高速なレンダリング ◦

    DOM構造に依存しないデータ構造 • シンプルなAPI • vue.jsのコメントがたまに中国語
  12. Vue.js メリット • 日本語ドキュメントが充実 • コンポーネント志向->機能を疎結合にできる ◦ HTMLとJSの実装を1セット1ファイルで管理できる ◦ (ヤバイ仕様・実装を閉じ込めることが可能)

    • 既存実装と同居しやすい ◦ 必要に応じてjQueryも併用できる • 少しの学習コストで済む
  13. Laravel 5.3 -> Vue.jsを標準JavaScriptフレームワークに採用 5.4 -> フロントエンドビルドツールが gulpベースElixir→WebpackベースのMixに Web APIはLaravelで作成

    SPAをVue.jsで組む、といったことが簡単にできる
  14. Vue.js + Laravel 拡張性の高いアプリがすぐに つくれる組み合わせ。

  15. Vue.js + Laravelの始め 方

  16. 始め方 1. Laravel インストール a. composer create-project --prefer-dist laravel/laravel %アプリ名%

    2. npm install 3. resourcesに.vue用意する 4. bladeでjs読み込む 5. サーバー立ち上げ a. php artisan serve b. http://127.0.0.1:8000 6. npm run watch
  17. Vueでとりあえず覚えておくこと • データバインディング • 双方向バインディング • method, computed • レンダリング

    • コンポーネント
  18. イベント・  データバインディング +メソッド http://127.0.0.1:8000/

  19. 双方向データバインディング レンダリング コンポーネント http://127.0.0.1:8000/todo

  20. 結構、簡単。

  21. PICUP CMSの実装

  22. コンポーネント • 入力フォーム項目1つを1コンポーネント扱い ◦ データ構造とDOMが連動しないので並び替えや表示・仕様変更に耐えやすい ◦ ex)URLからのタイトル自動取得・文字数カウントは入力補助機能 • ギミックはコンポーネントに閉じ込める ◦

    ローカルで完結する処理をコンポーネントに閉じ込めることで 処理が隔離され見通しが良くなった✌
  23. 参考資料 • 本家ドキュメント https://vuejs.org/ • デモリポジトリ https://github.com/C058/vue-laravel

  24. 開発Tips

  25. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja