Vue.js with Laravel - Speaker Deck

Vue.js with Laravel

by C058

Embed

Start on current slide

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