Vue.js with Laravel

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コンポーネント扱い ◦ データ構造と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