🔰

今さら聞けないhtml＋JavaScript入門～divタグの基礎中の基礎～

2025/01/29に公開

HTML

JavaScript

tech

4月からWeb開発をする予定ですが、
htmlについて知識がぼんやりとしています。

こんにちは、
ワニかず@40歳出戻りエンジニアです。

ということで、今回は、
こんな感じのカレンダーを

HTMLのdivタグに
JavaScriptを使って

表示する例を見ながら、

divタグとclass/idの仕組み
JavaScriptの動き
HTML読み込み～カレンダー表示までの流れ

を説明していこうと思います。

具体例

html(説明に必要な部分だけ抜粋)

<div class="calendar-container">
    <div id="calendar"></div>
</div>

<script src="calendar.js"></script>

divタグとは？

divは「区切り」や「区分け」を意味する"division"の略です。
Webページの中で、内容をグループ化するための「箱」のようなもの

`class`と`id`の違い

class（クラス）

複数の要素に同じクラス名を付けることができます
CSSでデザインを適用する時によく使います
例えば：

<div class="box">内容1</div>
<div class="box">内容2</div>

この場合、両方のdivに同じデザインを適用できます

id（アイディー）

一意の識別子で、ページ内で同じid名は1つしか使えません
特定の要素を JavaScript で操作したい時によく使います
例えば：

<div id="main-content">メインの内容</div>

このように、classはデザインの共有、idは要素の個別識別に使われることが多いです。これらは、HTMLの要素に「名札」や「ラベル」を付けるようなものだと考えるとわかりやすいかもしれません。

先ほどのカレンダーの例に戻ると

html

<div class="calendar-container"> <!-- カレンダー全体を囲む箱 -->
    <div id="calendar"></div>    <!-- カレンダー本体が表示される場所 -->
</div>

このコードは、Webページ上にカレンダーを表示するための基本的なHTML構造を定義しています。

<div class="calendar-container">

これは外側の「コンテナ」となるdiv要素です
calendar-containerというクラスが付けられており、これによってCSSでスタイリングできるようになっています
カレンダー全体を囲む「箱」のような役割を果たします

<div id="calendar"></div>

これは実際にカレンダーが表示される場所を指定するdiv要素です
id="calendar"が付いていることで、JavaScriptからこの要素を特定して操作できます
多くのカレンダーライブラリは、このような特定のidを持つ要素にカレンダーを生成します

最後の</div>は、外側のコンテナを閉じるためのタグです

ブラウザがHTMLを読み込む流れ

次に、ブラウザが以下のHTMLを処理する流れを
カレンダーの表示に着目して見ていきましょう。

html

<div class="calendar-container">
    <div id="calendar"></div>
</div>

<script src="calendar.js"></script>

ブラウザがHTMLを読み込む

HTMLを上から順に解析していきます

<div id="calendar"></div>を見つける

この時点では空の要素として認識されます
メモリ上にDOM要素として保存されます

<script src="calendar.js"></script>を見つける

ブラウザはJavaScriptファイルをダウンロードして実行します

JavaScriptの実行

ブラウザがダウンロードしたcalendar.jsが
以下のソースだったと仮定します。

calendar.js

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const modal = document.getElementById('eventModal');
    
    // FullCalendarの初期化
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        locale: 'ja',
        events: '/api/events/',
        eventClick: function(info) {
            // イベントクリック時の処理
            document.getElementById('eventTitle').textContent = info.event.title;
            document.getElementById('eventDescription').textContent = 
                info.event.extendedProps.description || '説明なし';
            document.getElementById('eventStart').textContent = 
                new Date(info.event.start).toLocaleString();
            document.getElementById('eventEnd').textContent = 
                new Date(info.event.end).toLocaleString();
            
            modal.style.display = 'block';
        }
    });
    
    calendar.render();
    
    // モーダルを閉じる処理
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
    
    // エラーハンドリング
    function handleError(error) {
        console.error('エラーが発生しました:', error);
        // ユーザーへのエラー表示処理を追加
    }
});

ゴチャっとしてて、（私みたいな）初心者の方は
「ゲッ」と思ったかもしれませんが、
全体の流れをつかむ部分だけ見ていきましょう。
プログラムを見るときは、大まかな流れを見る、というのが重要です。

このJavaScriptで、大きな骨格の一つは

calendar.js

document.addEventListener('DOMContentLoaded', function() {
    // 実行したい処理
});

という部分で、
document.addEventListenerの第一引数に'DOMContentLoaded'を指定していることで、
ブラウザがHTMLの読み込み完了時に
「第二引数に指定した関数」が実行する、という形になっています。

HTMLの読み込み完了後

calendar.js

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    ...

document.addEventListenerの第二引数に指定した関数の処理に移ります
その中に「const calendarEl = document.getElementById('calendar');」という処理があります
getElementById('calendar')で、ブラウザがメモリに保存した
html
```
<div id="calendar"></div>
```
という、空のdiv要素を参照します
取得した要素への参照がcalendarEl変数に保存されます

カレンダーオブジェクトを作成

calendar.js

new FullCalendar.Calendar(calendarEl, {...})

でcalendarElという参照先にカレンダーオブジェクトを作成
4.

calendar.js

calendar.render()

で実際の表示処理が行われる

具体例

divタグとは？

classとidの違い

ブラウザがHTMLを読み込む流れ

JavaScriptの実行

Discussion

`class`と`id`の違い