Logo
Search|
Published on

SPAウェブフロントエンド開発ためのまとめ

Authors
  • avatar
    Name
    Easyoon
    Twitter

[VUE]SPAウェブフロントエンド開発ためのまとめ

JavaScript,Web,Vue.js,フロントエンド,Vuex

・出典：[VUE]SPAウェブフロントエンド開発ためのまとめ

目標

本ポスティングではSPASingle Page Application開発に先立ってSPAについての理解およびJavaScriptのフレームワーク「Vue」に対する基本的な理解を目指したいと思います。MPAウェブサービスやMVCパターンに対する基本的な理解を元に作成することになりました。

目次

  1. JavaScript Frameworkの使用背景

  2. MPAからSPAまで

  3. SPAルーティングに対して ①Link方式 ②Ajax方式 ③Hash方式

  4. JavaScript Frameworkの主な活用の要素

  5. VUE

  6. 主要ライブラリ ①VUE Router ②VUE CLI ③Vuex (1)Stateとは (2)State管理の必要性 (3)構成要素 (4)State、Getters、Actions、Mutaitions (5)レンダリングパフォーマンスについて

  7. まとめ

1. JavaScript Frameworkの使用背景

JavaScriptのフレームワークが登場する前には、vanilla JSやjQuery*1をフロントロジックで活用して具現しました。JavaScriptフレームワークはフロントエンドの開発が複雑化によって登場することになりました。

JavaScriptフレームワークを活用すると、SPA(Single Page Application)*2など高級ウェブアプリケーションを開発するのにもっと容易します。

*1 jQuery：簡単にDOMを操作するためのライブラリ *2SPA：単一ページのアプリケーション(Single Page Application)の形でウェブを開発することを意味、詳しい内容は2番を参考

2. MPAからSPAまで

既存のMPA(multiple-page application)ウェブサービスは、クライアントのリクエストrequestがある際ごとにサーバからリソースresourceとデータを受け取って、画面に新たにレンダリングrenderingをするやり方でありました。 リンクをクリックすると、該当ページに移動することになり、明示されている資源をサーバーに要請して回答を受けてきます。 このように、MPA方式は各ページごとにサーバ側でhtml文書を要請するために重複されるデータを受け取るしかありませんでした。

一方、SPAウェブサービスは、上記のような既存のウェブサービスの限界を補完します。 最初のロード時、全体ページをロードした後からは、既存のページと比較して更新が必要な特定の部分だけをjsonの形でデータを持ってきてバインディングbindingします。 したがって、SPA方式はAjax(3番参照)にデータを持って来てから必要な部分だけ更新するようにJavascriptを作成します。

3. SPAルーティングに対して

***ルーティング(Routing)とは。 **データを送ることが最適の経路を選択する過程で、与えられたデータを最適化された形でやり取りできる経路を選択する過程です。

①リンク方式(伝統的方式)

リンク方式は下記の過程を含んでいます。

(1) link tagのクリック (2) URLのpathにhref属性attribute値であるリソースの経路が追加 (3) ブラウザのアドレスバーにpath値を表示 (4) 該当リソースをサーバに要請

クライアント側で(1)~(4)を経ることになると、サーバ側からでは完全なリソースをhtmlの形で回答します。 また、ブラウザ側ではこのhtmlを受けてレンダリングします。 前のページから新たに受けたページまで転換するやり方は、全体のページを再びレンダリングする方式であります。それで、リロードreloadが発生してヒストリーhistoryが残り、前のページに戻ることができます。 この時、クライアントのリクエストごとに重複されたHTMLとJavaScript、CSSについてももらってこなければならないので、パフォーマンスにあって損害がある可能性があります。

出典:ASP.NET–Single-Page Applications / 伝統的なページ寿命周期

②AJAX方式

これを補完するため、JavaScriptで非同期Asynchronousにサーバとブラウザがデータを交換できる通信方式を活用することになり、この通信方式をAJAXAsynchronous JavaScript and XMLと言います。

ページでアップデートが必要な部分だけをロードした後に更新して、リロードしなく不必要なリソースの重複要請を防ぐするので、パフォーマンスにあってもっと優れています。データ部分が空白であるhtmlをサーバーから受け取って、ページロード時JavaScriptでデータを持ってきて満たして入れます。

出典:ASP.NET–Single-Page Applications /SPA寿命周期

この時、AJAXはURLを変更させないので、アドレスバーの住所が変更されません。 これはブラウザの履歴historyを管理することができないし、前のぺーじでもどることもできないことを意味します。 (このほかにもSEOに対してもよくないです。)

③HASH方式

上のAJAXを補完するため、登場したクライアントルーティング方法がHashです。

Hash方式は、Anchor Tagを使う方式で、link tagのhref属性にhash(#)を使用します。 クリックする際に文書で#の後に付けているidを持った要素に移動します。

同一のURLでHashが変更された場合 ブラウザ側ではこれをURLが変わったものと認識するが、実際にクライアント側でサーバ側にリクエストを送ったりはしません。 Anchorでウェブページの内部での移動を向けたものだからです。要請をしないため、ページの更新はありませんが、ページがそれぞれの固有のURLを持つので、ヒストリーhistoryを管理することができます。

上記の3つの方式のほか、PJAX(html5 pushState+ajax)もあります。

4.Javascript Frameworkからの主な活用点

  • ルーティング :公式的なルーティングライブラリが提供されています。

  • テンプレート :レンダリングされたDOMの上に基本インスタンスのデータを宣言的にバインディングがすることができるHTML基盤テンプレート言語を使えます。 (この部分はdJangoとも似ていたと思います）

  • コンポーネントの再利用 WebコンポーネントはWebページとWebアプリケーションの間でカプセル化された再使用ができるHTMLタグを生成することができます。

5.VUE

仮想DOMを活用できるし、DOMを使って全ての要素をリアルタイムでの反応型コンポーネントで製作することができるJavascriptフレームワークです。 通常、プロジェクトの規模が大きくなるほど、様々な形のコンポーネントが生成されるために、これを管理するのに役立つルーティング管理およびグローバル状態を管理するライブラリなどを提供します。

6.主要ライブラリ

①VUE Router

Vueを利用してSPAウェブを構築する際には、ルーティング制御を向けた公式プラグインです。

  • VueRouterを利用してURL・ヒストリーを管理することができます。

  • ブラウザで뒤로 가기及び앞으로 가기動作をできるようにしており、これは使用性を向上させることができます。

[ルーティングを定義する形式]

    //views/Home.vue(テンプレートの構成要素)
    <template>
      <div class="home">
        <h1>Home</h1>
      </div>
    </template>

    //src/router.js(ルーティング定義)import  Vue  from  ' vue ' 
    
    import  Router  from  ' vue-router ' 
    import  Home  from  ' ./views/ '
    Vue . use ( Router )
    export  default  new  Router ({ 
      mode :  ' history ' , 
      routes :  [ 
        { 
          p: '/', 
          name: 'home', 
          component: Home
        } 
      ] 
    })

以後、リンクと定義する際には、テンプレートの下記のような構文を挿入して使用することができます。

    <router-link to="/">Home</router-link>

②VUE CLICommand Line Interface

Vue-cliにコマンドを実行すると、cliが自動的に最適化された、プロジェクトの基本骨格を生成します。 だけでなく、下記の設定が可能です。

  • Vueプロジェクト生成

  • Vueライブラリ管理

  • Vueの配布ファイルの設定:最適化されたWebpack*1形の結果物を生成します。

  • Vue GUI提供

*1Webpack:JS、CSS、イメージを一つのJSファイルで縛りつけられるモジュールです。 開発者が作成したJSとプロジェクト内の必要なライブラリをロードするJS、作成したCSSファイルとイメージファイルまで整理することができます。 イメージファイルの場合、DataURI(Base64形式)に変換してJSファイルに整理します。

*dJangoでプロジェクトを生成して、ライブラリを管理して、配布時に静的ファイル管理を提供したものと類似した感じ

③Vuex

Vueコンポーネントで活用することがデータを管理することを目的とする、ステートState管理ライブラリです。

1)Stateとは

*公式文書でstateデータ管理を状態のパターンに翻訳をしておいて、多くの部分がこんがらがったところ(デザインパターン中にステートパターンを融合させたと)で、mutationも各翻訳によって言葉が異なりました。開発をある程度進行した後、もっと確実に定義することができました。

すべてのクライアント側のコンポーネントで共通的に使えるように選び出したクライアント用データです。 一般的にクライアント側にデータを渡すためには、サーバーからデータを受け取ってこなければならないという煩わしさがあります。 Stateを使う場合、サーバから最初持ってきたデータをStateに保管します。 以降、必要な部分に対するデータだけ取り出して使うことになります。

2)State管理の必要性

MVCパターンの複雑なデータフロー問題は、大規模なアプリケーション開発の際MVCパターンで発生する構造的間違いを引き起こします。 複雑な画面とデータの構成が必要したときControllerに多数のModelとViewが縺れてからです。 したがって、既存のMVC間の依存性を除去することが難しくなって、これは機能追加やアップデート時に起きる問題点を解決する複雑にします。

Vuexは、コンポーネント間のデータ伝達をView、Action、Stateに明示的に表現して、よりデータの流れを単純に維持します。

**3)**構成要素

Vuex構成要素は View, Actions, Stateになります。

[例示]

出典:https://vuex.vuejs.org/(vuex公式文書)

(1)ユーザが View(Template)でボタンをクリック (2)Actions(Method)でメソッド呼び出して動作 (3)Actions実行してからState(data)を変更

Viewは、クライアントの方に表示されるTemplateを意味します。 クライアント側でViewを通じてデータ保存などの動作を要請すると、要請によってActionsではバックエンド側と要請や応答を交換するようになります。

Stateの場合、クライアントの操作に必要なデータを共有します。Actionsを通じてバックエンドAPIを呼び出して要請に即したデータをもらって来たら、コンポーネント間で当該データをすべて共有できるようにStateに保存します。

各コンポーネントではStateにプロジェクトで共通に共有するデータを保存しておくことができ、最初の保存だけでどのコンポーネントでも当該データを照会することも、修正することもできます。

(4)State、Getters、Actions、Mutations

  • State すべてのコンポーネントで同一のデータを使用できるように共通的な変数を宣言します。

  • Getters コンポーネント内でStateに特定処理を進めた後、コンポーネントにバインディングする場合、Gettersに該当ロジックを定義した後、各コンポーネントで呼び出すことができます。 （例）Stateに含まれるすべてのデータのうち、特定のデータだけを持ってくる場合

  • Actions 回答を受け取ってくる部分のタームが一定しない場合などの大気が必要でない非同期ロジックが入っている処理を作成します。

  • Mutations Stateに存在する変更するロジックを作成し、Stateの値を変更させることはMutations中でのみ変更されなければなりません。

  • しかし、開発者がMutation乙直接呼び出す場合はなく、Stateを変更するcommit背中のメソッドを使用するなどの方法で間接的に使用することになります。

  • Mutationの場合、各コンポーネントでStateを変更した履歴を確認することができます。 各変更件について一つ一つ同期的に処理し、全ての履歴を残すので、お互いに違うコンポーネントでStateを変更しても衝突がありません。

(5)レンダリングパフォーマンスについて

Vueのgettersの場合、使用するたびに、毎回演算処理が入っている方式であるため、多くの量のデータを処理する場合には性能が急激に低下する現象がありました。 コンポーネントから呼び出すデータの数(row基準)が3000件ほどになる時、普段、秒当たり60フレームの性能を見せてくれましたが、たくさんの量のデータを毎回gettersから読んでくると、毎秒2フレームになって最後にはブラウザーが止まってしまいました。

フレームの低下現象が持続される区間

このような現象を改善するため、一番目にはstateに読んでくることをなくして、サーバー側のapiを利用して必要な部分だけを直接読んでくる形で作成しました。stateを通じず、サーバーから直接持ってくるのでサーバー側と連動に間する時間だけかかり、コンポーネントをレンダリングするのは、多くの時間がかかりませんでした。

二番目には、該当コンポーネントにページネーションを追加をしました。 最初のデータはすべて読んできた後、クライアント側でページングを処理する形だったためにフレームの低下には大きな役に満たなかったが、ブラウザーが実行中断になってしまう現象が消えました。

同じページを二回呼んだときの現象。確かに以前よりフレームの低下区間が短くなったし、落ちる幅も減少した

7.まとめ

VUEはSPA開発向けのJavascriptフレームワークの一つであります。

  • SPA SPAウェブは、最初のロード時、全体ページをロードした後からは、既存のページと比較して更新が必要な部分だけをjsonの形でデータを持ってきてバインディングbindingします。

  • Vue.jsでウェブを開発する際には、プロジェクトの構築及びその他の作業に役に立つVue-Cli、ルーティングを担当するVue Router、コンポーネント間のState管理を担当するVuexを使います。

  • Routing SPAウェブの使用性限界を補完するためには、ルーティングに関するライブラリを利用してヒストリーを管理する必要があります。

  • State管理 各コンポーネントではStateにプロジェクトで共通に共有するデータを保存しておくことができ、最初の保存だけでどのコンポーネントでも当該データを照会することも、修正することもできます。

Discuss on Twitter • View on GitHub