最近フロントエンドの技術を学びたく、とりあえずVueから始めてみたのですが、なんて便利なんだ！！と個人的にはお気に入りです。
といっても他のフロントエンドの技術を学んでいないので生まれたての雛状態なんですが...。
そんなVueを学習中の私が、早めに知っておきたかったことを簡潔にまとめておきます。
詳細は公式ドキュメント等を参照してください。
axios
Promise based HTTP client for the browser and node.js
と書かれているようにブラウザやNode.jsで利用できるPromiseベースのHTTPクライアントです。
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.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
})
・・・
<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
アプリケーションの状態管理を行うためのライブラリです。
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
Vue Router のroute情報をVuexのステートとして状態管理することで、ゲッター、ミューテーション、アクションでもroute情報を参照できるようになります。
sync(store, router) //stateにroute情報を設定
//state.route.path, state.route.params, state.route.queryが参照できる
vuex-persistedstate
通常リロードをするとVuexのステートは初期状態に戻りますが、vuex-persistedstateを利用するとローカルストレージにステートが保存され、リロードをしてもリロード前の状態に戻してくれます。
import createPersistedState from "vuex-persistedstate"
const vuex = new Vuex.Store({
state: state,
getters: getters,
mutations: mutations,
actions: actions,
plugins: [createPersistedState()]
})
VeeValidate
フォームのバリデーションを簡単に行うことができようになります。（ざっくり）
日本語用のメッセージも用意されていますが、自分でカスタムができます。
バリデーションも自分用に作成することができます。
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)
}
})
<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
VueでBootstrapが使用できます。…ハイ。
コンポーネントもそれなりに用意されているのでデザインはある程度楽になるかもしれないです。
個人的にはコンポーネントの構築をしっかり学びたいので現在は使用していません。
Vue Material
マテリアルデザイン用のコンポーネントが多数用意されています。
個人的にはBootstrapよりこちらが好みです。
Buefy
Bulmaをベースに作成されたコンポーネントが用意されています。
上記2つもそうなのですが、個人的には使うというよりコンポーネント構築の参考にしています。。
Vue.js devtools
ブラウザ上でコンポーネント、Vuex、イベント履歴を確認することができます。
Google Chrome、Firefoxのプラグインとして提供されています。
おわりに
正直まだ始めたばかりなので試行錯誤な毎日です。
今回上げたものもまだまだちゃんと理解できていません。
とりあえず何か一つ形にできれば良いな。
Vueについておススメの情報があれば教えていただければ幸いです。