JavaScriptコードから更新・ページ読み込みさせる方法まとめ

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

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

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

このページの目次

そもそも location とは？

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

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

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

https://example.com/example-page/

1	https://example.com/example-page/

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

console.log(location.href);

1	console.log(location.href);

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

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

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

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

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

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

/** 他のページへ移動 */
location = 'other.html';

1 2	/** 他のページへ移動 */ location = 'other.html';

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

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

/** 他のページへ移動 */
location.assign('other.html');

1 2	/** 他のページへ移動 */ location.assign('other.html');

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

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

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

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

/** 現在ページを更新 */
location.reload(true);

1 2	/** 現在ページを更新 */ location.reload(true);

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

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

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

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

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

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