JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでページを再読み込みする方法：location.reload()の使い方を解説

JavaScriptを使ってWebページを再読み込み（リロード）したい場面は意外と多くあります。そんなときに活用できるのが、locationオブジェクトが持つreload()メソッドです。この記事では、実際のコード例をもとに、reload()の基本的な使い方と引数の挙動をわかりやすく解説します。

基本のコード例

以下は、ボタンをクリックするとページが再読み込みされ、そのたびにランダムな猫の画像が表示されるシンプルなサンプルです。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body onload="handleLoad()">
  <button id="btn">Click Me!</button>
   <script>
     let arrayKittens = [ "https://placekitten.com/200/300", "https://placekitten.com/210/310", "https://placekitten.com/300/300", "https://placekitten.com/300/200", "https://placekitten.com/310/210", "https://placekitten.com/400/300"];
 
     let button = document.querySelector("#btn");
     button.style.display = "block";
     button.style.margin = '20px 0px'
 
     const handleClick = (e) => {
       console.log("click")
       location.reload(true);
     }
 
     button.addEventListener("click", handleClick);
 
 
     let body = document.querySelector("body");
     let image = document.createElement("img");
 
     const handleLoad = (e) => {
       console.log("loaded")
       let random = Math.floor(Math.random() * arrayKittens.length);
       let newImg = arrayKittens[random];
       image.setAttribute("src", newImg);
       image.setAttribute("width", "300");
       image.setAttribute("height", "300");
       image.setAttribute("alt", "  arrayKittens[" + random + "]");
       image.style.objectFit = "cover";
 
 
       body.appendChild(image);
     };
   </script>
 </body>
</html>

コードの仕組み

このコードには2つのイベントハンドラが登場します。

1つ目はhandleLoad()です。ページが読み込まれたタイミングで実行され、配列arrayKittensの中からランダムに1枚画像を選び、<img />要素としてDOMに追加します。Math.random()とMath.floor()を組み合わせることで、ランダムなインデックスを生成しているのがポイントです。

2つ目はhandleClick()です。こちらが今回の主役となるreload()を呼び出す関数です。ユーザーが「Click Me!」ボタンをクリックするとhandleClick()が発火し、ページが再読み込みされます。再読み込みが完了すればhandleLoad()が再度実行されるため、結果としてクリックするたびに違う猫の画像が表示されるという仕組みです。

このように、ページのほぼすべてのロジックをJavaScriptだけで制御できます。

reload()の引数について：キャッシュとサーバーからの取得

reload()には真偽値（true / false）を引数として渡すことができ、これによって再読み込みの方法が変わります。

  • false（デフォルト）： ブラウザのキャッシュからページを再読み込みします。通常のリロードよりも高速ですが、最新の内容が反映されない場合があります。
  • true： サーバーにリクエストを送り、最新のページを取得して再読み込みします。サンプルコードではlocation.reload(true)としているため、毎回サーバーからデータを取り直しています。

デフォルト値はfalseなので、特別な理由がなければ引数は省略しても構いません。キャッシュではなくサーバーから確実に最新の内容を読み込みたい場合のみ、trueを渡しましょう。

まとめ

JavaScriptでのページ再読み込みは、location.reload()ひとつで実現できます。引数の指定次第でキャッシュ利用の有無も制御できるため、用途に合わせて使い分けるのがポイントです。とてもシンプルなので、ぜひ自分のプロジェクトでも試してみてください。

  1. JavaScriptでアップロード前に画像をプレビュー表示する2つの方法

    セキュリティ上の理由により、ブラウザはinput要素で選択された画像ファイルのパスへの直接アクセスを許可していません。つまり、ブラウザ上で動作するJavaScriptはファイルシステムにアクセスできない仕組みになっています。そのため、ユーザーが選択した画像ファイルをサーバーやその他の場所へ送信する前にプレビュー表示したい場合は、少し工夫が必要です。本記事では、JavaScriptでアップロード前に画像をプレビューする2つの実装方法を、サンプルコード付きでわかりやすく解説します。方法1：URLクラスのcreateObjectURL()を使うURLクラスが提供するcreateObjectURL()

  2. HTMLページに画像を挿入する方法を解説！imgタグの基本と使い方

    HTMLページでは、好きな位置に簡単に画像を挿入することができます。画像を表示させるには <img> タグを使用します。このタグは終了タグが不要な「空要素」と呼ばれるもので、属性だけで構成されているのが特徴です。注意点として、<img> タグは必ず <body>〜</body> の中に記述してください。主な属性は以下の通りです。src属性：画像のソース（画像ファイルのURLやパス）を指定しますalt属性：画像が表示されない場合に代わりに表示される代替テキストを指定しますwidth属性：画像の幅を指定しますheight属性：画像の高さを指定します記