【JavaScript】reloadメソッドを用いて自動更新させる方法

公開日 2020/6/16 最終更新日 2020/6/15

こんにちは！ニタマサ＝NewM(@NewM07x2)です。

今回はJavaScriptを用いてサイトを自動更新させる方法をご紹介します。

利用ケースとしては以下のような場合です。

ボタンをクリックした時
定期的に画面を更新させたい時
画面を全体or一部更新させたい時

本記事では

構文→コードの紹介→解説

のステップで進めていきます。

簡単にコピぺして実践できるようにしていますので、ぜひトライしてみてください！

では、やっていきましょう！

環境準備

今回設定していく環境は以下の通りになっています。

HTMLファイル作成

※今回はHTMLファイルの中にJSを書いていきます。

ファイルの作成

まずは以下のコードをコピってリロードを体験してみましょう。

コードは以下になります。

index.html

See the Pen JjGKxyv by NewM07x2 (@newm07x2) on CodePen.

いかがでしょうか。

JSの練習の部分がピクピクしているのが確認できるかと思います。

それではコードの解説に入ります。

解説

構文

window.location.reload();
setTimeout(関数名, インターバルTime);

解説

画面をリロードしていく際には基本的に2つの構文を利用していきます。

まず、

「window.location.reload();」

に関してですが、

ページを再読み込みして更新するには、「window」オブジェクトの「window.location.reload」メソッドを使用します。

これだけでは画面が表示された後に呼び出され、再読み込みはしなくなります。

そのため、時間を設定して、定期的に処理が走るようにしてやります。

その処理を行うのが、

「setTimeout(関数名, インターバルTime);」

です。

「setTimeout」はインターバルTime (＝10秒など) 後に指定した関数を呼ぶ処理を行います。

つまり上記で体験してもらったコードの全体の流れとしては、ページ全てが読み込まれた時、「setTimeout」メソッドを実行して、1秒後に「doReload」を呼ぶ処理を行っています。

おまけ

簡単なメモ機能を作成したので、ぜひコピって遊んでみてください！

※ソースコードは以下のGithubにアップしています。

My Github

以下のような動作をしています！

✅JavaScriptのOutput

超簡単ですが、JSでメモ的なやつを作成してみました。
仕様はボタンをクリック後、入力値をローカルストレージに格納して画面の再ロード。
そして、格納したデータを取ってくると行った無駄に手間がかかった奴です。#プログラミング初心者 #駆け出しエンジニアと繋がりたい pic.twitter.com/mGGkZR5EZ4
— ニタマサ＝NewM@EC系Engineer (@NewM07x2) June 15, 2020