Vue のページの考え方

Vue のページの考え方

Vue の公式チュートリアルの例では、作成したのは基本的に「１ページ」の Web アプリでした。この記事では、Vue フレームワークの「ページ」の考え方について紹介します。

基本は「１ページ」！

Vue フレームワークを利用した場合は、Web アプリのページは基本的に「１ページ」になります。 公式チュートリアルでは、「メインのページ （App.vue)」から「部品（ChildComp.vue）」を呼び出すような例も学習したと思いますが、これも基本的には「１ページ」のアプリです。「部品（ChildComp.vue）」も、メインのページの一部として表示されているからです。

理由は簡単で、Vue のフレームワークがやっていることは、元になるページに作成した「Vue」の「部品」を Vue が埋め込んで表示をしているからです。Vue では「メインのページ（App.vue）」も、「部品（ChildComp.vue）」も「Vue の部品」として扱われています。したがって、npmなどのパッケージ管理アプリを使って Vue のアプリを開発する場合は、「index.html」というファイルが元になるページで、Vue はこのページに表示を埋め込む仕事をしているだけです。

これが、 Vue や React などフロントエンドのフレームワークを利用して開発した Web アプリが「１ページアプリ」と呼ばれている理由でもあります。

複数のページを扱うには？

では、Vue のフレームワークを利用して複数のページを持った Web アプリは作れないのかという疑問が出てくると思います。 結論から言うと、複数のページを持ったアプリを Vue を使って開発する事は可能です。

コンセプトは同じで、同じ「index.html」に、別のページの「部品」を埋め込んで表示するようにすれば良い事になります。 結果的には、「index.html」と言う一つのページを表示しているのですが、埋め込む情報を全く別の「部品」を埋め込むことで、見かけ上は「別のページのように見せる」と言う方法で実現することが可能です。

この連載では、この複数のページを Vue で扱う方法について何回かに分けて考えていきます。

Javascript のプログラムで変える

まず、この記事では一番シンプルな方法として、Vue の公式チュートリアルのステップ６で学習した、条件によって表示を変えるという方法を利用したやり方を紹介します。

まずは、各ページの「部品」を作ります。この例では、とりあえず２ページ分の「部品」を作ります。

(Page1.vue)

<template>

  <h1>ページ１</h1>

</template>

と

(Page2.vue)

<template>

  <h1>ページ２</h1>

</template>

の二つのページを作ります。

これまでのやり方でこの両方を表示するには、メインのページの記述は以下のようになります。

<script>

import Page1 from "./Page1.vue";

import Page2 from "./Page2.vue";

export default {

  components: {

    Page1,

    Page2,

  },

};

</script>

<template>

  <Page1 />

  <Page2 />

</template>

しかし、この記述では、両方のページが表示されてしまいます。

そこでボタンを使った簡単なメニューを作成して実際に表示するページを選択できるようにします。

<script>

import Page1 from "./Page1.vue";

import Page2 from "./Page2.vue";

export default {

  components: {

    Page1,

    Page2,

  },

  data() {

    return {

      page: "page1",

    };

  },

};

</script>

<template>

  <button ＠click="page = 'page1'">Page1</button>

  <button ＠click="page = 'page2'">Page2</button>

  <Page1 v-if="page == 'page1'" />

  <Page2 v-if="page == 'page2'" />

</template>

表示するページ名を「page」と言う変数で決めるようにして、「Page1.vue」の部品と、「Page2.vue」の部品の表示を切り替えています。 このような要領で、表示する「ページ」を切り替える事ができます。

制限事項は？

この方法で、「見かけ上」は、ページを切り替えて表示する事が可能になります。 しかし、一つ問題点もあります。既にお気づきの方もいらっしゃると思いますが、このやり方で表示されるのは、「index.html」という HTML の「一つのページ」が表示されていると言う事です。

したがって、Web ブラウザで URL を指定してページを表示する事はできません。 そういう意味では、ページ毎の完全な表示という方法ではありません。

しかし実用上は、この方法でも複数のページを表示する事が可能です。ページ毎の指定を URL ではできないというだけです。

まとめ

この記事では、Vue のフレームワークでページ毎の表示をする一つのやり方を紹介してみました。上で説明した通り、URL を Web ブラウザで直接指定する事はできませんが、とりあえずページ毎の表示はできます。

実際は、Vue には、「Vue Router」という、ページ毎に表示するための仕組みが用意されています。この仕組みを利用すれば、Web ブラウザで URL を指定してページを表示する事も可能です。次回の投稿では Vue Router を利用した表示の方法を紹介します。 予定では、2022 年 3 月 30 日にお届けします。お楽しみに！