Vue.js with Laravel

Vue.js with Laravel @C058

アジェンダ 1. PICUPについて 2. CMSでの考慮ポイント 3. Vue.js, Laravelの説明 4. 開発のはじめ方
5. Vue.js基礎 6. PICUPでの実装をチョット見せます

”ピカップ”はあなたが安心して次の一歩を踏み出せるお買い物を”その道のプロ”が提供する情報でサポートするメディア https://picup.allabout.co.jp/

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

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

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

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

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

Vue.js

Vue.js 特徴 • リアクティブ(疎結合でスケーラビリティ高い）なデータバインディング • 再利用性の高いコンポーネント • 仮想DOMによる高速なレンダリング ◦
DOM構造に依存しないデータ構造 • シンプルなAPI • vue.jsのコメントがたまに中国語

Vue.js メリット • 日本語ドキュメントが充実 • コンポーネント志向->機能を疎結合にできる ◦ HTMLとJSの実装を1セット1ファイルで管理できる ◦ (ヤバイ仕様・実装を閉じ込めることが可能)
• 既存実装と同居しやすい ◦ 必要に応じてjQueryも併用できる • 少しの学習コストで済む

Laravel 5.3 -> Vue.jsを標準JavaScriptフレームワークに採用 5.4 -> フロントエンドビルドツールが gulpベースElixir→WebpackベースのMixに Web APIはLaravelで作成
SPAをVue.jsで組む、といったことが簡単にできる

Vue.js + Laravel 拡張性の高いアプリがすぐにつくれる組み合わせ。

Vue.js + Laravelの始め方

始め方 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

Vueでとりあえず覚えておくこと • データバインディング • 双方向バインディング • method, computed • レンダリング
• コンポーネント

イベント・　データバインディング＋メソッド http://127.0.0.1:8000/

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

結構、簡単。

PICUP CMSの実装

コンポーネント • 入力フォーム項目１つを1コンポーネント扱い ◦ データ構造とDOMが連動しないので並び替えや表示・仕様変更に耐えやすい ◦ ex)URLからのタイトル自動取得・文字数カウントは入力補助機能 • ギミックはコンポーネントに閉じ込める ◦
ローカルで完結する処理をコンポーネントに閉じ込めることで処理が隔離され見通しが良くなった✌

参考資料 • 本家ドキュメント https://vuejs.org/ • デモリポジトリ https://github.com/C058/vue-laravel

開発Tips

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

Vue.js with Laravel

Vue.js with Laravel

C058

More Decks by C058

Other Decks in Programming

Featured

Transcript