Slide 1
Slide 1 text
Vue.js with Laravel
@C058
Slide 2
Slide 2 text
アジェンダ
1. PICUPについて
2. CMSでの考慮ポイント
3. Vue.js, Laravelの説明
4. 開発のはじめ方
5. Vue.js基礎
6. PICUPでの実装をチョット見せます
Slide 3
Slide 3 text
”ピカップ”はあなたが安心して次の一歩を踏み出せる
お買い物を”その道のプロ”が提供する情報でサポート
するメディア
https://picup.allabout.co.jp/
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
注力ポイント✌
いかに良い情報（記事）を発信できるか
≒
記事本数をどれだけ増やせるか
⇓
良いCMSをどのくらい提供できるか
Slide 6
Slide 6 text
良いCMS ≒ 良いユーザビリティ
ある製品が
特定のユーザによって
特定の状況下で
特定の目標を達成する際に
求められる
有効さ・効率・満足度の度合い
Slide 7
Slide 7 text
CMSでは
● 処理の成功失敗をユーザーが理解出来る
● 何を入力したら良いか分かる
● 痒いところに手が届く機能
● メディア・業務フローの成熟具合に応じて機能改修・追加しや
すい
Slide 8
Slide 8 text
以上、踏まえたうえで実装は
● UI,UXにこだわる
● 機能追加・改善しやすい構造にする
● データ構造をシンプルにする
● 拡張性を担保する
Slide 9
Slide 9 text
PICUPの利用フレームワーク
● Vue.js 2系
● Laravel 5.4
Slide 10
Slide 10 text
Vue.js
Slide 11
Slide 11 text
Vue.js 特徴
● リアクティブ(疎結合でスケーラビリティ高い） なデータバインディング
● 再利用性の高いコンポーネント
● 仮想DOMによる高速なレンダリング
○ DOM構造に依存しないデータ構造
● シンプルなAPI
● vue.jsのコメントがたまに中国語
Slide 12
Slide 12 text
Vue.js メリット
● 日本語ドキュメントが充実
● コンポーネント志向->機能を疎結合にできる
○ HTMLとJSの実装を1セット1ファイルで管理できる
○ (ヤバイ仕様・実装を閉じ込めることが可能)
● 既存実装と同居しやすい
○ 必要に応じてjQueryも併用できる
● 少しの学習コストで済む
Slide 13
Slide 13 text
Laravel
5.3 -> Vue.jsを標準JavaScriptフレームワークに採用
5.4 -> フロントエンドビルドツールが
gulpベースElixir→WebpackベースのMixに
Web APIはLaravelで作成
SPAをVue.jsで組む、といったことが簡単にできる
Slide 14
Slide 14 text
Vue.js + Laravel
拡張性の高いアプリがすぐに
つくれる組み合わせ。
Slide 15
Slide 15 text
Vue.js + Laravelの始め
方
Slide 16
Slide 16 text
始め方
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
Slide 17
Slide 17 text
Vueでとりあえず覚えておくこと
● データバインディング
● 双方向バインディング
● method, computed
● レンダリング
● コンポーネント
Slide 18
Slide 18 text
イベント・
データバインディング
＋メソッド
http://127.0.0.1:8000/
Slide 19
Slide 19 text
双方向データバインディング
レンダリング
コンポーネント
http://127.0.0.1:8000/todo
Slide 20
Slide 20 text
結構、簡単。
Slide 21
Slide 21 text
PICUP CMSの実装
Slide 22
Slide 22 text
コンポーネント
● 入力フォーム項目１つを1コンポーネント扱い
○ データ構造とDOMが連動しないので並び替えや表示・仕様変更に耐えやすい
○ ex)URLからのタイトル自動取得・文字数カウントは入力補助機能
● ギミックはコンポーネントに閉じ込める
○ ローカルで完結する処理をコンポーネントに閉じ込めることで
処理が隔離され見通しが良くなった✌
Slide 23
Slide 23 text
参考資料
● 本家ドキュメント
https://vuejs.org/
● デモリポジトリ
https://github.com/C058/vue-laravel
Slide 24
Slide 24 text
開発Tips
Slide 25
Slide 25 text
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja