Vue入門

Copyright © Xchange Solutions All right reserved.
Vue入門
株式会社エクスチェンジソリューションズ
野田健夫
2019.10.29
Fukuoka.php Vol.31

2
こんにちは
野田健夫（のだたけお）
https://twitter.com/nodatakeo
https://www.facebook.com/nodatakeo
株式会社エクスチェンジソリューションズ

3
内容について
Vueの未経験者、初心者を対象。導入から
開発の基本をカバー。
Vueの特性について理解して、より深く利
用することを目標としています。

4
Vueとは
 テンプレート(フロントUI)に特化したオープンソースのJavaScriptフ
レームワーク。
 データ駆動（データドリブン）、リアクティブプログラミング。
 データが変わることで表示が変わる。
 コンポーネント志向（HTML/CSS/JSを部品単位で扱う）。
 MVVMパターン(Model-View-ViewModelパターン、Controllerレス)。
https://qiita.com/asip2k25/items/bd4bdccd5201d542953c
DOM API(JSON)
Vue

5
なぜJQueryでなくVueなのか？
 DOMそのものを扱う時代から仮想DOMを扱う時代へ
 DOMの設計情報をもとにデータと組み合わせて構築。
 VueやReactは、データ駆動のテンプレートエンジン。
 差分描画をするので、DOM全体を把握して描画するJQueryより圧
倒的に高速。
 JQueryのようなDOM全体を管理する方法だと、イベント操作や
DOM操作が増えると状態管理の理解やメンテが困難。
 既存のライブラリは使えないか？
 既存JQueryも使えないわけではない。組み合わせることは可能。
 ただし、Vueの利点を生かすならば、 (セレクタを使っての) DOM
操作を行う思想を捨てて、できる限りVueベースで記述すべき。

6
Vue vs React vs Angular
https://trends.google.com/trends/explore?date=today%205-y&q=vue.js,react.js,angular.js

7
Vue開発環境：環境構築
 VueCLIのインストール
• VueCLIを使うためにはnode.jsのインストールが必要です。
• npmというnode.jsの構成管理ツールを使ってVueCLIをインストールします。
 VueCLIを使ってプロジェクト作成
• vue コマンドでプロジェクトを作成します。
npm install -g vue-cli
vue init webpack (プロジェクト名)
cd (プロジェクト名)
npm install

8
Vue開発環境：プロジェクト作成例
 vue init での実行例
vue init webpack (プロジェクト名)
? Project name (プロジェクト名)
? Project description A Vue.js project
? Author (作者)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

9
Vueフォルダ構成(基本)
├─build (ビルドスクリプト)
├─config (ビルド設定ファイル)
├─dist (コンパイル結果フォルダ)
├─node_modules (nodeライブラリフォルダ)
├─src (ソースコード)
│ ├─assets (画像等)
│ ├─components (VUE-Componentファイル)
│ ├─router (VUE-Routerファイル)
│ ├─App.vue (ベースとなるアプリケーションVueファイル)
│ └─main.js (VUEを実行するJS)
├─static (リソースファイル)
├─test (テストケース)
├─index.html (distに出力する親HTML)
└─package.json (npmを実行するための定義ファイル)

10
npm基本コマンド
• npm コマンドを使ってビルドや開発環境を調整します。
npm install
Javascriptライブラリのインストール。
npm build
ビルドを実行します。
npm dev
開発サーバーを起動します。Hot deploy。編集しながらチェック可。
• Webpackのビルドスクリプトがbuildフォルダ以下に配置。設定はconfig
フォルダ以下。設定ファイルを環境ごとに切り替える場合は調整。
• 普段は、src 以下のVueファイルを編集し、rootフォルダ直下でnpmコマ
ンドで環境調整します。
PHPでいうところの
composer/artisan的なもの

11
Vueで作ったHTML/CSSの基本
<div id=“app”>
</div>
window.vue = new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
HTML(直下のindex.html)
<link
href=./static/css/app.fcf583c4
d12dc29f0052d63687f1959f.css
rel=stylesheet>
<script type=text/javascript
src=./static/js/app.c9b343980a
2cb4f88f2a.js></script>
CSS/JS
Vueは指定した１DOM要素に差し
込むことで動作。基本的にページ
に対して１対１で紐づける。
.vueからCSSとJSを作る
npm buildするとdist以下にファイルを生成。

12
main.js について
 Vueプログラムの起点は、main.js
 main.jsからApp.vueを呼び出し、ページを表示する。
 App.vueもコンポーネントの１つ。部品。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app',
template: '<App/>'
})

13
main.jsでやること
 ライブラリの初期化、読込
 VUE関連のライブラリ
 Vue Router: 画面遷移を管理
 Vuex: ログインした情報などコンポネント間の状態管理。
 Vuetify: UIライブラリ。コンポネント多数。
 よく使う汎用ライブラリ
 axios: httpクライアント。API通信する際に利用
 moment: 日時操作ライブラリ。
 その他
 vue-validator: バリデーションを支援するライブラリ。
 まとめサイト(awesome-vue)
https://github.com/vuejs/awesome-vue

14
App.vueについて
すべてのコンポーネントの親玉。
Vueは、App.vueを起点として、この基本
形のコンポーネントが階層化され、組み合
わさった形で動作。
それぞれの部品レイヤーごとにテンプレー
ト、スクリプト、スタイルの３要素を含む。

15
App.vueの中身
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
テンプレート
スクリプト
スタイル

16
参考：Vueコンポーネント設計の考え方
Atomic Design
部品組み合わせ部品
汎用ページ
ヘッダー
フッター
フォーム
各ページ

17
HTMLからVueを作成してみる
<template>にHTMLを埋め込む。
 <template>の直下にはDOM１要素しか含め
ることができないので注意。
<script>にJavascript処理を埋め込む。
<style>にスタイルシートを埋め込む。

18
<script>で使われている言語
ES6 (ECMA Script 2015)
 Javascriptの標準規格
 ESLintでスタイル設定されているのでそれに従う。
 セミコロン(;)禁止。
 === / !== で比較。
 文字列はシングルクオートでくるる(‘)。
 importで外部JSのインポートが可能。
各ブラウザで利用するためには、Babelなどでトランスパイルする必要
有（vueではbuild時にwebpackでBabel処理が組み込まれている）。

19
<script>: name
<script>
export default {
name: 'App'
}
</script>
• name は必須。コンポーネント名を定義。
• コンポーネント名は、名前の衝突を避けるため、複数単語の組み
合わせを推奨（親玉のAppは例外的なクラス）。
• コンポーネント名はパスカルケース(MyComponent)かケバブケー
ス(my-component)で記述する。
• 基底コンポーネントは、Base/V/Appなど固有の名前から始める
(BaseComponent)。
• 単一コンポーネントは、The～始める(TheHeader, TheFooter)。

20
<script>: components
<script>
import PageHeader from '@/component/PageHeader'
import PageFooter from '@/component/PageFooter'
import SubMenu from '@/component/SubMenu'
export default {
name: 'App’
components: {
PageHeader,
PageFooter
SubMenu
}
:
}
</script>
• template内で利用するコンポーネントを定義。
• template内では、ケバブ記法もしくはパスカル記法のタグで呼び出す。
<page-header />
<sub-menu :menu="menu" />
<page-footer />
template構文

21
プロパティ系
data (データプロパティ)
computed (算出プロパティ)
props (コンポーネントプロパティ)
filters (テキストフィルター)

22
<script>: data
• コンポーネントで取り扱うデータ値。
• 配列でなく、必ずオブジェクト(もしくは関数型)で設定。
• このdata値を更新することで状態を変えることで画面を更新。
<script>
export default {
:
data () {
return {
price: null,
productList: null
}
},
}
</script>
{{ price }}
template構文

23
<script>: computed
<script>
export default {
:
computed: {
productPrice: function () {
return this.productList.reduce(function (sum, product) {
return sum + product.price
}, 0);
}
},
}
</script>
• データを関数を介してデータ変換する場合に利用。
• 集計したり、配列変換する場合に利用。
• template 構文内で処理するには長いものを記述。
{{ productPrice }}
template構文

24
<script>: props
<script>
export default {
:
props: {
'productItem': {
type: Object,
required: true
}
},
}
</script>
• 親コンポーネントから受け取るコンポーネントタグの属性値。
• String/Objectといったデータの型を指定することが推奨されている。
• default値、required属性、validator属性を指定することができる。
{{ productItem.name }}
template構文

25
<script>: filters
<script>
export default {
:
filters: {
numberFormat: function (value) {
if (!value) {
return '0'
}
return value.toString().replace(/(¥d)(?=(¥d{3})+$)/g, '$1,')
}
},
}
</script>
• データ値をテキスト加工する場合に設定。
• 複数連結することも可能。
{{ price|numberFormat }}
template構文

26
参考：Appで親タグから属性をとる
<script>
export default {
:
async created () {
// 店舗IDを設定(beforeMount前まではもともとの要素を読める)
this.shopId = await this.$parent.$el.getAttribute(‘shop-id‘)
},
}
</script>
• mount時にレンダーするため、それより前なら、this.$parent.$elでDOM
オブジェクトが取得できる。
• 現在のコンポーネントのDOMオブジェクトは、this.$elで取得できる。
• セレクタで絞り込む場合は、querySelectorなど使って絞り込むことが
できるが、複雑なDOM操作はできるだけ控えたほうがよさそう。
<div id=app shop-id=1 />
元HTML

27
template構文
{{ ～ }}
v-if
v-bind
v-for
v-on
v-model

28
<template>：v-if
 条件によって表示・非表示を切り替える場合に利用。
<div v-if="enableRegister">
<a @click="registerForm" class="btn">登録する</a>
</div>
<div v-else>
<a class="btn-disabled" disabled>登録する</a>
</div>
template構文

29
<template>：v-bind
 DOM属性を変化させるときに利用。
 主にクラス名やスタイルの調整時に利用。
 省略記法は :[属性名]。
<a @click="registerForm" v-bind:class="[buttonClickable ? 'btn' : 'btn-disabled’]”>
登録する
</a>
template構文
<a @click="registerForm" :class="[buttonClickable ? 'btn' : 'btn-disabled’]”>
登録する
</a>
template構文（省略記法）
重要！

30
<template>：v-for
 配列や連想配列を表示する際に利用します。
 :keyを必ず指定。
 プリミティブな一意性を保つ値を設定。
 この値の変化でレンダリングが行われる。
<div v-for="(product, idx) in productList" :key="`product-${idx}`">
<product-list-view :product-item="product" />
</div>
<div v-for="key in Object.keys(productList).reverse()" :key="`product-${idx}`">
<product-list-view :product-item="productList[key]" />
</div>
template構文

31
<template>：v-on
 イベントを検知するための属性。
 v-on:イベント名で記述。
 v-on:click (省略記法だと@click)
 v-on:change (省略記法だと@change)
<a v-on:click="registerForm" v-bind:class="[buttonClickable ? 'btn' : 'btn-disabled’]”>
登録する
</a>
<a @click="registerForm" :class="[buttonClickable ? 'btn' : 'btn-disabled’]”>
登録する
</a>
template構文
重要！
template構文（省略記法）

32
<template>：v-model
 v-on:change + v-bind:valueを組み合わせたもの。
 主にinputフォーム系の属性更新で使われます。
<select id="hour" name="hour" v-model="hour">
<option :value="0">時間を選択してください</option>
<option :value="10">10分</option>
</select>
template構文

33
メソッド系
 v-onで行う処理は、主にmethodsに追加。
 画面遷移
 HTTPリクエストでデータ反映
<script>
export default {
:
methods: {
async registerForm () {
:
}
},
}
</script>

34
<script>：watch
 プロパティ系の値の変化を検知する。
 $routeや配列でネストした値についてもリスナーを
差し込むことができる。
<script>
export default {
:
watch: {
// データの値の変化を監視
price (newVal, oldVal) {
console.log(`更新前のデータ：${oldVal}`)
console.log(`更新後のデータ：${newVal}`)
},
// ルーティング情報の変化を監視
'$route': function (to, from) {
console.log(`画面遷移前のpath：${from}`)
console.log(`画面遷移後のpath：${to}`)
}
},
}
https://qiita.com/33haji/items/7f91afa5d2aef47d74aa

35
イベント系フック
 beforeCreate
 インスタンスの生成およびデータ初期化前
 created
 インスタンスの生成およびデータ初期化後
 よく使われる。API通信処理やタイマー処理など事前処理は主にここで行う。
 beforeMount
 DOM要素に展開前。
 mounted
 DOM要素の展開後。
 よく使われる。DOM展開後に操作が必要な場合は、このタイミングで処理を行う。
 beforeUpdate
 データが更新されたのちDOMに展開前
 updated
 データが更新されたのちDOMに展開後
 beforeDestory
 インスタンスが破棄される前
 destroyed
 インスタンスが破棄された後
値の変化は、watchを使ってイベントフックする
ことが多いためあまり使わない。
モーダルダイアログなどの終了処理で使う。
閉じた後に特定のデータ更新したいケースなど。

36
<script>：イベント系フック
 default直下のメソッドとして記述。
<script>
export default {
:
async created () {
// 店舗IDを設定(beforeMount前まではもともとの要素を読める)
this.shopId = await this.$parent.$el.getAttribute(‘shop-id‘)
},
}
</script>

37
Vue：イベントライフサイクル

38
async (非同期処理)
Promiseはasync(非同期処理)の中で処
理順序を保証するためのクラス。
async asyncPromiseFunc () {
axios.get('/users/read-count').then((res) => {
const res1 = res;
axios.get('/users/write-count').then((res) => {
const res2 = res;
console.log(‘user io: ' + res1.data + res2.data);
});
})
},
• axiosのHTTPクライアントは、Promise型で値を戻します。
• .then でつなげることで順序を保証します。
• レスポンスを受けて処理する場合は、必須な実装パターンです。

39
await (then)
awaitはPromise.then～のネストが深
くなるのを解消するための記法です。
async asyncAwaitFunc () {
const res1 = await axios.get('/users/read-count');
const res2 = await axios.get('/users/write-count');
console.log('user io: ' + res1.data + res2.data)
},
• 前のページと同じ実装をawaitで記述と上記のようになります。
• await を付けた順で同期処理(手続き処理)されます。
• awaitがついていない場合は、非同期処理されます。

40
$nextTick
 $nextTickは、DOM更新後に処理をまとめて処理を
実行するための関数。
created () {
this.$nextTick(() => {
this.state = 'show'
setTimeout(() => {
this.state = 'hide'
}, 1500)
setTimeout(() => {
this.$store.commit('closeToastMessage', this.toast)
}, 2000)
})
}
• DOM更新処理が完了するタイミングでnextTickで指定した関数を実行。
• mounted/updatedとの違いは、nextTickは子のコンポーネントのrender
が完了するのを保証している点。mounted/updatedは親のrenderが終
わった時点で即実行。

41
Mixin
コンポーネントのscript部分について土台を
作ってそれを混ぜ込むことが可能。
PHPでいうところのTrait的なもの
export default {
props: {
'cartItem': {
type: Object,
required: true
}
}
:
}
<script>
import BaseCart from ‘./BaseCart'
export default {
name: 'cart-confirm',
mixins: [BaseCart]
:
}
</script>
BaseCart.vue CartConfirm.vue
MIXIN

42
Vuexについて
 Vueのデータの流れは基本的に親から子の一方通行。
 親と子のコンポーネント両方で共有したいデータ
を使うときに状態管理ライブラリVuexを使う。
 ログイン情報
 入力フォーム情報
 カート情報
 などなど
 store/index.jsにて定義されることが多い。

43
Vuex: ライフサイクル
※ReactのFluxのデータフローを踏襲
②actions で値変更のトリガーを引く。
API通信処理など。
①Vueで関連付け
③mutations で値(state)を更新。
⑤getters で値(state)を取得。
④stateは値を保持。

44
Vuex: ファイル構成
// The Vue build version to load with
the `import` command
// (runtime-only or standalone) has been
set in webpack.base.conf with an alias.
import store from './store'
import router from './router'
new Vue({
el: '#app',
store,
router,
template: '<App/>'
})
main.js store/index.js (VUEXを定義)
import Vuex from 'vuex'
import { actions } from './actions'
import { getters } from './getters'
import { state, mutations } from './mutations'
import { cart } from './cart'
Vue.use(Vuex)
export default new Vuex.Store({
actions,
getters,
state,
mutations,
modules: {
cart: cart
}
})

45
Vuex: actions/mutations/getters
export const actions = {
actions: {
incrementCount (context, args) {
context.commit('increment', args)
}
}
}
export const state = {
state: { count: 0 }
}
export const mutations = {
increment (state, args) {
state.count++
}
}
export const getters = {
isOverLimit: (state) => {
return state.count > 100
}
}
store/actions.js
store/mutations.js
store/getters.js
import { mapActions, mapState, mapGetters } from 'vuex’
export default {
:
methods: {
...mapActions({
incrementCount: 'incrementCount‘
}),
},
computed: {
...mapState({
count: 'count',
}),
...mapGetters({
isOverLimit: 'isOverLimit'
})
},
※ actionsは、methods に組み込む。
Hogehoge.vue
③getters/state から値取得
①actionsでAPIなどから値
を取得し、変更をトリガー
②mutations で値更新
mutations内は必ず同期処理を行う(asyncや
setTimeoutなどの非同期処理は禁止)。
Vueで関連付け
① ②
③
③
※ プロパティ系は、computedに組み込む。

46
Vuex: modules
 action/state/mutations/gettersをまとめてモジュール化可能。
export const cart = {
state: { count: 0 },
actions: {
incrementCount ({ state, commit, rootState }) {
commit('increment')
}
},
mutations: {
increment (state) {
state.count++
}
},
getters: {
twiceCount (state, getters, rootState) {
return state.count * 2
}
}
}
store/index.js
import Vuex from 'vuex'
import { actions } from './actions'
import { getters } from './getters'
import { state, mutations } from './mutations'
import { cart } from './cart'
Vue.use(Vuex)
export default new Vuex.Store({
actions,
getters,
state,
mutations,
modules: {
cart: cart
}
})
store/cart.js

47
Vuex: actionsとaxios
VuexのactionsでAPI通信(axios)を使っ
て値を取得/更新するのが定石。
const res = await axios.get(url, { ...params })
const res = await axios.post(url, postParams)
• axiosのHTTPクライアントは、Promise型で値を戻します。
• .dataプロパティにレスポンスが含まれます。
• .headersプロパティにレスポンスヘッダーが含まれます。

48
Vue-Router
 画面遷移情報を定義する。
 router/index.jsにて設定。
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
// The Vue build version to load with
the `import` command
// (runtime-only or standalone) has been
set in webpack.base.conf with an alias.
import store from './store'
import router from './router'
new Vue({
el: '#app',
store,
router,
template: '<App/>'
})
main.js route/index.js
path, name, 対応する component を
指定します。

49
Vue-Router：使い方
<router-link :to="{name: 'faq'}">
FAQ
</router-link>
<template>でリンクを張る場合
メソッド内で遷移する場合
// 1 つレコードを戻す。history.back() と同じ
this.$router.go(-1)
this.$router.push({name: 'home'})

50
Vue-Route: スクロール処理
export default new Router({
routes: [
:
],
scrollBehavior (to, from, savedPosition) {
if (to.name === 'home') {
return { x: 0, y: 0 }
}
// ハッシュタグが指定されているときは、セレクターを指定して移動
if (to.hash) {
return {
selector: to.hash
// , offset: { x: 0, y: 10 }
}
}
// 望みのポジションを返す
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
route/index.js

51
Laravel＋Vue
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css’);
• LaravelのベースプロジェクトにもVueがある (package.jsonを参照)。
• npm run dev
• npm run prod
• webpack.mix.js に変換対象とするJS/CSSのパスを設定する。
• VueCLI で作った main.js を追加する場合、webpack.mix.jsonに追加。
• ブラウザキャッシュ対策は、ヘルパーmixメソッドをテンプレートで利用す
ることで対応（<script src=“{{ mix(‘js/app.js’) }}”></script> ）。
webpack.mix.json

52
まとめ
 Vueでリアクティブプログラミングを始めよう。
 VueやReactは、今後の開発でマイクロサービス
をつなぐキーとなる技術要素。
 実際の案件に紐づけてやるべし。
 JQueryを使えるレベルがあれば、十分できます。

53
福岡オフィス風景
After
Before
※窓が付きました！会議室もあります！

54
絶賛メンバー募集中です！

Vue入門

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Vue入門

Similar to Vue入門 (20)

More from Takeo Noda

More from Takeo Noda (12)

Vue入門