🌵

Vue.jsによるSPAアプリ開発

2022/03/19に公開約1,800字

目次

  1. SPAとは
  2. Vue.jsとは
  3. Vue.jsでSPAを実現する
  4. 実際のページで作ってみる

SPAとは

SPAとはSingle Page Aplicationの略で、単一のページ内でアプリケーションを完結させる設計構造。どういうことかと言うと、本来ならアプリケーションはいくつものhtmlファイルを行き来することで異なるコンテンツを表示している。
https://example.com/index.html ←ここではアプリのホーム
https://example.com/menu.html ←ここではメニュー表示
https://example.com/article.html ←ここでは記事を表示
このようにいくつものページを毎回作成することで内容の切り替えをおこなっている。
しかし、SPAを導入することで、全て
https://example.com の中で完結させることができる。
headerなどの共通の内容はそのままで、その中のホーム、メニュー、記事で異なる部分だけを一つのパーツとして切り分け、場合によって切り替えることができる。

SPAを使うと何が嬉しいのか

例えば、ユーザーがmenuボタンを押した時にそのアクションをサーバーが受け取り、それに伴うhtmlファイルを作成、ブラウザへそのhtmlファイルを返し表示と言う手順が本来の仕様になるが、このような仕様だと、ユーザーがアクションを行うたびにそのアクションがサーバーへ送られhtmlファイルを作成し直すことになってしまう。これだと、index.html, menu.html, article.htmlで共通の部分も毎回生成しなければならず、ページ遷移に時間がかかってしまう。それをSPAを導入することで、共通部分はそのままで、ページによって異なる部分だけを書き直してブラウザへ表示するので、ページ遷移時の時間が短縮される。他にも嬉しいことがいくつかあるが詳しくは他の記事を見てもらえると。

Vue.jsとは

Vue.jsとはJavascriptのフレームワークでMVCモデルのView部分だけに焦点を当てたシンプルなフロント開発用のフレームワークであり、MVVMフレームワークである。
これを用いることで以下のメリットがある。

  • SPAを実現することができる
  • リアクティブなwebページを作成できる(ユーザーの入力を即座にhtmlに反映できる)
  • コンポーネント化することができる
    基本的なHTML要素を拡張して再利用可能なコードのカプセル化をおこなうことができる。
<div>
	<h1>Header</h1>
	<p>menu</p>
	<p>article</p>
	<p>twitter</p>
</div>

このようなDOMがあるときに、これをコンポーネントとして切り分け、再利用を可能にできる。
再利用できるとは、一度このコードを書くと同じコードを書かずとも他の何度も使用できると言うことである。

MVVMモデルとは

MVVMはアプリケーションの役割を三つに分ける設計思想である。
ModelとViewとView Modelである。似たような設計思想にMVCモデルがあるがこれとも共通点がいくつかあるので、MVCモデルを知っている人はわかりやすいだろう。
MはMVCモデルでのMと同じ役割を持ちアプリケーション内でのデータ処理を行い、そこで生じるデータの変更を返す。
VもMVCモデルでのVと同様にMが返したデータをブラウザなどのインターフェイスに表示する役割を持っている。
最後にVMはMVCモデルでいうところのCに当たるが役割が少しだけ異なる。ユーザーから受け取ったデータはVMに送られ、データを受け取ったVMはそのデータをModelに処理を行うように命令したあと、VM内で変化したデータをViewに即時に反映させるのである。

Vue.jsでSPAを実現する

では実際にVue.jsにてSPAを実現するにはどうしたらいいんだろうか。
Vue Routerというプラグインを使用することで簡単にSPAのアプリケーションが実現可能である。
ルーティング制御によって表示したいコンテンツの場所に、<router-view>タグを記述することで可変的なコンポーネントを表示できる。

実際のページで作ってみる

Discussion

ログインするとコメントできます