-
ID:3LGMnV さんの質問

javascriptのアプリケーションって画面遷移させる時のデータの受け渡しってどうやるのでしょうか？

URL変わってしまうと遷移先のコントローラーの公開プロパティーに値を書き込んでも消えてしまいますよね？

ページ読み込みが起きないようにハッシュでURLを変えて、ハッシュの変化などでイベントを発火させて、画面を同じHTML内で切り替えるのでしょうか？

もしくは、毎回、別画面に遷移する時は一旦、web storageに受け渡したいデータを保存しておいて、画面遷移後にクッキーから保存しておいたデータを取り出して使うのでしょうか？

みんなの回答 3 件

ID:SpS19U さんの回答

今どきアプリケーションを名乗るのであれば第一にSPAにすることを考えてください。
次点としてSessionStorageを使います。
その他は駄策です。
ID:3LGMnV

SPAというのは、私が書いた前者の対策で画面遷移を行うものでしょうか？同一ページ内に全てのHTMLを入れておいて。ハッシュの変化などのイベントで表示されるビューを切り替えるみたいな。web storageを使う方はページ読み込みが発生する従来のページ移動を行いデータの受け渡しをするものですよね？

ID:ocHerr さんの回答

pushstateで擬似遷移という手も
ID:3LGMnV

ヒストリーをサポートしてくれるやつでしたよね？上の方が言ってるのは、pushstateでシングルページでの画面遷移を実現させようということなのでしょうか？

ID:3LGMnV さんの回答

追加質問です。

javascriptでアプリケーションを作る場合、一つのページに必要となる画面のHTMLを全て入れて、イベント発生を機に必要な部分のビューを表示、非表示切り替えを行うのが主流なのでしょうか？（また必要に応じてajaxでサーバー上のデータを読み込みビューに流し込む）

URLは!#でハッシュだけ切り替えて、ユーザーにページが変わったことをわかりやすく伝え、ヒストリーはpushstateで管理するという感じで、jsでのアプリケーションは作ればオッケーでしょうか？
ID:3LGMnV

あ、#!の間違いです。

ID:SpS19U

URLもpushstateで変更できます。ですから、ハッシュではなくURLを変更します。
ただし、「一つのページに必要となる画面のHTMLを全て入れ」という考え方はちょっと違います。
必要になった時に、通信で必要なデータを取って来て画面を更新するのです。

それも、もしhtmlページ単位で取ってきて、共通変数を用意して全てを更新するだけなら、SPAはSPAですが、SessionStorageやCookieを使うのと変わりありません。

本当のSPAというのは、もっと根本的な設計から見直して、
サーバは表示するページHTMLを返させるのではなく、最低限必要なデータをJSONなりではくAPIサーバにしておいて、
部分的に表示を変えながら、あくまでずっと1ページとして機能するものです。

まったく違う作りのページを沢山切り替える必要があるような作りには、あまり向いていません。
その場合は、そのまったく違う作りのコンテンツ群1つ1つをSPAにすることを考えるといいでしょう。
SPAだからといって、本当にサイトを丸ごと1ページにしようとするのは、少し違います。
基本的に、本当に繋がりのある、パラメータだけではなく、画面の一部も共有させておきたい場合に使うのがいいのです。

ID:yYfTRM

詳細なご説明ありがとうございます！！

ID:yYfTRM

「まったく違う作りのページを沢山切り替える必要があるような作りには、あまり向いていません。その場合は、そのまったく違う作りのコンテンツ群1つ1つをSPAにすることを考えるといいでしょう。」

例えば、このw3qというサイトの場合ですと、一覧ページと個別ページ、また、質問投稿ページとレイアウトが比較的大きく変わる画面がありますが、こういった画面それぞれに対して、SPAを用意してあげるということでしょうか？（ちょっとしたレイアウトが違う程度の場合は、同一ページに部分的なHTMLを用意しておいて切り替えるのですよね？）

仮にこれらの3画面をSPAにするとした場合、質問投稿をした後にその投稿データを一覧ページと個別ページが表示される前段階で渡してあげないといけないと思うのですが、そういう場合はweb storageを通して渡す事になるのでしょうか？

もしくは、異なる画面（SPA）にページを切り替える時であれば、ページが表示されるタイミングでウェブ上のrest apiからデータを取得してページ上に最新の情報を表示させてあげるという流れになるのでしょうか？

ID:yYfTRM

>URLもpushstateで変更できます

URLが変わる = HTTPリクエストが発生するという訳ではないのですね。

ID:SpS19U

そこまでやる必要があるかは置いておいて、w3qのような場合でも、Twitterのように、
一覧中クリックや新規質問をポップアップなんかにすることで、1つのページに収めることは可能です。

SPAでは、変化しうる全てのレイアウトや機能が最初から入ったページから、（URLの変化に応じて）必要な情報だけを通信で取ってくるのが基本ですから、
そもそもあまり行き来しない機能や、大幅に構成の違う機能を1つにまとめたり、複数のタブで個別ページがよく開かれるようなコンテンツに対しては、効率が悪いです。
そこら辺をコンテンツとSPAの実現方法両面からどう調整していくのがいいのかは、そのサイト毎に違ってくると思います。

ID:3LGMnV

コメントありがとうございます！普段はiosのアプリ開発をしているのですが、jsでのアプリケーション開発の考え方がなんとなく理解出来ました。タブで画面が変わるような画面は前のコメ主さんが言うようにそれぞれspaが必要で、ポップアップやページのドリルダウン先ページは同じspaで管理するといった感じでしょうか。ポップアップでコメント投稿画面を表示というのは確かになるほどですね！モバイルアプリ開発の時なら普通にやってることでした。

最終更新日:2014-09-10 (9,205 views)

関連するトピックス

ページ上部に戻る