12. JavaScript の仕組み

12.1 main.js の役割

main.js は、ページの読み込み後にタブやボタンを動かすためのスクリプトです。 DOM（HTML の部品）を取得し、クリックイベントに処理を割り当てます。

12.2 データの読み込み

fetch API を使って JSON ファイルを読み込み、ダンジョンリストを作成します。Promise の仕組みが分からない場合は、 まずは async/await の基本を学んでから触ると理解しやすいです。

12.3 よく使う関数

• renderWorldButtons()：世界のボタンを作成。
• renderDungeonDetails()：選択したダンジョンの情報をカードに表示。
• setupTabs()：タブ切り替えの動きを初期化。

12.4 コードを読む順番

1. main.js の冒頭で定義されている定数を確認。
2. イベントリスナーの登録部分を読む。
3. 呼び出されている関数の中身を追っていく。

12.5 デバッグのヒント

• console.log() を使って変数の中身を確認する。
• ブレークポイントを設定して処理の流れを追跡する。
• Lint ツールを導入するとコードのミスを早期に発見できます。