Articles
TypeScript入門
TypeScriptにおけるwindowオブジェクト

TypeScriptにおけるwindowオブジェクト

この記事ではTypeScriptにおけるwindowオブジェクトについて説明します。

windowオブジェクトのプロパティやメソッドをコードを通して学べます。

YouTube Video

TypeScriptにおけるwindowオブジェクト

window は、TypeScriptやJavaScriptにおいてグローバルなオブジェクトで、ブラウザのウィンドウ全体を表します。ブラウザのAPIやDOM（Document Object Model）の操作、タイマー、ストレージ、その他の機能にアクセスするための多くのプロパティやメソッドが含まれています。

tsconfig.jsonとwindowオブジェクト

TypeScriptでは、windowオブジェクトにアクセスする際、ブラウザ環境固有のグローバル機能が型定義されているため、エディタでの補完や型チェックが行われます。TypeScriptの標準型定義ファイル（lib.dom.d.ts）により、TypeScriptはwindowオブジェクトの各種プロパティやメソッドを認識しています。

TypeScriptを使う際は、プロジェクトのルートに tsconfig.json を置くのが一般的です。このファイルはコンパイラオプションや型定義ファイルの取り込み範囲を指定するために使われます。

特にwindowを扱う場合に重要なのは、**ブラウザの型定義（DOM型定義）**を有効にすることです。これがないと、window や document が型エラーになります。

 1{
 2  "compilerOptions": {
 3    "target": "es6",
 4    "module": "esnext",
 5    "strict": true,
 6    "lib": ["es6", "dom"],   // Enable DOM type definitions
 7    "outDir": "./dist"
 8  },
 9  "include": ["src"]
10}
  • このように "lib": ["es6", "dom"] を指定しておくと、window や document の型が正しく補完されるようになります。

主なwindowプロパティとメソッド

  1. window.document window.documentは、ページのDOMにアクセスするためのプロパティです。要素の取得やDOMの変更が可能です。
1console.log(window.document.title);  // Display the title of the current document
  • この例では、現在のドキュメントのタイトルを表示しています。
  1. window.localStorage / window.sessionStorage window.localStorage と window.sessionStorageは、ユーザーデータをブラウザに保存できるストレージ機能にアクセスするためのプロパティです。
1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'
  • この例ではlocalStorageにデータを保存し、取得して表示しています。
  1. window.location window.locationは、現在のURLに関する情報を取得・操作するためのオブジェクトです。リダイレクトやURLの変更が可能です。
1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page
  • この例ではURLを表示し、別のページへリダイレクトしています。
  1. window.setTimeout / window.setInterval window.setTimeout と window.setIntervalは、タイマーや一定間隔で関数を実行するためのメソッドです。
1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);
  • このコードは、2秒後にコンソールへメッセージを出力する処理を実行します。
  1. window.alert / window.confirm / window.prompt alert、confirm、promptは、ユーザーにアラートや入力を求めるダイアログボックスを表示します。
1window.alert('Alert message');
  • このコードは、アラートダイアログを表示してメッセージを通知します。

windowオブジェクトのイベント

window はDOMの一部なので、イベントを直接監視することもできます。TypeScriptでは型が補完されるため、誤ったイベント名やプロパティを使うとエラーが出ます。

ウィンドウサイズ変更イベント 

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});
  • このコードは、ウィンドウのサイズが変更されたときに新しい幅と高さをコンソールに出力します。

キーボードイベント 

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});
  • このコードは、ユーザーがキーを押したときに押されたキーをコンソールに出力します。

ページ読み込み完了イベント 

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});
  • このコードは、ページの読み込みが完了したときにメッセージをコンソールに出力します。

注意点

  • TypeScriptではイベントオブジェクトの型が推論されるので、KeyboardEvent や MouseEvent などを意識するとより安全です。

  • イベントリスナーを追加したら、不要になったときに削除するのが望ましいです。window.removeEventListenerメソッドによりリスナーを削除できます。

1function handleClick() {
2  console.log("Clicked!");
3}
4
5// Add event listener
6window.addEventListener("click", handleClick);
7
8// Remove event listener
9window.removeEventListener("click", handleClick);
  • このコードは、クリックイベント用のリスナーを追加し、その後に削除する例を示しています。

カスタムプロパティを追加する場合

window オブジェクトにカスタムプロパティを追加する場合、TypeScriptで型エラーを避けるためには型の拡張が必要です。

1// Add a custom property to the window
2interface Window {
3    myCustomProperty: string;
4}
5
6window.myCustomProperty = "Hello, World!";
7console.log(window.myCustomProperty);  // "Hello, World!"
  • このコードは、TypeScriptでwindowオブジェクトにカスタムプロパティを追加して値を設定・表示する例です。

グローバルな window オブジェクトを使う際の注意点

TypeScriptの厳格な型チェックによって、存在しないプロパティやメソッドを使用しようとするとエラーが発生します。例えば、windowオブジェクトに対して存在しないプロパティをそのままアクセスしようとするとエラーになるため、適切に型を拡張する必要があります。

このように、window オブジェクトはブラウザアプリケーションのさまざまな機能にアクセスするための中心的な役割を果たしており、TypeScriptでは型チェックを活用して安全に使用できます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

TypeScriptにおけるジェネレーター関数TypeScriptにおけるDOM操作