えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック

Vue Routerについて勉強しました


リノバスの長谷川です。
今までは、RaspberryPiに関するブログを書いてきましたが、雑誌でvue.jsの記事を読み、現在、入力業務を主体としたWEBアプリケーションの開発及び保守を行っている関係もあり、入力がしやすく、使いやすいユーザーインターフェースができるかもしれないと思いvue.jsの勉強をしています。

入力業務を主体としたWEBアプリケーションのユーザーインターフェースの改善点として下記の点を考えています。

  1. 登録ボタンを押した段階でエラー表示をするのではなく、入力中または入力が済んだ段階でエラーがあれば速やかにエラー表示したい。
  2. 検索項目を選択して一覧を表示する場合、ページを再描画することなく描画域に表示したい。

上記を踏まえ、Vue.jsのページ遷移の仕組みであるVue Routerについて調べました。その備忘録となります。

Vue Routerとは、シングルページアプリケーション(SPA:Single Page Application)を構築するためのVue.jsの拡張ライブラリです。
シングルページアプリケーションとは、単一のWEBページを使用して、要素の内容のみを置き換えて画面遷移させるアプリケーション設計のことをいいます。ユーザの操作などに応じて画面の更新に必要なものだけを読み込み、素早く描画します。

通常のページ遷移

すべてを再描画します。

SPAのページ遷移

必要なものだけを取得し再描画します。

SPAのメリット/デメリット

下記URLを参考にSPAのメリット/デメリットについて記しました。詳細は、下記URLを参照してください。

SPAを採用するメリット

  1. 通常のWeb ページでは実現できないユーザー体験を実現できる。
  2. 高速なページ遷移を実現できる。
  3. ネイティブアプリの代わりとして提供することができる。

SPA を採用するデメリット

  1. 実装コストが大幅に増える。
  2. 初期ローディングにかかる時間が増える。
  3. 開発者が少ない。

*参考URL 「シングルページアプリケーション(SPA)の導入メリット&デメリット」
https://www.oro.com/ja/technology/001/

シンプルなSPAサンプルを作成しました。

その作成ため、Vue開発環境を簡単に構築する、「CodeSandbox」を使ってみました。
CodeSandboxの特徴は、

  1. フロントエンド用の開発環境をユーザー登録不要で簡単に構築できます。
    操作は、
  2. ・https://codesandbox.ioにアクセスします。
    ・右上の「Create Sandbox」をクリックします。
    ・使いたいフレームワークを選択(ここでは、プロジェクト「Vue」を選択)します。
    ・今回のSPAサンプルで必要なモジュールを追加します。
    メニューdependenciesでvue-routerを追加します。

  3. 作成したサンドボックスを共有したい場合は、サンドボックス上でコーディングしてURLを配布します。作成した「シンプルなSPAサンプル」は、下記CodeSandboxを参照願います。
  4. ビュー上部のHomeまたはProductをクリックすると再描画なしで、「Home」または「商品情報」の文字が切り替わります。
    https://codesandbox.io/s/n0k94n39vj

まとめ

CodeSandboxのsrc/views/product.vueの「商品情報」の部分を変更すると、変更と連動してビューの表示も変化します。(これは、vue.jsの特徴でデータバインディングといいます。)
データバインディング機能によって、入力時にエラーが発生した場合、エラー表示域にエラーメッセージを表示することができます。また、Vue Routerによって、描画したいものだけを部分的に差し替えて表示できるので、再描画のちらつきの改善、表示速度の向上などが期待できます。
今後も継続して勉強したいと思います。

えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック