JavaScriptで画面はどう動く？｜イベント・データ取得・ブラウザ拡張の入口

ボタンを押すと「送信中」に変わり、しばらくして結果が出る。この動きは何が担っているのでしょうか。前回はHTMLとCSSで画面の構造と見た目を整理しました。今回は同じ架空の予約希望フォームで、JavaScriptの役割を見ていきます。

院長・スタッフ向けの技術基礎解説です。患者番号「00123」や希望日時は説明用の架空例で、実際の患者情報・院内画面は使っていません。特定製品の実装・動作確認報告ではありません。

1．イベントは、処理を始めるきっかけ

ブラウザでは、クリック、入力、フォームの送信などの出来事を「イベント」として扱います。JavaScriptで、その出来事に応じて実行する処理を登録できます。たとえば、希望日時が空なら案内を表示し、送信を待つ、といった動きです（MDN：イベント入門）。

ただし、「クリックを受け取った」と「保存できた」は別です。ボタンの文字を変えるだけの処理もあります。HTMLの標準機能でもフォームは送信できるので、すべての送信にJavaScriptが必要という意味でもありません。

架空フォームの動きの一例
① 送信操作を受け取る
↓
② 入力内容を確認する
↓
③ サーバーへ要求を送る
↓
④ 返された状態・内容を確かめる
↓
⑤ 確認できた結果を画面に表示する
静的な説明図です。この図から入力・通信・保存は行いません。

MDN「Introduction to events」「Using the Fetch API」を基にした独自の説明例。2026年10月26日確認。

JavaScriptから通信する仕組みの一つがfetch()です。サーバーへ要求を送り、返ってきた応答の状態や内容を読み取ります。たとえば候補日時を取得し、ページ全体を開き直さず候補欄を更新する、といった使い方が考えられます。これは説明上の設計例で、医院での実装済み機能ではありません。

注意したいのは、応答が返ってきても内容の確認が必要な点です。fetch()は、404などのHTTPエラー応答でも、それだけで通信処理の例外になるわけではありません。プログラム側で状態を確かめます（MDN：Fetch API）。

さらに、HTTPの202 Acceptedは処理を受け付けた状態で、処理完了を意味しません。予約希望の保存や予約枠の確定は、システムが返す結果の意味に沿って確認します。「通信できたから保存済み」と表示してしまわないことが大切です（MDN：202 Accepted）。

この例の「00123」は、計算する数値ではなく照合用の文字列です。入力・送信・保存先まで先頭ゼロを保つ設計にします。番号へ置き換えるだけでは匿名化にはなりません。

表は独自の確認例です。通信が途切れた場合の考え方は第7回のブラウザ基礎も参照してください。画面の動きだけでなく、何をもって完了とするかを担当者と開発者で共有します。

ブラウザ拡張は、ブラウザに機能を追加する仕組みです。Chromeでは、対象ページ内で動く「コンテンツスクリプト」が、ページの内容を読み取ったり表示を変えたりできます。必要な機能やアクセス先は、拡張の権限設定に関係します。

Chrome公式は、使うAPIとサイトに権限を絞るよう案内しています。「何のために、どのサイトの何を扱うか」を確認し、不要に広いアクセスを求めない設計が基本です。拡張を入れたこと自体は、業務システムの操作権限や保存結果を保証しません。番号・対象・出力内容の照合は、人が確認できるようにします。

次回は10月28日、WEBアポ連動プロジェクトの実例に進みます。コンサル後の見積書作成を起点に、医院の料金体系に合わせた実装とベータテスト、改善の経緯を扱います。

MDN Web Docs：本文中の「Introduction to events」「Using the Fetch API」「202 Accepted」。
Chrome for Developers「Content scripts」「Declare permissions」「Stay secure：Request minimal permissions」。

いずれも2026年10月26日に本文を確認。図表は仕組みを説明する独自の架空例です。本記事はAIの作成支援を利用しています。公開後に運営者が確認し、必要に応じて追記・修正します。