JavaScriptにおけるブラウザ操作と実行モデルの基礎

ブラウザオブジェクトモデル（BOM）の概要

BOMはブラウザのウィンドウ構造全体を制御するためのAPIコレクションです。windowオブジェクトがグローバルスコープの頂点に位置し、標準組み込み関数やDOM関連プロパティはこの配下に展開されます。グローバルスコープ内で宣言された変数および関数は自動的にwindowのメンバーへと昇格するため、実装時はプレフィクスを省略して直接呼び出すことが標準的です。

非同期タイマーの実装

コードの実行を指定ミリ秒だけ遅延させたい場合、setTimeoutメソッドが使用されます。一度限りの遅延実行向けであり、通常はwindow.接頭辞を記載しません。中止が必要な場合は対応する解除関数を実行します。

const delayId = setTimeout(() => {
  console.log('遅延処理が完了しました');
}, 3000);

// タスクが必要なくなった場合は明示的にキャンセル
clearTimeout(delayId);

シングルスレッドとイベントループ機構

JavaScriptエンジンは単一スレッドアーキテクチャを採用しています。この設計は主にDOM操作のステートマシン状態を保ち、レンダリング競合を防ぐ目的で作られました。ただし、長時間の計算タスクが主スレッドを占有するとUIレスポンスが停止するため、HTML5規格ではWeb Workerによる並列処理および非同期タスクの分離が進められました。

標準的な処理フローは以下の順序で進行します：

通常の同期タスクは実行文スタックに積まれ、LIFO規則に基づいて逐次完了まで処理されます。
イベントハンドラー（ユーザー操作やリサイズ）、ネットワーク通信、計測器タスクなどはコールバックキューへ移送されます。
スタックが空になった時点でエンジンがキューから次のタスクを取得し、メインスレッド上で実行に移します。この継続的な循環構造をイベントループと呼称します。

主要なブラウザ情報オブジェクト

locationオブジェクト

現在のページアドレスを構成要素ごとに分解して保持します。プロパティへの直接代入による遷移制御やクエリ情報の抽出に活用されます。

// 完全なURLパスの取得
console.log(location.href);
// クエリパラメータ部分（?より右側）の抽出
console.log(location.search);
// フラグメント識別子（#より右側）の参照
console.log(location.hash);

// 標準的なページ再読み込み
location.reload();

navigatorオブジェクト

ホスト環境のブラウザタイプ、バージョン番号、OS種類といったシステム情報を記録しています。ユーザーエージェント文字列を検証することで、ターゲットデバイスに応じた分岐ロジックを組むケースが多々あります。

(function detectDevice() {
  const deviceInfo = navigator.userAgent.toLowerCase();
  const isTabletOrPhone = /android|iphone/.test(deviceInfo);
  
  if (isTabletOrPhone) {
    location.href = 'https://mobile.example.org';
  }
})();

historyオブジェクト

ブラウザのナビゲーション履歴を管理します。前後のページ移動やステップ数ベースのジャンプをサポートします。

// 一つ前の閲覧ページへ戻る
history.back();
// 前方の画面へ3ステージ進める
history.go(3);

クライアントサイドストレージ

ユーザローカルのディスク領域を直接使用できるデータ永続化機構としてlocalStorageとsessionStorageが提供されます。上限容量は環境依存しますが概ね5MB規模を想定しており、いずれもキーバリュー形式でデータを格納します。

localStorageの特徴

ブラウザセッション終了後もデータが残存します。同一_origin_に登録された全タブ間でデータが共有されます。

// キーバリューの登録
localStorage.setItem('appTheme', 'dark-mode');
// バリューの取得
const currentTheme = localStorage.getItem('appTheme');
// 特定キーの削除
localStorage.removeItem('appTheme');

sessionStorageの特徴

オープンしているタブウィンドウの有効期間中のみデータが保持されます。ウィンドウが閉鎖されると自動で破棄されます。操作インターフェースはlocalStorageと同様です。

複合データ型のシリアライズ

ストレージAPIは文字列型のみ許容しているため、オブジェクトや配列を格納する際にはJSON形式への変換処理が必須となります。

// 保存前にオブジェクトを文字列化
const apiSettings = { baseUrl: 'https://api.dev', timeout: 5000 };
localStorage.setItem('networkConfig', JSON.stringify(apiSettings));

// 読み取り時に逆変換して復元
const restoredConfig = JSON.parse(localStorage.getItem('networkConfig'));

配列処理と文字列結合の最適化

多数の要素を連続的に連結する際、传统的なプラス演算子の反復結合よりもArray.prototype.join()を用いる方がメモリ割り当て効率が高く、推奨されます。要素の変換にはmapを活用します。

const baseCategories = ['electronics', 'furniture', 'clothing'];

// 各アイテムにサフィックスを追加した新しい配列を生成
const modifiedList = baseCategories.map((val) => `${val}_list`);

// 空白文字で区切って単一の文字列に統合
const flatString = modifiedList.join(' ');
console.log(flatString); // electronics_list furniture_list clothing_list

正規表現のパターン構築

文字列内の特定フォーマットを対象とした検索・フィルタリング・置換を行うためのパターンマッチングエンジンです。JavaScriptではRegExpインスタンスとして提供されます。

基本構文と判定方法

// リテラル表記による定義
const idValidator = /^U-\d{5}$/;
const exists = idValidator.test('U-92810'); // trueを返す

// execは一致部分とキャプチャグループを含む配列を返却
const extractDate = '更新日：2023-11-05'.match(/(\d{4})-(\d{2})-(\d{2})/);

重要なマッチング規則

境界指定：^は行頭、$は行尾を意味し、厳密な位置制約に用いられます。
繰り返し演算子：*（ゼロ回以上）、+（一回以上）、?（オプション）、{n}（固定回数）、{n,m}（範囲回数）。カンマの周囲に空白を入れるとパターン認識に影響するため避けます。
集合定義：[abc]は括弧内いずれかの一致を示します。[a-z]による範囲指定や[^0-9]による否定分類も有効です。既知のカテゴリ縮小形として\d（数字）、\w（単語構成文字）、\s（空白類）が定義されています。
動作フラグ：/pattern/iで英大文字小文字を同等扱いにし、/pattern/gで対象フィールド全体を網羅的に走査します。

動的置換処理

既存のテキストフィールドに対して条件に合致する部分を自動加工します。

let reportBody = '警告_01と警告_02が発生しました。また警告_03も見つかりました。';

// gフラグ未指定の場合、最初にヒットした部分のみ変更
let partialChange = reportBody.replace(/警告_\d+/, '注意');

// gフラグを併記すれば全一致箇所を同時に書き換え
const totalReplace = reportBody.replace(/警告_\d+/g, '通知');

タグ: BOM WindowObject EventLoop localstorage sessionstorage

7月7日 17:01 投稿

異端開発室