JavaScriptのブラウザAPIを活用する際、まず重視すべきは不変性の確保——つまり、値が再代入されないことを保証するため、constによる宣言を基本とします。これは単なるスタイルガイドではなく、意図しない状態変更を防ぐ重要な設計原則です。

DOM：文書オブジェクトモデルの本質

DOM（Document Object Model）は、HTML構造をJavaScriptから操作可能な階層化されたオブジェクトツリーとして表現する仕組みです。各HTML要素（例：<img>、<p>）は、対応するDOMオブジェクトにマッピングされ、プロパティやメソッドを通じて動的に制御できます。

要素の取得：セレクタ駆動型アプローチ

特定のノードを参照するには、CSSセレクタを用いた検索が最も直感的です。

• document.querySelector(selector)：最初に一致した1つの要素を返す
• document.querySelectorAll(selector)：全一致要素をNodeListで返す

属性操作の多様な手法

DOMオブジェクトの属性は、用途に応じて異なる方法で更新します。

基本属性の直接代入

const banner = document.querySelector('#hero-image');
banner.src = '/assets/hero-02.png';
banner.alt = 'メインビジュアル：冬の森';

スタイルの動的制御

• element.style.propertyName：インラインスタイルを個別設定（例：el.style.opacity = '0.8'）
• element.className：クラス名を完全置換（非推奨・制限あり）
• element.classList：推奨されるクラス管理インターフェース（add()、remove()、toggle()、contains()など）

インタラクティブなスライドショーの実装

以下は、自動再生＋手動操作に対応したスライダーの簡潔な実装例です。初期表示・遷移・インジケーター同期を一貫してconstで定義し、状態管理を明示的に行います。

<div id="carousel">
  <div class="carousel-view"><img id="slide-img" src="" alt=""></div>
  <div class="carousel-caption">
    <p id="slide-title"></p>
    <div class="indicators">
      <span data-index="0"></span>
      <span data-index="1"></span>
      <span data-index="2"></span>
      <span data-index="3"></span>
    </div>
  </div>
</div>

const SLIDE_DATA = [
  { src: '/slides/forest.jpg', caption: '静寂の森', bg: '#2a3d2b' },
  { src: '/slides/ocean.jpg',  caption: '青い水平線', bg: '#1e4a6c' },
  { src: '/slides/mountain.jpg', caption: '雪を冠した峰', bg: '#3a3a3a' },
  { src: '/slides/city.jpg', caption: '夜光の街並み', bg: '#5a2e4d' }
];

const $img = document.getElementById('slide-img');
const $title = document.getElementById('slide-title');
const $caption = document.querySelector('.carousel-caption');
const $dots = document.querySelectorAll('.indicators span');

let currentIndex = 0;
const AUTO_INTERVAL = 3000;

// 初期表示
function renderSlide(index) {
  const slide = SLIDE_DATA[index];
  $img.src = slide.src;
  $title.textContent = slide.caption;
  $caption.style.backgroundColor = slide.bg;
  
  // インジケーター更新
  $dots.forEach((dot, i) => {
    dot.classList.toggle('active', i === index);
  });
}

// 自動再生ループ
const autoTimer = setInterval(() => {
  currentIndex = (currentIndex + 1) % SLIDE_DATA.length;
  renderSlide(currentIndex);
}, AUTO_INTERVAL);

// 手動操作（例：ドットクリック）
$dots.forEach((dot, idx) => {
  dot.addEventListener('click', () => {
    currentIndex = idx;
    renderSlide(currentIndex);
  });
});

フォーム入力値の安全な取得

フォーム要素の値は、タグの種類に応じて適切なプロパティを使用します。

• <input>、<textarea>、<select> → .value
• <textarea>の初期内容取得には.defaultValueも利用可能
• チェックボックス／ラジオボタン → .checked（Boolean）
• 無効化制御 → .disabled = true

カスタムデータ属性の活用

HTML側で追加した任意のメタ情報は、data-接頭辞付き属性として定義し、JavaScriptではdatasetプロパティでアクセスします。

<button data-action="navigate" data-target="profile">プロフィールへ</button>

const btn = document.querySelector('button');
console.log(btn.dataset.action);   // "navigate"
console.log(btn.dataset.target);   // "profile"

タイマー制御のベストプラクティス

setInterval()やsetTimeout()は、返り値として固有のIDを返します。このIDを保持しておけば、必要に応じてclearInterval(id)やclearTimeout(id)で確実に停止できます。

特に長期間動作するスライダーや監視機能では、コンポーネント破棄時にタイマーを明示的に解除することが、メモリリーク防止の鍵となります。