JavaScriptで簡単なUIを作ってみよう | JavaScript基礎

これまでに学んだ変数、条件分岐、関数、DOM操作、イベントを組み合わせ、開閉メニューを作ります。最後にタブやモーダルへ応用する考え方も確認します。

今回使用するファイル構成

javascript-practice/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js

開閉メニューのHTMLを作る

<button
  id="menu-button"
  type="button"
  aria-expanded="false"
  aria-controls="global-menu"
>
  メニューを開く
</button>

<nav id="global-menu" hidden>
  <a href="/">トップ</a>
  <a href="/buildbooks">BuildBooks</a>
</nav>

aria-expandedは開閉状態、aria-controlsは操作対象を支援技術へ伝えます。非表示の初期状態はhidden属性で表します。

CSSで見た目を整える

#global-menu {
  padding: 16px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
}

#global-menu a {
  display: block;
  padding: 8px;
}

表示・非表示そのものはhidden属性へ任せ、CSSは表示されたメニューの見た目を担当します。

JavaScriptで状態を切り替える

const menuButton = document.querySelector('#menu-button');
const menu = document.querySelector('#global-menu');

function setMenuOpen(isOpen) {
  menu.hidden = !isOpen;
  menuButton.setAttribute('aria-expanded', String(isOpen));
  menuButton.textContent = isOpen ? 'メニューを閉じる' : 'メニューを開く';
}

menuButton.addEventListener('click', () => {
  const isOpen = menuButton.getAttribute('aria-expanded') === 'true';
  setMenuOpen(!isOpen);
});

処理を分けて読む

このコードは次の役割に分かれています。

操作するボタンとメニューを取得する
setMenuOpen()へ表示更新をまとめる
クリック時に現在の状態を確認する
反対の状態へ切り替える

表示だけでなく、ボタンの文章とaria-expandedも同じ状態に合わせることが重要です。

タブやモーダルへ応用する

タブの場合

タブでは「どのタブが選択中か」を状態として管理し、対応するパネルだけを表示します。複数のボタンを扱うため、配列とforEach()の知識が役立ちます。

モーダルの場合

モーダルでは開閉に加えて、フォーカス移動、Escapeキー、背景部分の操作制限なども必要です。見た目だけを重ねて完成とせず、キーボード操作とアクセシビリティを考慮します。

複雑なUIでは、十分に検証されたライブラリやフレームワークを選ぶ判断も必要です。

DevToolsで動作を確認する

次の点を確認してください。

クリックするたびにメニューが開閉する
ボタンの文章が状態に合っている
aria-expandedがtrueとfalseで切り替わる
Consoleにエラーがない
キーボードのTabキーでもボタンを操作できる

まとめ

UIは、状態、表示更新、イベントを分けて考えると整理しやすくなります。Vanilla JavaScriptで仕組みを理解しておくと、Alpine.js、Vue.js、Reactなどを学ぶときにも、それぞれが何を簡略化しているのか判断できます。