CODE
JavaScript

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

こんにちは!ニタマサ=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にアップしています。

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

まとめ

いかがだったでしょうか。

今回はreloadメソッドを用いて自動更新させる方法についてご紹介してきました。

ぜひ、実際にやってみて確認してみてください!

もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います!!!
(ついでにフォローしていただけると最高に嬉しいです笑)

では!See you again!(´∀`)