KVue.jsでシングルページアプリケーションを作る

1. Vue.jsで、クリックに応じて表示するコンテンツを動的に切り替える

シングルページアプリケーション、略してSPA。
ページ遷移なし、ページリロードなしで、クリックやスクロールアクションでページ内のコンテンツが動的に切り替わるWebページのことを言います。
Webページって流れが重要で、たとえばページ中段にあるボタンをクリックしたら、流れを止めずにそこのコンテンツだけが切り替わってほしいですよね。そこでページ遷移して遷移先ページの一番上が表示される、なんてナンセンスです。ユーザー体験（UX）的にはNG。
そこで、ソリューションのひとつとしてシングルページアプリケーションがあります。

今回はそのシングルページアプリケーションを、Vue.js というJavascriptフレームワークを利用して作ってみようと思います。
Vue.jsと同じようなJavascriptフレームワークは実はほかにもたくさんあって、2020年現在有名なのは React と Angular でしょうか。中でも一番人気があるのはReactです。
ただ、今回は Vue.js でいこうと思います。
他のJavascriptフレームワークに比べて学習コストが比較的少なく、非エンジニアの人にとっては、とっつきやすいフレームワークだからです。
　
ということで、さっそくやってみましょう。
　
まずこんなhtmlを書きます。（headタグとかは省略してます）

<main id="app">
<div v-if="center" key="center">
<p>最初の画面</p>
<div v-on:click="watchLeft">左の画面にいく</div>
<div v-on:click="watchRight">右の画面にいく</div>
</div>

<div v-if="left" key="left">
<p>左の画面</p>
<div v-on:click="watchCenter">最初の画面に戻る</div>
<div v-on:click="watchRight">右の画面にいく</div>
</div>

<div v-if="right" key="right">
<p>右の画面</p>
<div v-on:click="watchCenter">最初の画面に戻る</div>
<div v-on:click="watchLeft">左の画面にいく</div>
</div>
</main>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        center: true,
        left: false,
        right: false,
      };
    },
    methods: {
      watchCenter: function () {
        this.center = true;
        this.left = false;
        this.right = false;
      },
      watchLeft: function () {
        this.center = false;
        this.left = true;
        this.right = false;
      },
      watchRight: function () {
        this.center = false;
        this.left = false;
        this.right = true;
      },
    }
  });
</script>

このhtmlファイルをブラウザで開いてみると、画面遷移することなく最初の画面から左右の画面に表示内容が切り替わるのがわかります。

これがシングルページアプリケーションです。
　
動きは分かったところで、次回は少しこのコードの中身に踏み込んでいきつつ、画面切り替え時にエフェクトを加えてみようと思います。