0Pricing
TypeScript Academy · レッスン

libのDOM型とquerySelector（strict null checks）

libのDOM型を理解し、strict null checksを使ってquerySelectorで要素を安全に選択します

「libのDOM型とquerySelector（strict null checks）」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

はじめに

目標: lib DOMの型とquerySelectorを安全に使います。まずnullを確認し、その後、型を絞り込んだ要素APIを使います。

DOMライブラリの型

TSのDOMライブラリは、ブラウザーのグローバル（例: Document、HTMLElement、Event）の型を提供し、IntelliSenseとチェックを支えます。

// DOM types come from the lib DOM definitions
// Examples: Document, HTMLElement, HTMLInputElement, Event

const title: string = document.title; // Document API
console.log("Title:", title);

querySelectorの型

querySelectorはElement | nullを返します。strictNullChecksが有効な場合は、nullのケースを明示的に処理する必要があります。

const el = document.querySelector("#app");
// el: Element | null with strictNullChecks
console.log("Found?", el !== null);

早期リターンによるガード

早期にガードします。nullを確認してreturnまたはthrowを行います。ガードの後、その分岐では変数がnullではないと判断されます。

function mount() {
  const root = document.querySelector("#app");
  if (!root) {
    console.warn("No #app found");
    return; // root is narrowed below only if present
  }
  // root: Element
  root.innerHTML = "<strong>Hello TS + DOM</strong>";
}

mount();

サブタイプの絞り込み

instanceofを使ってHTMLInputElementのような特定のサブタイプまでさらに絞り込むと、要素固有のAPIを利用できます。

function readInputValue() {
  const input = document.querySelector("#name");
  if (!(input instanceof HTMLInputElement)) {
    return; // not an <input>
  }
  // input: HTMLInputElement
  console.log("value=", input.value);
}

readInputValue();

non-nullアサーションの注意点

絶対に確信できる場合を除き、non-nullアサーション（!）は避けます。ガードを使うと実行時の安全性が高まります。

function bad() {
  const root = document.querySelector("#app")!; // unsafe if #app missing
  // Potential runtime error below if root is actually null
  root.textContent = "unsafe";
}

// Prefer guarded version instead of non-null assertion

ガードパターンの確認

簡単な確認: strict null checksが有効な状態でconst el = document.querySelector("#app")を実行した後、安全な次のステップは何でしょうか?

まとめ

まとめ: DOMの型によってIntelliSenseが利用できます。querySelectorはElement | nullを返すため、まずガードしてから使います。要素固有のAPIにはinstanceofで型を絞り込みます。

よくある質問

「libのDOM型とquerySelector（strict null checks）」レッスンは無料ですか？

はい。「libのDOM型とquerySelector（strict null checks）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「libのDOM型とquerySelector（strict null checks）」で何を学びますか？

libのDOM型を理解し、strict null checksを使ってquerySelectorで要素を安全に選択します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「libのDOM型とquerySelector（strict null checks）」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. libのDOM型とquerySelector（strict null checks）
  2. イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み
  3. FormData、URL、URLSearchParamsの操作
← TypeScript Academyに戻る