Vue.jsを始めたての私が早く知りたかった10のこと

最近フロントエンドの技術を学びたく、とりあえずVueから始めてみたのですが、**なんて便利なんだ！！**と個人的にはお気に入りです。

といっても他のフロントエンドの技術を学んでいないので生まれたての雛状態なんですが...。

そんなVueを学習中の私が、早めに知っておきたかったことを簡潔にまとめておきます。
詳細は公式ドキュメント等を参照してください。

# axios

- [GitHub](https://github.com/axios/axios)

- [Vue.js axiosを利用したAPIの使用](https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html) 

> Promise based HTTP client for the browser and node.js

と書かれているようにブラウザやNode.jsで利用できるPromiseベースのHTTPクライアントです。

```javascript
export default {
    methods: {
        getRequest() {
            axios.get('/myapi?param=value').then(response => {
                //レスポンス取得後の処理
            }).catch(error => {
                //エラー発生時の処理
            })
        },

        postRequest() {
            axios.post('/myapi', {param:value}).then(response => {
                //レスポンス取得後の処理
            }).catch(error => {
                //エラー発生時の処理
            })
        },
    }
}
```

Edge,IEだとPromiseのfinallyがサポートされていないのでローディング画面を作る場合には考慮が必要そうです。

# Vue Router

- [Vue Router](https://router.vuejs.org/ja/)

Vue.jsの公式のルータです。

ルーティングとコンポーネントを紐づけることにより、このルーティングの場合はこのコンポーネントを表示するといったことができます。

```javascript:app.js
const routes = [{
    path: "home",
    component: HomeComponent
},
    path: "app",
    component: AppComponent
}]

const router = new Router({
    mode: history,
    routes
})

const app = new Vue({
    el: "#app",
    router
})
```

```html:app.html
・・・
<div id="app">
    <router-link to="/home">Home</router-link> <!-- 押すとHomeComponentが表示される -->
    <router-link to="/app">App</router-link>   <!-- 押すとAppComponentが表示される -->
    <router-view />
</div>
・・・
```

ルートのネストやルートパラメータ、transitionの設定などできることが多いのでSPAを作るうえで非常に重宝しそうです。

# Vuex

- [Vuex](https://vuex.vuejs.org/ja/)

アプリケーションの状態管理を行うためのライブラリです。

```javascript
const store = Vuex.Store({
    state: {
        val: 0
    },

    getters: {
        doubleVal (state) {
            return 2 * state.val
        }
    },

    mutations: {
        setVal (state, payload) {
            state.val = payload.val
        }
    },

    actions: {
        setValAsync ({commit}, payload) {
            return axios.get('/myapi').then(response => {
                commit('setVal', response.data)
            }).catch(error => {
            
            })
        }
    }
})

const app = new Vue({
    el: "#app",
    store
})
```

**ステート**でアプリケーションの状態を保持します。
**ゲッター**でステートから別の値を算出します。
**ミューテーション**でステートを更新します。
**アクション**で非同期処理や外部APIとの通信を行います。必要に応じてミューテーションを使用してステートを更新します。

# vuex-router-sync

- [GitHub](https://github.com/vuejs/vuex-router-sync)

Vue Router のroute情報をVuexのステートとして状態管理することで、ゲッター、ミューテーション、アクションでもroute情報を参照できるようになります。

```javascript
sync(store, router)   //stateにroute情報を設定

//state.route.path, state.route.params, state.route.queryが参照できる
```

# vuex-persistedstate

- [GitHub](https://github.com/robinvdvleuten/vuex-persistedstate)

通常リロードをするとVuexのステートは初期状態に戻りますが、vuex-persistedstateを利用するとローカルストレージにステートが保存され、リロードをしてもリロード前の状態に戻してくれます。

```javascript
import createPersistedState from "vuex-persistedstate"

const vuex = new Vuex.Store({
    state: state,
    getters: getters,
    mutations: mutations,
    actions: actions,
    plugins: [createPersistedState()]     
})
```

# VeeValidate

- [VeeValidate](https://baianat.github.io/vee-validate/)

フォームのバリデーションを簡単に行うことができようになります。（ざっくり）
日本語用のメッセージも用意されていますが、自分でカスタムができます。
バリデーションも自分用に作成することができます。

```javascript
import VeeValidate, {Validator} from 'vee-validate'

const dictionary = {
    message: {
        required: (n) => n + 'は必須項目です',
        min: (n,e) => n + 'は' + e[0] + '文字以上で入力してください'
    }
}

Vue.use(VeeValidate)
Validator.localiza("jp", dictionary)
Validator.extend('password', {
    getMessage: 'パスワードは大文字、小文字、数字を混在した8文字以上で入力してください',
    validate (val) {
        let regex = new RegExp(/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{8,100}$/)
        return regex.test(val)
    }
})
```

```html
<input 
    type="text" 
    name="id" 
    v-validate="'required|min:4'"
    data-vv-as="ID">
<br>
<p>{{ errors.first("id") }}</p>

<input
    type="password"
    name="password"
    v-validate="`required|password'"
    data-vv-as="パスワード">
<br>
<p>{{ errors.first("password") }}</p>
```

判定順序はv-validateの記載順になり、errors.first(name属性)によって最初のエラーが取得できます。
エラーの項目名はデフォルトではname属性になっていますが、data-vv-asで変更することができます。

# Bootstrap Vue

- [Bootstrap Vue](https://bootstrap-vue.js.org/)

VueでBootstrapが使用できます。…ハイ。

コンポーネントもそれなりに用意されているのでデザインはある程度楽になるかもしれないです。

個人的にはコンポーネントの構築をしっかり学びたいので現在は使用していません。

# Vue Material

- [Vue Material](https://vuematerial.io/)

マテリアルデザイン用のコンポーネントが多数用意されています。

個人的にはBootstrapよりこちらが好みです。

# Buefy

- [Buefy](https://buefy.github.io/)

Bulmaをベースに作成されたコンポーネントが用意されています。

上記2つもそうなのですが、個人的には使うというよりコンポーネント構築の参考にしています。。

# Vue.js devtools

- [GitHub](https://github.com/vuejs/vue-devtools)

- [chrome ウェブストア](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

- [Firefox Add-ons](https://addons.mozilla.org/ja/firefox/addon/vue-js-devtools/)

ブラウザ上でコンポーネント、Vuex、イベント履歴を確認することができます。

Google Chrome、Firefoxのプラグインとして提供されています。

# おわりに

正直まだ始めたばかりなので試行錯誤な毎日です。
今回上げたものもまだまだちゃんと理解できていません。

とりあえず何か一つ形にできれば良いな。

Vueについておススメの情報があれば教えていただければ幸いです。