こんにちは！エンジニアの井上です。
先日乾燥機能付きの洗濯機に買い替えてQOLを向上させました。
さて、前回の改善合宿での記事はご覧いただけましたか？
改善合宿では、Vue.jsを使った開発をしていたので、今回はその内容をまとめたいと思います！
実装！
仮組み
今回は簡単にVue.jsのバインディング機能を体感してみます。
適当にHTMLを組んで、VueはCDNからサクっともらってきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>GOD.</title>
</head>
<body>
<div id="app">
<dt><input type="text" /> <input type="button" value="Get answer" /></dt>
<dd>YES.</dd>
</div>
</body>
</html>
APIはhttps://yesno.wtf/を使います。ランダムでYes/Noを返してくれる謎のAPIです。。。
APIとajax通信するために、axiosを使います。これもCDNから持ってきちゃいましょう！
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>さあ、準備は整ったので、さっそく組み込んでいきす！
Vueで実装
Vueインスタンスを作成し、色々設定してあげるだけで動きます。
new Vue({
el: "#app",
data: {
question: "",
answer: null
},
methods: {
getAnswer: function () {
var self = this;
axios.get('https://yesno.wtf/api').then(function (response) {
self.answer = response.data;
});
}
}
});el: はVueインスタンスをマウントする対象のDOMです。
今回の場合は#appなので、<div id=”app”>が対象になりますね。
data: はVueオブジェクトが保持し、HTMLにバインドするデータを格納します。
そして、HTMLを下記のように書き換えました。
<div id="app">
<dt><input type="text" v-model="question" /> <input type="button" value="Get answer" v-on:click="getAnswer"/></dt>
<dd v-if="answer">{{ answer.answer }}</dd>
<img v-if="answer" v-bind:src="answer.image" />
</div>何をどこに表示、といったシンプルな事柄に集中できていますね。
v-bindでHTMLの属性値にvueが保持しているdataが勝手にバインドされます。
入力値をdataにバインドする場合はv-modelを使います。
「Get Answer」と書かれたボタンにはv-on:clickでgetAnswer()が呼ばれるようになっており、getAnswerでaxiosでAPIにリクエストを送るようになっています。
getAnswer()ではデータを格納する以外のことは何もしていないのですが、データが書き換われば画面が勝手に再描画されます。素晴らしい！
jqueryでDOMを頑張っていじる時代は、だいぶ前に終わったようです。
まとめ
今回はnpmなどを使わずにさっくりと作ってみましたが、NuxtJSなどを利用するとより運用しやすいアプリを作ることができます。
Vueはルーティング機能なども兼ね備えている強力なライブラリですが、フレームワークとして基礎部分からガッツリ採用したり、プロダクトの一部分として採用したりと「柔軟さ」がウリだったりします。
実は私、どちらかといえばサーバーサイド専門なのですが、学習していて楽しいのはフロントエンドですね。やはり動くものが見えやすいのは楽しいですね！
コメント