Q&A
＞上記の参考にしたサイトでは毎回新しいhtmlを読み込んでいるようには見えません。
サイドメニューやヘッダーのとこが完全に同じレイアウトだと、全く変わったと感じることなくページ遷移しますよ。
##やりたいこと
現在サイドメニューがあるWEBページを製作しております。
そこで、以下のサイトのようにサイドメニューの状態を保持したまま、メインの部分の画面遷移を行いたいと考えております。
https://help.apple.com/keynote/mac/6.6/?lang=ja#/
##わからないこと
上記のようなサイトを作成する場合、どういった技術を使用するのがベストプラクティスなんでしょうか？
##やったこと
①HTML・CSSを使って全てのページにサイドメニューを固定表示
⇒ 上記の参考にしたサイトでは毎回新しいhtmlを読み込んでいるようには見えません。sectionタグの中身を何らかの方法で入れ替えているのでしょうか？サイドメニュークリック時にdisplayプロパティを変更することで実現できるとは思いますが、相当大きなhtmlファイルになるのではないでしょうか。
②index.htmlにサイドメニューとiframeを用意し、iframeの中身を入れ替える
⇒理想に近いものが作れましたが、iframeについて調べているとiframeの使用用途とは少し違うのではと感じました。
##やろうとしているがまだできていないこと
私が今考えているwebアプリケーションがSPAに当てはまると思い、Vueを使用すると作成できるのではと考えております。
よろしくお願いいたします。
反応いただきありがとうございます！
Chromeの検証機能からNetworkの項目を確認すると、サイドメニュークリック時にメイン部分のhtmlファイルのみサーバから取得しているので、サイドメニュー・ヘッダーは再読み込みすることなくメイン部分のみ入れ替えているのかと思いました。共通部分はブラウザにキャッシュされているためサーバから取得する必要がないということなのでしょうか？
回答1件
0
ベストアンサー
ベストかどうかはわかりませんが
お考えの通りSPAの動きがご要望の動きになります。
vue.jsサンプル
https://jsfiddle.net/yyx990803/xgrjzsup/
vue.jsをはじめとしたSPA向けのフレームワークの場合、仮想DOMやそれに類する機能があり、それはある状態から次の状態への変更指示を出すと、差分をだけをHTML更新してくれるものになります。よって全画面再読み込みが起こらず画面の一部のみ更新されます。
vue.jsにCSSフレームワーク(vuetifyなど)を組み合わせれば作りこまずにテストができると思います。
vue.jsの機能拡張版であるnuxt.jsを使うとサンプル動作まですぐかもしれません（機能が多いだけに環境構築に逆に手間取る可能性ありますが）
投稿2020/04/09 11:06
総合スコア88
回答ありがとうございます！
vuetify少し見てみましたがとても便利そうですね。勉強してみます。
SPAを作ったことがないので時間はかかりそうですが笑
ありがとうございました！
あなたの回答
tips
プレビュー
