【ITニュース解説】🕵️‍♂️ 50 Hidden Browser Events & APIs (with Code Examples)

Webアプリケーションを開発する際、多くのシステムエンジニアが頻繁に使うイベントといえば、ボタンがクリックされたときに何らかの処理を行う「クリックイベント」や、テキスト入力欄に文字が入力されたときに反応する「入力イベント」、キーボードのキーが押されたことを検知する「キーボードイベント」などが挙げられる。これらはWebページとユーザーがやり取りする上で非常に基本的で重要な機能だ。しかし、Webブラウザには、こうした一般的なイベントの他にも、開発者が高度な機能やユーザー体験を実装するために役立つ、さまざまな「隠れた」イベントやAPI（Application Programming Interface）が用意されている。これらを使いこなすことで、普段見慣れているWebサイトやWebアプリケーションの動作を、より深く制御し、ユーザーにとって便利な機能を付け加えることが可能になる。

この記事では、そうしたあまり知られていないけれど強力なブラウザのイベントやAPIを50種類、カテゴリ別に紹介している。これらは単にブラウザが持つ機能の一覧というだけでなく、それぞれが特定の状況下で発生し、そのタイミングで開発者が独自の処理を組み込むことを可能にする「きっかけ」を提供する。

まず、「ページのライフサイクルとナビゲーション」に関連するイベントから見ていこう。Webページが表示されてから閉じられるまでの一連の流れの中で、様々なタイミングで発生するイベントがある。「beforeunload」イベントは、ユーザーがページを閉じたり、別のページに移動しようとしたりする直前に発生し、未保存の変更がある場合に警告を表示してデータの損失を防ぐことに役立つ。「pagehide」や「pageshow」イベントは、ページが一時的に非表示になったり、再度表示されたりする際に発生し、ブラウザのバックフォワードキャッシュ（BFキャッシュ）利用状況を把握し、ページの状態管理に活用できる。

「visibilitychange」イベントは、ユーザーがブラウザのタブを切り替えたり、ウィンドウを最小化したりして、現在のページの表示状態が変わったときに発生する。このイベントを使うと、ページが非アクティブなときに動画を一時停止するなど、リソースを効率的に使用できる。「freeze」と「resume」イベントは、ブラウザがタブを一時的に「凍結」してシステムリソースの消費を抑えたり、凍結状態から「再開」したりするタイミングを捉えるもので、省電力化などのブラウザ内部の最適化と連携できる。

ブラウザの履歴操作に関連するイベントとしては、「popstate」がある。これは、ユーザーがブラウザの「戻る」や「進む」ボタンを使って履歴を操作したときに発生し、シングルページアプリケーション（SPA）などでコンテンツを切り替える際に利用される。「hashchange」イベントは、URLの末尾にある「#（ハッシュ）」部分が変更されたときに発生し、これもSPAのルーティングによく利用される。

Webページの読み込み完了に関するイベントも重要だ。「DOMContentLoaded」は、HTMLが完全に読み込まれ、解析が完了し、ページの構造が利用可能になった時点で発生し、すぐにDOM操作を行いたい場合に使う。「load」イベントは、HTMLだけでなく、ページ内のすべての画像、CSS、JavaScriptファイルなどが完全に読み込まれて表示準備が整ったときに発生する。これは、ページ全体の表示が完了したことを確認したい場合に適している。最後に、「unhandledrejection」は、JavaScriptの非同期処理（Promise）で発生したエラーが、どこにも捕らえられずに処理されなかった場合に発生し、見落としがちなエラーを検出しアプリケーションの安定性向上に役立つ。

次に、「ウィンドウとドキュメントのイベント」について見ていこう。「resize」イベントは、ブラウザウィンドウのサイズが変更されたときに発生し、ウィンドウの大きさに応じてウェブサイトのレイアウトを調整するレスポンシブデザインの制御に利用できる。「scrollend」イベントは、ユーザーがスクロール操作を完全に停止したときに発生し、スクロール中にパフォーマンスが低下するような重い処理を、スクロールが止まってから実行するのに便利だ。

「fullscreenchange」イベントは、ウェブページが全画面表示モードに入ったり出たりしたときに発生し、動画プレイヤーなどでUIを調整するのに役立つ。モバイルデバイス特有のイベントとしては、「deviceorientation」と「devicemotion」がある。これらはそれぞれ、デバイスが空間内でどのように傾いているかや、どのように動いているかを検知でき、ゲームやARアプリケーションでスマートフォンの動きを操作入力として使う際に有用だ。また、「orientationchange」は、デバイスの画面が縦向きと横向きの間で切り替わったときに発生する。

ブラウザのストレージに関連するイベントとして、「storage」がある。これは、同じWebサイトの別のタブやウィンドウでlocalStorageやsessionStorageの内容が変更されたときに発生し、複数のタブ間でデータを同期させたい場合に利用できる。印刷に関連するイベントとして、「beforeprint」と「afterprint」がある。これらは、ユーザーがページを印刷しようとした直前や、印刷が完了した直後に発生し、印刷用に特定のスタイルを適用したり、一時的に不要な要素を隠したりするのに使える。

クリップボード操作に関するイベントも存在する。「copy」、「cut」、「paste」は、ユーザーがテキストなどをコピー、カット、ペーストしたときに発生し、クリップボードの内容をカスタマイズしたり、ペーストされたデータを加工したりする高度な機能に利用できる。さらに、「selectionchange」イベントは、ユーザーがページ上のテキスト選択範囲を変更するたびに発生し、選択されたテキストに対して辞書検索機能を提供するのに役立つ。

「入力・ポインターとユーザーエクスペリエンス」に関するイベントも、Webアプリケーションの操作性を高める上で非常に重要だ。「contextmenu」イベントは、ユーザーが要素を右クリックしたときに発生し、独自のカスタムコンテキストメニューを表示させたり、右クリックを無効にしたりできる。「auxclick」は、マウスのメインボタン以外のボタンが押されたときに発生し、より多様なマウス操作に反応するアプリケーションを構築できる。

ゲームなどで活用されるのが「pointerlockchange」イベントだ。これは、マウスカーソルがブラウザウィンドウ内にロックされて非表示になる「ポインターロック」の状態が変更されたときに発生し、一人称視点ゲームのようにマウスの動きだけで視点を操作する場合にカーソルを画面外に出さないようにする。「pointerrawupdate」イベントは、ポインターの生データをリアルタイムで提供し、高精度なマウス入力が必要な場合に利用できる。「wheel」イベントは、マウスホイールが回転されたときに発生し、カスタムのスクロール動作やズーム機能の実装に活用できる。「dblclick」は、ダブルクリック操作を検知するシンプルなイベントだ。

要素にマウスポインターが入ったときと出たときを区別したい場合は、「mouseenter」と「mouseleave」イベントが便利だ。フォームの入力フィールドなどで、要素がフォーカスを取得したときと、フォーカスを失ったときにそれぞれ発生するのが「focusin」と「focusout」イベントで、入力バリデーションやヒント表示に使える。「ドラッグ＆ドロップ」機能は、「dragstart」、「dragend」、「drop」といったイベントで、操作の開始、終了、ドロップされたタイミングをそれぞれ検知でき、ファイルのアップロードやUI要素の並べ替えに利用できる。テキスト入力イベントの「input」は、「inputType」プロパティで入力の種類を判断でき、入力履歴の追跡や特定の入力タイプに対する特別な処理を行うのに役立つ。

次に、「ネットワークと接続性」に関するイベントを見ていこう。「online」と「offline」イベントは、デバイスのネットワーク接続状態がオンラインになったか、オフラインになったかを検知できる。これにより、接続状態に応じてUIを切り替えたり、データを同期したりする機能を実装できる。

「サービスワーカー（Service Worker）」は、オフラインキャッシュやプッシュ通知などの機能を提供する重要な技術だ。「Service Worker fetch」イベントは、サービスワーカーがWebページのネットワークリクエストを傍受し、キャッシュからリソースを返したり、プログラマブルにレスポンスを生成したりする際に使用され、オフライン時でもWebサイトの一部または全体を表示させることを可能にする。「Service Worker push」イベントは、サーバーからプッシュ通知が送られてきたときに、サービスワーカーが通知を受け取り、ユーザーに表示する処理を実行する。

PWAのインストールに関連するイベントとしては、「beforeinstallprompt」と「appinstalled」がある。前者はPWAをホーム画面に追加するプロンプトが表示される直前に発生し、開発者が独自のインストールUIを提供できる。後者はPWAがユーザーによって正常にインストールされたときに発生し、インストール後のユーザー体験を最適化するのに役立つ。

デバイスのネットワーク接続の種類が変更されたときに発生する「connectionchange」イベントも有用だ。ネットワークの速度や安定性が変わったことを検知し、帯域幅が低い場合に高画質コンテンツの読み込みを一時停止するといった対応ができる。リアルタイム通信によく使われる「WebSocket」にもイベントがある。「WebSocket onclose」はWebSocket接続が切断されたときに発生し、「WebSocket onerror」は接続中にエラーが発生したときに発生し、接続の再確立やエラー通知に利用できる。

サービスワーカーがバックグラウンドで大きなファイルをダウンロードする「バックグラウンドフェッチ」が成功した際に発生する「Service Worker backgroundfetchsuccess」イベントも存在する。これは、ユーザーがWebページを離れていても、アプリがバックグラウンドでデータを取得し続けることを可能にする。「navigator.sendBeacon」APIは、ページが閉じられる直前など、従来のAjaxリクエストでは信頼性が低い状況でも、少量のデータをサーバーに確実に送信するための仕組みで、ページ離脱時のアナリティクスデータ送信などに利用される。

最後に、「メディアとデバイスのAPI」を見ていこう。これらは、Webページで動画や音声などのメディアを扱ったり、接続されたデバイスと連携したりするための強力な機能を提供する。「canplay」は、メディアが十分にバッファリングされ、再生を開始できる状態になったときに発生する。「canplaythrough」はさらに進んで、メディアが途切れることなく最後まで再生できるほど十分にバッファリングされたときに発生し、ユーザーにスムーズなメディア体験を提供するために、再生ボタンを有効にするタイミングなどを制御するのに役立つ。

メディアの再生が終了したときに発生する「ended」イベントは、次の動画を自動再生したり、再生終了後の関連コンテンツを表示したりするのに使える。「timeupdate」イベントは、メディアの現在の再生位置が継続的に更新されるたびに発生し、プログレスバーをリアルタイムで更新したり、特定の再生時間に到達したときに字幕を表示したりする機能に利用できる。もしメディアのバッファリングが不足して再生が一時停止した場合は、「waiting」イベントが発生し、ユーザーに読み込み中であることを示すUIを表示するのに利用できる。

音声認識や音声合成に関連するAPIにもイベントがある。「speechstart」と「speechend」は、音声認識のプロセスが開始されたときと終了したときにそれぞれ発生し、音声入力中にユーザーに視覚的なフィードバックを提供できる。「voiceschanged」イベントは、音声合成で利用可能な音声リストが変更されたときに発生し、利用可能な言語や声の選択肢を動的に更新できる。

ゲーム開発者にとっては、「gamepadconnected」と「gamepaddisconnected」イベントが非常に興味深いだろう。これらは、ゲームパッドがデバイスに接続されたときと切断されたときに発生し、Webベースのゲームでゲームパッドを使った操作をサポートするために不可欠なイベントだ。そして、IoTとの連携においては、「bluetoothavailabilitychanged」イベントが重要になる。これは、デバイスのBluetoothの利用可能性が変更されたときに発生し、WebアプリケーションからBluetoothデバイスとの連携機能を提供する際に、Bluetoothが利用できる状態であるかを確認するのに役立つ。

これらの「隠れた」イベントやAPIは、一見すると複雑に思えるかもしれないが、これらを理解し使いこなすことで、一般的なWeb開発では実現が難しい、高度で洗練されたWebアプリケーションを構築するための「スーパーパワー」を手に入れることができる。オフラインでも動作するPWAの構築、ブラウザのバックフォワードキャッシュを意識したスムーズなページ遷移、ゲームパッドやデバイスセンサーといったシステムレベルのイベントの活用、クリップボード操作や印刷、全画面表示、デバイスの向き変更といったユーザー体験を向上させる機能の実装など、可能性は無限大だ。これらは、Web開発の奥深さを知るための貴重な知識となるだろう。