JavaScriptコードから更新とかページ移動をさせたい・・・

そういう場合は location  を使えば数行のコードできます。やり方もそれほど難しくなく、結構色々な場面で役立つテクニックです。

ですが意外とその方法を忘れがちだったので location を使ったページ遷移のやり方について自分へのメモ的な意味も込めてまとめてみました。

そもそも location とは？

location  は正確にはwindowオブジェクトのプロパティなので window.location  が正式名称

その名の通り現在のドキュメントの場所（つまりURL）を表すためのプロパティです。ちなみにこのプロパティ自体は読み込み専用に設定されています。

例えば現在ブラウザで開いているページが次のようなURLだったとしましょう。

このURLを調べて表示したい場合はそのページで次のコードを実行すればOK

こうすれば現在ページのURLがコンソールに表示されたはずです。もちろんページが移動してURLが変われば location.href  の値もそれに伴って変化します。

こういう風に現在ページのURLを格納しているのがlocationプロパティの１つめの役割

これだけだと何の役に立つのかよく分かりませんが、このプロパティには次で紹介するようにURLそのものを書き換える（つまりページ自体を書き換える）能力もあります。

locationで更新とかページ移動をするには

では具体的に location  を使ってページ移動や更新する方法を紹介します。

ページ移動は代入または assign を使う

まず location  の代表的な使い方はページ移動で、URLを代入する あるいは assignメソッドを使うことで目的のページに移動可能です。

例えば次は代入を使って他のページ（ other.html  ）に移動するコード例

代入する文字列は相対URL（ 例 : example.html  ）または絶対URL（ 例 : https://example.com/other.html  ）のどちらでも構いません。

またこれと同じことはassignメソッドを使用しても可能

ちなみにリファレンスとかだと「 location は読み込み専用のプロパティ」と書いてあることが多いですが、実際は代入できるので便宜上そういう設定になっているものと思われます。

なので location  は普通の文字列と同じように扱ってもOKです。

更新する場合は reload を使う

お次はページを更新する場合ですが、こちらはreloadメソッドを使います。

例えば次が強制的にページを再読み込みするコード例

このコードだと reload  に true  を渡して再読み込みさせてます。

ちなみにreloadメソッドに true  または false  を渡したときの動作の違いは次の通り

• trueの場合
  ブラウザのキャッシュをすべて無視してサーバーから読み込む
• falseの場合
  ブラウザでキャッシュが保存されているならキャッシュから読み込む

こういう違いがあります。

もし内容が常に変更されるようなページをJSコードから更新する場合は reload(true);  とした方が反映されないなどのトラブルがなくなるはずです。

ここまでのまとめ

ということで location  の使い方まとめ

• 他ページへ移動する場合
  location = 'other.html';  みたいに直接URLを代入するか、
  location.assign('other.html');  みたいにassignメソッドを使えば移動が可能
• 現在ページを更新する場合
  location.reload(true);  のようにreloadメソッドを使う。ただし true  を渡すとキャッシュ無視で読み込み、 false  を渡すとブラウザキャッシュからの読み込みになる

こういうテクニックは結構使うのでやり方は忘れないようにしたいですね。

以上JavaScriptでページ移動や現在ページの更新を指せる方法についてでした。