この記事は、『Qiita "N/S高等学校" Advent Calendar 2023』18日目の記事です。

S高1期生、通学コース週5生の綾坂ことです。
今年もN/S高アドカレがあるとのことで、せっかくなので書こうかと。

私には、常日頃「JavaScriptであそぼ」をやっていて思うことがあります。
それは、知らない機能が多すぎるということ。

MDN Web Docsを眺めてると、「なにそのAPI、知らなかった」となることがよくあります。
知らなかったから使えなかったは勿体ない、やはり存在だけでも知っておくべきかなと。

JavaScriptでそういう機能が全部一覧になってそうなところといえば、やはりwindow。
そんなわけで、windowの中身を片っ端から調べていきます。

12月18日追記
思った100倍地獄でしたたたたたｔ

ログの生成

windowじゃなくてglobalThisでやりましたが、window === globalThisはtrueだったのでたぶん問題ないと思います。

Object.keys(globalThis).sort()だとなんか足りてない気がしたので、ChromeのコンソールでglobalThisって打ったときに出てくる詳細ログを頑張って整形してきました。
かなりの量(1000行以上)あるのでScrapBoxに投げました、見たければ見てください

解説

ログの上の方から順番に書いていきます
- ただし、関連性のあるプロパティ同士をまとめて書くために順番を変えることはあります
ログには組み込みのクラスとかも出ていますが省略します
- まじでキリが無くなるので
- 余裕あったら追記します
一部分からなかったやつもあります、許してください……

数字・記号

window[0]
- window.framesを参照
window.JSCompiler_renameProperty()
- なんか上にでてきたので一応ここに書いておきます
- これはなんですか？

a

window.alert()
- ダイアログを表示して待機
window.atob()
- 「Base64文字列 → 文字列」の変換を行うメソッド

b

window.blur()
- ウィンドウからフォーカスを外す
window.btoa()
- 「文字列 → Bse64文字列」の変換を行うメソッド

c

window.caches
- Service Worker APIのCacheStorageインターフェースへのアクセス
window.cancelAnimationFrame()
- window.requestAnimationFrame()で予約したアニメーションの実行をキャンセル
window.cancelIdleCallback()
- window.requestIdleCallback()で予約したアニメーションの実行をキャンセル
window.captureEvents()
- 非推奨メソッド
- 何もしない
- 日本語版MDN Web Docsにはイベント全部キャプチャするみたいなこと書いてありますが、HTML Standardには何もするなと書いてあります
  - "The captureEvents() and releaseEvents() methods must do nothing."
window.chrome
- 非標準メソッド
- おそらく、Chrome拡張機能用APIが誤って公開されている状態
window.clearInterval()
- window.setInterval()で設定したインターバルを削除
window.clearTimeout()
- window.setTimeout()で設定したタイムアウトを削除
window.clientInformation
- window.navigatorの別名らしいです
window.close()
- 現在のウィンドウを閉じる
window.closed
- 現在のウィンドウが閉じられているかどうか
window.confirm()
- OK・キャンセルボタンを持つalertみたいなやつを出す。返り値はBoolean
window.console
- おなじみのコンソール
window.cookieStore
- Cookie Store APIへのアクセス
window.createImageBitmap()
- ImageとかVideoとかCanvasとかからImageBitmapを生成する
window.credentialless
- このWindowが資格情報のあるIframeかどうか、Boolean
window.crossOriginIsolated
- このWindowがクロスオリジン分離状態にあるか、Boolean
- ここがtrueなら、以下の機能が使えるらしい
  - SharedArrayBufferの転送
  - 高精度なperformance.now()
  - performance.measureUserAgentSpecificMemory()
window.crypto
- Web Cryptography APIへのアクセス
window.customElements
- Web components CustomElementRegistryへのアクセス
- カスタム要素を制作するために使う

d

window.decodeURI()
- encodeURI()でURIエンコードした文字列をデコード
window.decodeURIComponent()
- encodeURIComponent()でURIエンコードした文字列をデコード
window.devicePixelRatio
- CSS上の1pxが実際の画面では何pxで表示されてるか
window.document
- 文書全体への参照
window.documentPictureInPicture
- Document Picture-in-Picture APIへのアクセス

e

window.encodeURI()
- URIエンコード
- URLとして安全な文字列になるようにエンコードしてくれる
window.encodeURIComponent()
- URIエンコード
- &もエンコードするため、ユーザー入力値のPOST時のエンコードなどで使える
window.escape()
- 非推奨。エスケープシーケンスで置き換え
window.eval()
- セキュリティ的に使うな。文字列なJavaScriptコードを評価
window.event()
- 現在サイトのコードが処理しているEventを返す
- あんま使わないほうが良さそう
window.external
- 非推奨。中身はすべてダミー関数

f

window.fetch()
- Fetch APIによるネットワークリソースの取得
window.find()
- 非標準。Window内の文字列を検索するらしい
window.focus()
- このウィンドウを最前面に持ってくるように要求する
window.frameElement
- iframeなどの場合、このWindowが埋め込まれているElementを返す
- トップレベルのWindowの場合はnullになる
window.frames
- Windowのサブフレームを配列風オブジェクトとして返す
- window === window.framesは真(？！？！)
  - 実はwindowは配列風オブジェクトだった

g

window.getComputedAccessibleNode()
- アクセシビリティオブジェクトモデル関連？
- まじで分からなかったので誰か情報をください
window.getComputedStyle()
- CSS Object Model、指定した要素の(計算後の)スタイルをCSSStyleDeclarationで返す
window.getLockScreenData()
- Lock Screen APIへのアクセス？
- 過去検討されていたAPIの模様
window.getScreenDetails()
- 端末が持つ画面についての情報にアクセスできる「Window Management API」への参照
- マルチウィンドウアプリとかで役に立つかも
window.getSelection()
- ユーザーが選択しているテキストの位置or範囲をSelectionで返す
window.globalThis
- どの環境でも"globalThis"って書いたら確実にグローバルオブジェクトが返ってくる
  - window, self, frames, globalと、環境とスコープにより差がありすぎたから？

h

window.history
- History API、セッションのページ遷移履歴を持つHistoryを返す

i

window.indexedDB
- IndexedDB API、indexedDBへの非同期アクセス
window.innerHeight
- ウィンドウの内部の高さをピクセル単位で返す。水平方向のスクロールバーの高さを含む
window.innerWidth
- ウィンドウの内部の幅をピクセル単位で返す。垂直方向のスクロールバーの幅を含む
window.isFinite()
- 引数が有限数か判定する
- 暗黙の型変換あり(※Number.isFinite()は型変換なし)
window.isNaN()
- 引数がNaNか判定する
- 暗黙の型変換あり(※Number.isNaN()は型変換なし)
window.isSecureContext
- このWindowが安全なコンテキスト上にあるかをBooleanで返す

l

window.launchQueue
- Launch Handler API、PWAとしての起動方法を指定する
window.length
- Windowに含まれるサブフレーム(iframeなど)の個数を返す
- window.framesも参照
window.localStorage
- Web Storage API、Cookieより直感的なサイト単位のデータ保存先を提供する
window.location
- 文書の現在位置(≒今開いているページ)についてのLocationを返す
window.locationbar
- ロケーションバーが表示されているかに関するBarPropを返す
- BarProp.visibleがBooleanを返す。ポップアップならfalseになる模様
- どうやら歴史的経緯で残ってる系のものらしい……？

m

window.matchMedia()
- メディアクエリ文字列を解析してMediaQueryListを返す
window.menubar
- メニューバーの表示状態を表すBarPropを返す
window.moveby()
- ウィンドウの位置を指定した量だけ移動
window.moveto()
- ウィンドウの位置を指定した座標に移動

n

window.name
- ウィンドウ名を取得・設定
- 何に使うんこれ
window.NaN
- 非数(Not-A-Number)を表すNumber型の値
- モダンブラウザであれば設定&書込不可になっているはず
window.navigation
- 戻る・進むなどのナビゲーション操作を制御するNavigation APIへのアクセス
window.navigator
- ユーザーエージェントの状態などを表すNavigator

o

window.offscreenBuffering
- オフスクリーンバッファリング機能を有効にするか(Boolean)
window.on-
- イベントハンドラープロパティが大量にある
window.open()
- 新しいウィンドウで指定したページ等を開く
window.openDatabase()
- Web SQL Databaseへのアクセス
- IndexedDBを使え、だそうです
window.opener
- 何がこのウィンドウを開いたか(window.open()を実行したのはどのウィンドウか)
- 言い換えれば、ウィンドウ A がウィンドウ B を開いた場合、 B.opener は A を返します。
window.origin
- グローバルスコープのオリジンを文字列で返す
window.originAgentCluster
- オリジンキーのエージェントクラスターに属すかどうか
- なにこれ
window.outerHeight
- ウィンドウ全体の高さ
- ページ表示部分の高さを出したい場合はinnerHeight
window.outerWidth
- ウィンドウ全体の幅
- ページ表示部分の高さを出したい場合はinnerWidth

p

window.pageXOffset
- 互換性保持のためのエイリアス
- window.scrollXを参照
window.pageYOffset
- 互換性保持のためのエイリアス
- window.scrollYを参照
window.parent
- 親ウィンドウへの参照
window.performance
- パフォーマンス関連情報へのアクセス
window.parseFloat()
- 文字列の先頭から数値リテラルと解釈できる最大の場所までを取り出して数値に変換
- 厳密に数値リテラル→数値をやるならNumber.parseFloat
window.parseInt()
- 文字列の先頭から数値リテラルと解釈できる最大の場所までを取り出し整数に変換
- 必要に応じて何進数で見るかも指定できる
  - 動作複雑なのでリファレンスを見た方がいい
- 厳密に数値リテラル→数値をやるならNumber.parseInt
window.personalbar
- BarPropを返す
window.postMessage()
- 安全なオリジン間通信を行うためのメソッド
window.print()
- 現在の文書を印刷するための印刷ダイアログを開く
window.privateAttribution
- 本当にこれは何
- Chromeにしか実装されてなさそう
window.prompt()
- テキスト入力欄付きダイアログを出して待機

q

window.queryLocalFonts()
- ローカルで使用可能なフォントの一覧を返す(Promise)
window.queueMicrotask()
- マイクロタスクキューに関数を入れる
- 現在のタスクが完了し実行コンテキストの制御がブラウザーのイベントループへ戻る前、他に保留中のコードがなくなった時点で走る

r

window.releaseEvents()
- 非推奨。captureEvents()を解除
window.reportError()
- 捕捉されない例外をエミュレートして上に報告
- エラーの"投げ直し"ができる？
window.requestAnimationFrame()
- 要素などのアニメーションを実行するために使う
  - 1フレームずつしか動かないので関数内でまたrewuestAnimationFrameを呼ばないといけない
window.requestIdleCallback()
- アイドル状態になったときに実行させたい関数を設定
window.resizeBy()
- ウィンドウの幅と高さを指定した量広げる(相対)
window.resizeTo()
- ウィンドウの幅と高さを指定した量にする(絶対)

s

window.screenLeft
- window.screenXのエイリアス(IE由来)
window.screenTop
- window.screenYのエイリアス(IE由来)
window.screenX
- ブラウザーのビューポートの左端から画面の左端までの距離(CSSのpx単位)
window.screenY
- ブラウザーのビューポートの上端から画面の上端までの距離(CSSのpx単位)
window.scroll()
- ページを任意位置までスクロールする(絶対移動)
window.scrollBy()
- ページを任意位置までスクロールする(相対移動)
window.scrollTo()
- ページを任意位置までスクロールする(絶対移動)
- scroll()とほぼ同じ効果らしい
window.scrollX
- X方向のスクロール量
window.scrollY
- Y方向のスクロール量
window.scrollBars
- BarPropを返す
window.self
- 自分自身を返す
window.sessionStorage
- Web Storage API、セッション終了のたびに消えるストレージにアクセス
window.setInterval()
- 指定時間ごとに関数を呼び出す
window.setTimeout()
- 指定時間後に関数を呼び出す
window.showDirectoryPicker()
- File System Access
- あまりにも"悪"すぎやしないかい、このAPI
window.showOpenFilePicker()
- File System Access
window.showSaveFilePicker()
- File System Access
window.speechSynthesis
- Web Speech API、音声合成機能へのアクセス
window.status
- 非推奨。ブラウザーウィンドウの最下部にあるステータスバーのテキストを設定するためのものだった
window.statusbar
- BarPropを返す
window.stop()
- ウィンドウの読み込みを停止
window.structuredClone()
- オブジェクトのディープコピーを作成
- JSON.stringify→JSON.parseをやらなくてもいい
window.styleMedia
- ドキュメントを表示するメディアスタイルに関する情報を取得

t

window.toolbar
- BarPropを返す
window.top
- ウィンドウ階層の最上位ウィンドウを返す
window.trustedTypes
- Trusted Types API、信頼できる型の作成方法を生成するTrustedTypePolicyFactoryへのアクセス

u

window.undefined
- プリミティブ値undefinedを返す
- モダンブラウザであれば設定&書込不可になっているはず
window.unescape
- 非推奨。escape()でエンコードした文字列をデコード

v

window.visualViewport
- 特定のウィンドウの視覚的ビューポートを表すVisualViewportを返す
- Visual Viewport API関連

w

window.webkit-
- ベンダー接頭辞
- 試験的または非標準なAPIに対して接頭辞を追加することがある、Chromeの場合はwebkit
window.window
- 自分自身を返す

あとがき

結構知らないものも多かったなと思いました。
(window.print()とか地味に使ったことなかった。たしかに言われてみればありそうだけど)
やはり通読が最強