PR：この記事にはアフィリエイトリンクが含まれます。
JavaScriptは文法を覚えただけで、すぐ実務に使えるわけではありません。HTMLから要素を見つけて更新するDOM操作、操作に応じて動くイベント処理、通信結果を待つ非同期処理。この三つをつなぐと、Webページに必要な機能を作れます。
検索欄に入力された文字を受け取り、Fetch APIでデータを取り、結果一覧を書き換える。よくある画面にもブラウザAPIが使われています。各機能の役割が分かると、不具合の原因を追いやすくなりますよ。
学習テーマの早見表
| 書籍 | 実務テーマとの接点 | 参考価格 |
|---|---|---|
 1冊ですべて身につくJavaScript入門講座 | イベント、アニメーション、Webサイトの実例 | 2,794円（税込） |
 これからのJavaScriptの教科書 | DOM、フォーム、Fetch、Promise、Clipboard API | 3,520円（税込） |
 改訂3版JavaScript本格入門 | DOM、Fetch、asyncとawait、Storage、Web Worker | 3,520円（税込） |
 JavaScript Primer 改訂2版 迷わないための入門書 | Promise、Async Function、Ajax、Todoアプリ | 4,290円（税込） |
 JavaScript 第7版 | DOM、イベント、非同期処理、Web Workers、Node.js | 5,060円（税込） |
本によって、画面の部品を実際に作る内容から言語仕様やブラウザAPIを広く扱う内容まで差があります。DOM操作と非同期処理を続けて学ぶ人には、両方の具体例がある一冊が実務の課題に結び付きやすいでしょう。
表の価格は公式の希望小売価格・定価を参考にしています。実売価格は時期や販売店によって変わるため、購入時には店頭や販売サイトの表示を確認してください。
DOM操作の基本
DOMはブラウザがHTMLを要素の親子関係として扱う仕組みです。JavaScriptではdocument.querySelector()で要素を探し、テキストや属性、クラスを変えて画面を更新します。
指定した要素が必ず存在するとは限りません。querySelector()は見つからないとnullを返すので、取得後に有無を確かめてから処理しましょう。
利用者が入力した文字を画面に表示する際は、textContentを使います。innerHTMLは文字列をHTMLとして解釈するため、入力値をそのまま渡すと危険です。
表示状態を切り替えるなら、クラスを追加・削除できるclassListが便利です。細かなスタイルをJavaScriptで直接指定するより、状態ごとの見た目をCSSにまとめると後から直しやすくなります。
イベント処理
クリックや入力などの利用者の操作は、イベントとして受け取れます。addEventListener()でイベントを登録し、処理を関数に分けておけば、HTMLの要素と動作のつながりを追いやすくなります。
イベントの発生元はevent.target、リスナーを登録した要素はevent.currentTargetで示されます。ボタン内のアイコンを押す場合など、クリック位置によって二つの値が異なることがあります。
項目が並ぶ一覧なら、親要素にリスナーを登録し、event.target.closest()で押されたボタンを探す方法があります。項目ごとにリスナーを重ねずに済み、後から加えた項目にも対応できます。
フォーム送信を受け取った後、必要ならevent.preventDefault()でページ遷移を止めます。入力値はFormDataからまとめて取得でき、値を確認してから通信するのが基本です。
非同期の流れ
Fetchやタイマーの結果は呼び出した直後には返りません。処理を待つ間もブラウザがほかの仕事を進められるよう、Promiseとasync、awaitが使われます。
await fetch(url)と書けば、通信後の処理を上から順に追えます。ただし、Fetch APIでは404などのHTTPエラーだけではPromiseが失敗にならないため、response.okも確認してください。
結果が互いに関係しない二つの通信を順番に待つと、後の通信も遅れて始まります。Promise.all()なら並行して完了を待てるため、全体の待ち時間を短縮できる場合があります。
画面を閉じた後や検索語が変わった後に、古い通信結果が届くこともあります。不要になったFetchをAbortControllerで中断し、今必要な結果だけを反映すると表示の食い違いを防げます。
ブラウザAPI
ブラウザAPIはJavaScriptからブラウザの機能を使うための窓口です。Fetch APIのほか、クリップボードへの書き込みやストレージ、Web Workerがあり、機能ごとに利用条件や失敗時の処理が異なります。
コピー機能にはnavigator.clipboard.writeText()を使えます。安全な接続や利用者の操作が必要な環境もあるため、成功時も失敗時も画面に状態を表示しましょう。
localStorageは文字列を保存する領域で、設定や小さな状態を保つのに使えます。読み書きは同期処理なので、大きなデータを何度も扱う用途では避けてください。パスワードなどの秘密情報も保存しないようにしましょう。
重い計算を別スレッドで進めるWeb Workerは、画面の応答性を保つ助けになります。ただし、WorkerからDOMを直接操作することはできません。postMessage()で計算結果を画面側に渡します。
実務の注意点
画面が動かないときは、要素を取得できたか、イベントを登録したか、通信が成功したかを順に確かめます。開発者ツールでエラーやネットワークの結果を見ると、原因の場所を絞り込めます。
通信中、成功、失敗、結果なしと、状態ごとの表示を用意すると利用者が状況を把握できます。処理中は送信ボタンを一時的に無効化し、連続クリックによる二重送信を抑えましょう。
非同期処理はtry・catchで失敗を受け止め、必要ならfinallyでボタンを元に戻します。何も表示されないと画面が止まったように見えるため、再試行の案内も添えてください。
ブラウザ機能は利用環境によって使えない場合があります。必須の機能なら対応状況を確認し、代替手段も用意しておきたいところです。機能を小さく分けておくと、後から修正しやすくなります。
実例で学べる本
『1冊ですべて身につくJavaScript入門講座』は、HTMLとCSSの基礎を終えた人がWebサイトの部品を作りながら学べる本です。ローディングや画像ギャラリー、スライドメニューの実例に加え、Web Animations APIも扱います。
344ページで、基本文法からイベント操作、アニメーション、エラー解決まで進みます。手を動かしながら画面の変化を確かめたい人におすすめです。jQueryから学び直す人も対象読者に含まれます。参考価格は2,794円（税込）。
『これからのJavaScriptの教科書』は2024年刊で608ページ、ECMAScript 2023までに対応しています。要素やフォームの操作、イベント処理からFetch APIとPromiseまで扱います。
Clipboard APIも扱い、実際の利用場面を想定したコード例が載っています。DOM操作と非同期処理をフレームワークなしで学びたい人には、この本がおすすめです。参考価格は3,520円（税込）。
深掘りに向く本
『改訂3版JavaScript本格入門』は624ページ。文法からDOMやフォーム、イベント、Fetch APIまで一冊で学び直せます。Promiseの連結や並行処理、asyncとawaitに加え、StorageとWeb Workerも扱います。
他言語の経験者やJavaScriptの基本を学び直したい人を対象にした本です。フォーム部品の操作も幅広く、入力画面を見直す際に参照できます。参考価格は3,520円（税込）。
PromiseとAsync Functionを図で学びたい人には、『JavaScript Primer 改訂2版 迷わないための入門書』をおすすめします。Ajax通信やTodoアプリの例もあり、小さなアプリケーションを通して使いどころを確かめられます。
『JavaScript 第7版』は784ページで、JavaScript言語やブラウザ側の処理、Node.jsを広く扱います。ブラウザのイベント登録・伝播・キャンセル、Promiseの並行・逐次処理、Web Workersまで解説。広い範囲を詳しく調べたい開発者におすすめです。参考価格は5,060円（税込）。
結論
DOM操作からブラウザAPI、非同期処理まで実務につなげて学ぶ一冊には、『これからのJavaScriptの教科書』をおすすめします。 要素やフォームからFetch、Promise、Clipboard APIまで扱い、今回の主題をまとめて学べます。
Webサイトの部品を作りながら覚えるなら『1冊ですべて身につくJavaScript入門講座』、基礎から応用まで整理するなら『改訂3版JavaScript本格入門』をすすめます。非同期処理を図で理解したい人にはPrimer、言語やブラウザ、Node.jsを広く調べたい人には第7版が合います。
価格はいずれも税込の参考価格で、実売は時期や店によって変わります。困っている作業に近い章のコードをブラウザで動かし、DOMの更新から通信結果の表示まで確かめてください。文法とAPIが実務の流れとしてつながります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
