JavaScript DOM操作と非同期処理（fetch・Promise）

JavaScript DOM・非同期とは｜このカテゴリで分かること

JavaScriptのDOM操作と非同期処理は、ページの要素を取得して書き換え、サーバーとデータをやり取りして画面に反映するという、フロントエンドの実務の中心になる部分です。このカテゴリでは、querySelector、addEventListener、イベント委譲、classList、fetch と async/await、Promise、fetch のエラー処理、localStorage、IntersectionObserver、フォームのバリデーションの10本を扱います。JavaScriptの基礎は終えたが、実際のページに組み込む段階で戸惑う初心者から中級のコーダーを想定しています。

DOM操作は「取得する→イベントを待つ→書き換える」の流れ、非同期処理は「リクエストを送る→結果を待つ→失敗にも備える」の流れで捉えると全体が見えます。この流れに沿って並べているので、上から順に読んでも、必要な部分だけ拾い読みしても構いません。

読む順番（おすすめの順路）

querySelectorとは｜使い方・querySelectorAllとの違い・nullエラー対策 … 要素を取得する基本です。null になるエラーの対処もここで確認します。
addEventListenerとは｜使い方・once・解除・thisの注意点 … クリックなどの操作を受け取る方法です。
classListとは｜add・remove・toggleの使い方とclassNameとの違い … クラスの付け外しで見た目を切り替える、最も使う書き換え方法です。
イベント委譲とは｜closestで書く実装と動的要素への対応 … 動的に増える要素にも対応するための、イベント登録の考え方です。
フォームのバリデーション｜Constraint Validation APIの使い方とエラー表示 … 入力チェックの標準APIを使って、フォームを実務の形に近づけます。
Promiseとは｜then・catch・Promise.allの使い方と実行順序 … 非同期処理の土台です。fetch の前に仕組みを理解します。
fetch APIとasync/awaitの使い方｜JSON取得・POST・一覧表示 … JSON取得とPOSTの基本の書き方です。
fetchのエラー処理｜try/catch・res.ok・タイムアウト・中断の書き方 … 失敗したときにどうするか。実務では必須の内容です。
localStorageの使い方｜JSONの保存・容量・sessionStorageとの違い … 取得したデータや設定をブラウザに保存する方法です。
IntersectionObserverとは｜画像の遅延読み込みとスクロール表示の実装 … スクロールに連動した表示や遅延読み込みの応用です。

押さえておきたいポイント（リサーチ）

MDN で確認できる要点です。

fetch() は、ネットワークエラーなどではプロミスを拒否しますが、サーバーが 404 や 500 などのエラーステータスで応答しても拒否しません。そのため response.ok（ステータスが 200〜299 のとき true）を確認する必要があります。
上記のため、実務では try/catch に加えて、if (!response.ok) で自分で例外を投げる書き方がよく使われます。
Intersection Observer API は、要素がビューポートや指定した親要素と交差する変化を非同期に監視します。用途として、画像などの遅延読み込み、無限スクロール、広告の表示計測などが挙げられています。
IntersectionObserver は getBoundingClientRect() をスクロールのたびに呼ぶ従来の方法と違い、メインスレッドの負荷を抑えられるとされています。

ブラウザの対応状況や新しいAPIは更新されるため、導入時は最新の情報を公式で確認してください。

よくある疑問

Q. querySelector で null が返るのはなぜですか。
A. 実行時点で要素がまだ存在しない、セレクターが違う、などが原因です。対策は querySelectorとは｜使い方・querySelectorAllとの違い・nullエラー対策にあります。

Q. fetch で 404 のときに catch に入りません。
A. fetch はHTTPエラーで拒否されないためです。書き方は fetchのエラー処理｜try/catch・res.ok・タイムアウト・中断の書き方を見てください。

Q. 動的に追加したボタンでクリックが反応しません。
A. 追加前の要素にしかイベントが付いていないためで、イベント委譲とは｜closestで書く実装と動的要素への対応の方法で解決できます。

Q. async/await と Promise は何が違いますか。
A. async/await は Promise を読みやすく書く構文です。関係は Promiseとは｜then・catch・Promise.allの使い方と実行順序と fetch APIとasync/awaitの使い方｜JSON取得・POST・一覧表示で確認できます。

編集部の見解

DOM操作と非同期処理は、「正常系は動くのに、失敗したときに何も起きない」コードになりやすい分野だと考えます。fetch の response.ok の確認が抜ける、要素が存在しない場合の null チェックがない、といったミスは、開発中は気づきにくく、公開後に問題になりがちです。そのため、最初から「失敗したときにユーザーへ何を見せるか」まで含めて書く習慣をおすすめします。また、イベント委譲や IntersectionObserver のような少し応用的な手法も、使いどころを知っておくと、ライブラリに頼らず簡潔に実装できると考えます。