質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • React.js

    828questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Vue.js

    689questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • AngularJS

    566questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Riot.js

    52questions

    Riot.jsは、React.jsに似たコンポーネント指向なJSフレームワークです。非常に軽量であり、コンポーネントで設計しやすいといったメリットがあります。また、MVCのように分割できることも特徴です。

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

受付中

回答 2

投稿

  • 評価
  • クリップ 3
  • VIEW 1,276

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

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

  • 商品一覧
  • 商品詳細

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

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

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

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

routerを使うと、

  • https://your.site/product#/list
  • https://your.site/product#/detail/112233

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    reactとangularjsの違いについて

    reactとangularjsについて、reactの方がトレンドで支持されている理由が解りません。 例えば、入力されたものを即時表示する場合、下記のようにangularは非常に短

  • 受付中

    Reactのコンポーネント間(親子関係ではない)の値の受け渡しについて

    Reactでのコンポーネント間(親子関係ではない)の値の受け渡しについて RectReact初心者です。公式のチュートリアルは一通りTypeScriptでやりました。React+

  • 解決済

    react-native

    前提(今のスキル) Swift 一年 JS            一年 質問 react-nativeを勉強しようとしているのですが、 オススメの学習サイ

  • 受付中

    React、AngularJS、Electronとは?

    前提・実現したいこと javascript,jQueryを勉強していますが、node.js, React, AngularJS, Electronなどというものがあると聞きました

  • 解決済

    【Riot.js】ルーター riot-routeでnot definedエラー

    絶対パス間違ってないんですが、route is not definedになります <!DOCTYPE html> <html> <head> <?php <scrip

  • 解決済

    Vue.js+vuexでのログイン処理の書き方

    Vue.js+vuexでログイン処理を書いているのですが、 ログイン処理の書き方に迷っています。 ログインでトークンを作成し、 API呼び出しの度にトークンを引き回して使用したいの

  • 受付中

    JQueryとReact

    Webのフロント言語は何を学べばよいでしょうか これからWebのフロント言語(Javascriptなど)を学ぼうとしている者です。 Webで調べたところ、よく見るような、テキス

  • 受付中

    これから始めるには「jQuery」か[React」か。

    今からjQueryの勉強を始めようと考えているのですが、 Reactの方が優れているとあったので、ここにきて、どちらにしようかと迷っています。 ご進言頂けると嬉しいです。よろし

同じタグがついた質問を見る

  • React.js

    828questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Vue.js

    689questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • AngularJS

    566questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Riot.js

    52questions

    Riot.jsは、React.jsに似たコンポーネント指向なJSフレームワークです。非常に軽量であり、コンポーネントで設計しやすいといったメリットがあります。また、MVCのように分割できることも特徴です。