JavaScriptのwindow.closeメソッドの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのwindow.closeメソッドの使い方について現役エンジニアが解説しています。windowオブジェクトのcloseメソッドを使うと、現在開いているタブやウィンドウを閉じることが出来ます。今回は新しいウィンドウを開いて3秒後に閉じるプログラムを書いてみます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptのwindow.closeメソッドの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのwindow.closeメソッドの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

window.closeメソッドとは

window.closeメソッドとは、ブラウザのタブを閉じる処理を行う関数です。現在のタブを閉じる時や、新しく開いたタブを閉じる時に使用します。

なぜタブなのにwindow(ウィンドウ)なのか?という疑問が湧いてくるかもしれません。これは、ブラウザのタブはどれもWindowオブジェクトを持っており、このWindowオブジェクトが実質的にタブを表すからです。

なお、windowとは現在のタブ、今まさに開いているタブを指します。

window.closeメソッドの使い方

window.closeメソッドの使い方は、とても簡単でwindow.close()のように記述します。今まさに開いているタブがwindowなので、window.close()と書くと、今まさに開いているタブを閉じることができます。

closeはWindowオブジェクトのメソッドですので、後ろのカッコ()を忘れないようにしましょう。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際にタブを閉じるコードを書いてみましょう。TechAcademyのサイトが新しいタブで開き、3秒後にそのタブが閉じるコードを書いてみます。

let _window
_window = window.open('https://techacademy.jp/')
setTimeout(() => _window.close(), 3000)

新しいタブを閉じるにはそのタブのWindowオブジェクトが必要となりますが、そのWindowオブジェクトはどこにあるのでしょうか?

2行目でTechAcademyのサイトを新しいタブで開いています。このとき、1行目の変数_windowに対して、こちらもWindowオブジェクトのメソッドであるopenの戻り値を代入しています。この戻り値こそが、新しいタブのWindowオブジェクトになります。

これにより、_windowは新しいタブのWindowオブジェクトとなり、実質的に新しいタブを指します。したがって、3行目の_window.close()は新しいタブを閉じる処理になります。

さらに、TechAcademyのサイトが新しいタブで開くと、そのタブへ移動しますが、3秒経過する前に別のタブへ移動しても、やはりTechAcademyのサイトが開いたタブは閉じます。

つまり、今まさに開いているタブでなくとも、閉じることができることを意味します。

筆者プロフィール

メンター久保田さん

Webシステム開発が中心のシステムエンジニア。

HTML、CSS、JavaScript(React、Vue.js)、PHP、Javaが守備範囲。
最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。