Vue.js使ってみた

こんにちは!エンジニアの井上です。
先日乾燥機能付きの洗濯機に買い替えて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はルーティング機能なども兼ね備えている強力なライブラリですが、フレームワークとして基礎部分からガッツリ採用したり、プロダクトの一部分として採用したりと「柔軟さ」がウリだったりします。

実は私、どちらかといえばサーバーサイド専門なのですが、学習していて楽しいのはフロントエンドですね。やはり動くものが見えやすいのは楽しいですね!

関連記事

プロジェクトストーリー

おすすめ記事

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP