本日は、参加するプロジェクトで利用する予定のVue.jsについて勉強をしました。
プログラミングスクールでは、主にRubyを学びましたが、Vue.jsについての理解は低く、JavaScriptが使いやすいくらいなのかなとの認識でした。
Vue.jsとは
- UI(ユーザーインターフェース)を構築するためのJavaScriptフレームワーク
- MVVMモデル型である
- SPA開発ができる
- 記述を少なく済ませることができる
こんな感じです。
Vue.jsのメリット
- 他のプログラミング言語と比べて学習コストが低い
- MMVVMモデル型のため、レスポンスが早い
- DOMを操作するコード量を減らすことができるため、開発スピードが早くなる
まだガイドを読み終えていないので、他にもたくさんあると思いますが、今日１日コードを打ったりガイドを読んでみた感じはこの辺りかなと思います。
実際にガイドで勉強しながら書いてみたコードが以下です。
HTMLファイルに作成するだけで動作します。
veu.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<title>Vue test</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
<div id= "watch-example">
<p>
yes/no で回答するので、質問をどうぞ！
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '', // デフォルトの質問は空白
answer: '質問受付中です^^' // 回答待ち中の質問
},
watch: {
// この関数は 質問が変わる毎に実行される。
question: function (newQuestion, oldQuestion) {
this.answer = 'あなたが入力しています。'
this.debouncedGetAnswer()
}
},
created: function (){
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
// _.debounce はコストの高い処理の実行を制御するためのlodash の関数
// この場合、yesno.wtf/apiへのアクセスすべきか制限するために、
// ユーザー入力が終わるのを待ち ajax リクエストを実行している。
},
methods: {
getAnswer: function () {
// もし質問の最後に?が入っていない場合の処理
if (this.question.indexOf('？') === -1) {
this.answer = '質問は最後に？を入れてください。'
return
}
// 最後に？が入っていた場合、処理に移行する
this.answer = '考え中です、お待ちください...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'APIにアクセスできませんでした' + error
})
}
}
})
</script>
</body>
</html>
質問を入れたら[Yes/No]で回答をしてくれる単純な作りですが、HTMLファイルのこの記述量で動作するのはすごいと思いました。
勉強してみた所感
Vue.jsのガイドを勉強してるだけでも、感覚的に操作ができるようになってきたので、楽しいと感じられるようになりました。
非同期コンポーネントの理解を深めていけば、実際の業務でも役に立ちそうな気がしてきたので、引き続き理解を深めていこうと思います。