【JS】ブレイクポイントを通過する毎にページをリロードする方法

PCとSPのブレイクポイントをまたぐ際に、ページを強制的にリロードしたいという場面があるかと思います。

JavaScriptのresizeイベントで実装する方法をよく見かけますが、画面幅が1pxでも変わるたびに発火するため、パフォーマンス面ではあまり良くありません。

そこで今回の記事では、ブレイクポイントを通過する時のみページをリロードする方法を紹介します！

この方法だとブレイクポイントを通過するときのみ発火するので、無駄な処理を発生させることなくページをリロードすることができます。

【コピペ用】ブレイクポイントを通過する毎にページをリロードさせるコード

以下のコードのみで、ブレイクポイントを通過するたびにページを強制リロードすることができます。

const breakpoint = window.matchMedia("(max-width:768px)");

breakpoint.addEventListener("change", () => {
  window.location.reload();
});

実際に使用するときは、max-width: 768pxの部分に必要なメディアクエリを記述してください。

【解説】ブレイクポイントを通過する毎にページをリロードさせるコードの解説

ここからはコードの解説をしていきます。

まず、CSSと同じようにmax-widthやmin-widthでメディアクエリを記述します。

const breakpoint = window.matchMedia("(max-width:768px)");

ここでは、max-width: 768pxとしていますが、自由にブレイクポイントを指定してください。

続いて、ブレイクポイントを格納した変数breakpointに対して、changeイベントを設定します。

breakpoint.addEventListener("change", () => {
  window.location.reload();
});

このchangeイベントは、メディアクエリの状態が変化したタイミングで発火します。

当記事のコードを例にすると、画面幅が768px以下になった瞬間と、768pxを超えた瞬間に発火するということになります。

ページのリロードは、以下のコードで実装することができます。

window.location.reload();

これで、ブレイクポイントを通過するたびにページをリロードできるようになりました。

【まとめ】ブレイクポイントを通過する毎にページをリロードする方法

今回の記事では、ブレイクポイントを通過するごとにページをリロードする方法を紹介しました。

よく見るresizeイベントと違い、ブレイクポイントが切り替わる地点でのみコードが発火するので、パフォーマンス面でも優れています。

PCとSPで違う見せ方をする場合によく使用する方法ですので、ぜひ試してみてください。