Zenn
🐣

window.~ ってなに？ブラウザーオブジェクトの基本だけ。 -雰囲気理解を理解する-

2022/03/09に公開
JavaScript
tech

既存のコードを読んでる時に、私はよくこんなことがあります。

「ふむふむ、、window.location　ふむ？どこからでてきたんだ？まあいいか」

🙅‍♀️🙅‍♂️🙅‍♀️🙅‍♂️🙅‍♀️🙅‍♂️

window.location
window.history
history.pushState
とかよく見るけど、雰囲気でコードを読んでいて、これが何かと聞かれるとわかりません。。

ということで今回はこれらがなんなのか、基本をまとめてみます。

Window.~ って何よ

Google Chromeや、Internet Explorなど、ほとんどのブラウザーがブラウザー操作のための機能を用意しています。

このようにブラウザ機能にアクセスするためのオブジェクト をまとめたものを 「ブラウザーオブジェクト」 と言います。

"window.~"は、ブラウザーオブジェクトの１つなのです。

ブラウザーオブジェクトの構造

ブラウザーオブジェクトは、下記の図のような階層構造になっています。

トップが、Windowオブジェクト。

クライアントサイドJavascriptが起動するタイミングで自動生成され、グローバル変数やグローバル関数にアクセスするための手段を提供します。

図1

全てのブラウザーオブジェクトには、このトップに位置するWindowオブジェクトを通してアクセスします

ブラウザーオブジェクトにアクセスするには

基本は、Javascriptで実装している際にWindowオブジェクトを意識する必要はありません。

例えば、loactionオブジェクトのreloadメソッドにアクセスするなら以下のように、直接loactionプロパティを呼び出せば良いのです。

loaction.reload()

以下のような記述は不可能なので、注意してください

Window.loaction.reload()

ただし、図１でもわかるように、Windowオブジェクトは自分自身を参照するwindowプロパティを持っています。なので、下記のような記述はOKです。
ただ、無駄に長くなるだけなので、あまり意味がありません。

window.loaction.reload() //←先頭が小文字！

基本的なメソッドー選

ここからは、ブラウザーオブジェクトの中でも特に基本的なメソッドをさらっと紹介していきます🐥

ちなみに、先述したように「window.」は省略可能ですが、わかりやすいように本記事では省略せずに書いていきます。

confirmメソッド

目的： 確認ダイアログを表示する

alertが単にメッセージを表示するだけなのに対して、confirmはユーザーに何かしら確認の意思表示を求めることができます。

if (window.confirm("Do you really want to leave?")) {
  window.open("exit.html", "Thanks for Visiting!");
}

結果

OKボタンを押すと、"Thanks for Visiting!"という新しいウィンドウが開きます。

setInterval / setTimeout メソッド

目的：一定時間ごと / 一定時間が経過した後に何かしらの処理を行う

両者の違いは 、
setInterval → 決められた時間感覚で繰り返し処理を実行する
setTimeout → 指定された時間が経過したところで1回だけ処理を実行する

// countUpの処理を1000ミリ秒後（＝1秒後）に繰り返す
 let count = 0;
  const countUp = () => {
    console.log(count++);
  }
  window.setInterval(countUp, 1000);

//  5000 ミリ秒( 5 秒)経過すると警告ダイアログが表示される
function dispMsg(){
    alert('時間切れです');
}
window.setTimeout(dispMsg, 5000);

locationオブジェクト

目的： 別のページに移動する、現在のページをリロードするなど

利用可能なプロパティ・メソッドは多くあるので公式ドキュメントをご参照ください。

historyオブジェクト

目的：履歴に沿って前後のページの移動を制御する

historyはブラウザーの履歴を管理しているオブジェクト。

window.history.back();     // 戻るボタンを押すのと同等
window.history.go(-1);     // history.back(); と同等

pushState

目的：ブラウザの履歴に状態を追加する

例えば、ボタンをクリックしてページを更新したとします。
更新後、同じページのボタンを押す前の状態に戻したいとなっても、戻るボタンを押したら、更新する前の状態ではなく、１つ前のページに戻ってしまいます。

pushStateを使うことで、ページ遷移なしでブラウザの履歴を追加することが出来ます。

const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'

window.history.pushState(state, title, url)

Discussion