Vue,Angular, Riot, React,などで、画面の一部を書き換える際の考え方について。

フロントエンドフレームワークを学び始めたばかりの者です。
上記のようなフレームワークを使ってSPAを構築する場合の画面更新の考え方について悩んでいます。
ちなみに、実際に使っているフレームワークはVueなのですが、設計の話なのでどんなフレームワークにも共通すると思い、その他のフレームワークも挙げさせていただいております。

悩んでいるのは、画面の一部を書き換えるようなアクションを行う場合、routerでやるべきか、vuex（その他のフレームワークならflux reduxなど？）でやるべきか、ということです。

私の考えとしては、
画面全体が変わるような場合（例えばトップ画面がから設定画面に移動、画面要素は全部変更）はrouterで画面更新を行う、
画面の一部が変わるような場合（例えば３カラムレイアウトのWebページとして、何かの操作に伴って一番右のカラムのコンテンツが入れ替わる）は、flux（vuex)で画面更新を行う
というような形で良いのかな、とぼんやり思っています。

皆様の設計でこんな風にしたよ、というのがあったら参考にさせていただけないでしょうか？
初心者なので、かなり基本的なことかもしれませんが、ご教授いただけると幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

vuexは状態管理をするもののようですので、vuex vs routerという構図には違和感を覚えますが、それは置いておいてURL構造をどうしたいかじゃないでしょうか。

例えばECサイトのようなもので、

商品一覧
商品詳細

という２つのViewがあるとします。

SPAなのでガッツリ画面遷移せずに、

画面の左半分は商品一覧
画面の右半分は選んだ商品詳細が表示される

として、右半分が部分書き換えされて商品詳細の内容がパラパラ変わるようなものだとしましょう。

routerを使うと、

というように、商品112233を選択済みで詳細が表示された状態で表示するURLを作ることが出来ます。
メールや、SNSなどに商品詳細へのダイレクトリンクを貼ることができるというメリットがあります。

投稿2017/07/20 14:30

NewGyu

総合スコア19

Vue.jsには詳しくありませんが回答致します。

SPAの基本概念は簡単に言えば一つの画面のみで全ての機能を完結させるということかと思います。
ですので基本概念に忠実であれば、「トップ画面」が表示されたらその後画面遷移は行いません。（なので「トップ画面」という表し方すら微妙です）
画面の更新はどうするのかということになりますが、SPA登場前であれば画面の更新とは文字通りもう１度画面を呼び出して処理していたのですが、その代わりにボタン等のアクションを実施すると非同期通信により随時画面が書き換わるような実装をします。
上記のような実装をすると画面自体は一つしか存在せず、画面の読み込みも初回のみとなるため、シングルページアプリケーションと呼ばれる所以になっています。

恐らくですが、「画面全体が変わるような場合」というのはＷＥＢページのリンクのようなことを想定されていて、「画面の一部が変わるような場合」というのは非同期通信を想定されているのではないでしょうか。

私のメイン開発言語はAngularJSですが、ほぼ「画面の一部が変わるような場合」の処理のみで実装をしています。（ある意味基本概念に忠実）
「画面全体が変わるような場合」は別途UIのためのフレームワークであるOnsenUIを利用しており、そのフレームワークで提供されているページスタックによる画面遷移機能を利用させて頂いています。（ons-navigator）

いずれにせよ、「画面の一部が変わるような場合」がSPAとしては通常、「画面全体が変わるような場合」はSPAとしては基本概念からは少し外れているという認識を持たれた上で、実現できる機能やプラグインを選択されれば良いかと思います。
（今回のご質問内容からはvue-routerとvuexを共存させるという判断をされた経緯等が読み取れませんでしたが、そもそも２点の共存自体は難しいことのような情報もありましたので、その辺の背景もご記載頂けると助かります）

投稿2017/02/28 09:33