jQuery｜2章：基本的なUI実装

前の章に戻る次の章に進む

2章：基本的なUI実装

サンプルコード
本教材で使用するzipファイルです。ダウンロード済みの方は不要です。
zipファイル

サンプルコードの使い方

materials
- materialsフォルダには、教材内で解説しているサンプルコードが含まれています。
- 例えば、「【2-1】トグルメニューの実装」を学ぶ際は、02-1_toggle-menuフォルダ内のコードを確認しながら進めてください。
- ※ 【1-1】、【1-2】に関してはサンプルコードはありません。
exercises
- exercisesフォルダには、各章末の演習課題に取り組むためのコードが用意されています。
- 演習に取り組む際は、XX_start フォルダ内のコードを使って作業を始めましょう。
- 作業後に答え合わせをする場合は、XX_end フォルダ内の解答例コードを参照してください。

この章では、jQueryを使った基本的なUIの実装方法を学びます。

具体的には、
===

トグルメニュー（クリックで開閉するメニュー）
タブ切り替え（複数のコンテンツをタブで管理）
アラートボックス（ボタンを押すと表示されるメッセージ）

===
を作成し、それぞれのHTML、CSS、jQueryでの実装方法を解説します。

【2-1】トグルメニューの実装

トグルメニューとは、クリックで開閉するメニューのことを指します。

今回は、メニューボタンをクリックした際に、ホーム・サービス・お問い合わせのメニューが開閉する動きを実装します。

HTML/CSS構造

ナビゲーションメニューのHTMLを作成する

<nav>
    <button id="toggle-btn">メニュー</button>
    <ul id="menu" class="hidden">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

サンプルコード

メニューボタン ( button ) とメニューリスト ( ul ) を定義。
初期状態では、メニューリストに class="hidden" を適用して非表示にする。

CSSを使用して、メニューのスタイルを整える

.hidden {
    display: none;
}
nav {
    background: #333;
    padding: 10px;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav li {
    padding: 10px;
    background: #444;
    margin: 5px 0;
}
nav a {
    color: white;
    text-decoration: none;
}

サンプルコード

.hidden はデフォルトで非表示（display: none;）に

jQueryの実装

jQueryを使用してクリック時にメニューを開閉する機能を実装する

#該当コードのみ記載

$(document).ready(function() {
    $("#toggle-btn").click(function() {
        $("#menu").toggle();
    });
});

サンプルコード

処理の流れ

初期状態：ページが読み込まれると、メニューはCSSによって非表示になっています（display: none;）。
イベント監視：jQueryは、#toggle-btn（メニューボタン）のクリックイベントを監視します。
クリックイベント発生：
- ユーザーがメニューボタンをクリックすると、以下の処理が実行されます。
- #menu（メニューリスト）の表示状態が.toggle()メソッドによって切り替えられます。
- もしメニューが非表示なら表示され、表示されていれば非表示になります。
結果：メニューの表示・非表示が切り替わり、ユーザーはメニュー項目にアクセスできるようになります。

コード	各コードの機能
`$(document).ready(function() {...})`	ページの読み込みが完了したら、スクリプトを実行
`$("#toggle-btn").click(function() {...})`	ボタンがクリックされたときに処理を実行
`$("#menu").toggle();`	メニューの表示/非表示を切り替える

.toggle()メソッドについて
.toggle() は、要素の display プロパティを none とそれ以外の値の間で切り替えるメソッドです。
要素が非表示の場合（display: none;）、.toggle() はその要素を表示します。要素が表示されている場合、.toggle() はその要素を非表示にします。

【2-2】タブ切り替えの実装

タブ切り替えとは、複数コンテンツをタブで管理することを指します。

今回は、タブをクリックした際に、各タブに対応したコンテンツを表示する動きを実装します。

HTML/CSS構造

タブとコンテンツのHTMLを作成する

<div class="tabs">
    <ul>
        <li class="tab active" data-tab="1">タブ1</li>
        <li class="tab" data-tab="2">タブ2</li>
        <li class="tab" data-tab="3">タブ3</li>
    </ul>
    <div class="content active" id="tab-1">コンテンツ1</div>
    <div class="content" id="tab-2">コンテンツ2</div>
    <div class="content" id="tab-3">コンテンツ3</div>
</div>

サンプルコード

<ul>の中にタブ（<li class="tab">）を配置します。
data-tab属性を使い、各タブに一意の識別子を割り当てます。
<div class="content">によって、各タブに対応するコンテンツを配置します。
最初に表示するタブにはclass="active"を付与しておきます。

CSSを使用して、タブのデザインを整える

.tabs ul {
    display: flex;
    list-style: none;
}
.tab {
    padding: 10px;
    cursor: pointer;
    background: lightgray;
}
.tab.active {
    background: gray;
    color: white;
}
.content {
    display: none;
    padding: 10px;
    border: 1px solid #ddd;
}
.content.active {
    display: block;
}

サンプルコード

.contentはデフォルトで非表示（display: none;）に。
.content.activeで、選択されたタブに対応するコンテンツを表示。

jQueryの実装

#該当コードのみ記載

$(document).ready(function() {
    $(".tab").click(function() {
        let tabId = $(this).data("tab");

        $(".tab").removeClass("active");
        $(this).addClass("active");

        $(".content").removeClass("active");
        $("#tab-" + tabId).addClass("active");
    });
});

サンプルコード

処理の流れ

初期状態：
- ページが読み込まれると、最初のタブとコンテンツがCSSによって表示されています（class="active"）。他のタブとコンテンツは非表示になっています。
イベント監視：
- jQueryは、.tab（タブ）のクリックイベントを監視します。
クリックイベント発生：
- ユーザーがタブをクリックすると、以下の処理が実行されます。
- すべてのタブからactiveクラスが削除されます。
- クリックされたタブにactiveクラスが付与されます。
- すべてのコンテンツからactiveクラスが削除されます。
- クリックされたタブに対応するコンテンツにactiveクラスが付与されます。
結果：
- クリックされたタブと対応するコンテンツが表示され、他のタブとコンテンツが非表示になります。

コード	各コードの機能
`$(document).ready(function() {...})`	ページの読み込みが完了したら、スクリプトを実行
`$(".tab").click(function() {...})`	`.tab` クラスを持つタブがクリックされたときの処理を指定
`let tabId = $(this).data("tab");`	クリックされたタブの `data-tab` の値を取得
`$(".tab").removeClass("active");`	すべてのタブから `active` クラスを削除
`$(this).addClass("active");`	クリックしたタブに `active` クラスを追加
`$(".content").removeClass("active");`	すべてのコンテンツから `active` クラスを削除
`$("#tab-" + tabId).addClass("active");`	対応するコンテンツに `active` クラスを追加し、表示

$(this)　について
$(this) は、jQueryのコードでよく使用される表現で、現在のコンテキストにおける要素を指します。
イベントハンドラ（例：.click()）内で使用される場合、$(this) はイベントをトリガーした要素を指します。
上記の例では、クリックされたタブ要素を指します。

【2-3】アラートボックスの実装

アラートボックスとは、ボタンを押すと表示される注意メッセージのことを指します。
今回は、アラートボタンをクリックした際に、アラートメッセージを表示する動きを実装します。

HTML/CSS構造

アラートボタンと表示のHTMLを作成する

<button id="show-alert">アラートを表示</button>
<div id="alert-box" class="alert hidden">これはカスタムアラートです！</div>

サンプルコード

<button>を作成し、アラートを表示するトリガーとする。
<div>をアラートボックスとして作成し、最初はclass="hidden"により非表示にしておく。

CSSでアラートボックスのデザインを設定

.alert {
    background: red;
    color: white;
    padding: 10px;
    margin-top: 10px;
    display: none;
}

サンプルコード

.alertクラスで、背景を赤・文字を白に設定し、ユーザーに強調して伝わるデザインに。
display: none;で初期状態は非表示に設定。
padding: 10px;で余白をつけて読みやすく。
margin-top: 10px;で他要素との間にスペースを確保。

jQueryの実装

#該当コードのみ記載
$(document).ready(function() {
    $("#show-alert").click(function() {
        $("#alert-box").fadeIn().delay(2000).fadeOut();
    });
})

サンプルコード

処理の流れ

初期状態：
ページ読み込み時、アラートボックス（#alert-box）は CSSのdisplay: none;によって非表示になっています。
イベント監視：
jQueryは#show-alert（アラート表示ボタン）のクリックイベントを監視します。
クリックイベント発生：
- ユーザーがボタンをクリックすると処理が始まります。
- #alert-boxが.fadeIn()メソッドでフェードイン表示されます。
- .delay(2000)によって2秒間そのまま表示されます。
- 続いて.fadeOut()でフェードアウトし、再び非表示になります。
結果：
アラートメッセージが表示され、2秒後に自動で消えるシンプルなアニメーションが実現されます。

コード	各コードの機能
`$(document).ready(function() {...})`	ページが完全に読み込まれた後に実行
`$("#show-alert").click(function() {...})`	ボタンがクリックされたときの処理を定義
`$("#alert-box").fadeIn()`	`.fadeIn()` を使用し、アラートボックスをフェードイン（徐々に表示）
`.delay(2000)`	2000ミリ秒（2秒）間アラートを表示したままにする
`.fadeOut()`	フェードアウトしてアラートを消す

.fadeIn()について
.fadeIn() は、要素の表示をアニメーションで制御するための便利なメソッドです。
要素をフェードインで表示します。引数を省略した場合、デフォルトの速度（400ミリ秒）で表示が行われます。

【2-4】演習課題

演習課題01：タブ切り替え時のアラート表示

演習課題01

演習課題の詳細

課題概要
- タブを切り替えたときに、ユーザーに対してアラートを表示する機能を実装します。アラートは視認性の高いデザインにカスタマイズしてください。
要件（実装する内容）
- タブ切り替え機能の実装
- アラート表示は .fadeIn() / .fadeOut() を活用してアニメーションする
- アラートの見た目をCSSでカスタマイズする（色・サイズ・配置など）
自由部分（設定自由な内容）
- アラートの表示位置や色、フォントサイズは自由にカスタマイズして、視認性を高めてください。
- 必要に応じて、アラートの表示時間やディレイも調整できます。
ヒント
- タブのクリックイベントには .click() を使う
- jQueryのアニメーション関数を活用してスムーズな表示/非表示を実現する
- 必要に応じて .addClass() / .removeClass() を使ってスタイルを調整する

途中で躓いたら、教材を振り返りながら進めてみましょう。
解き終わったら、01_endフォルダ内の解答例と見比べて、自分の実装を確認してみましょう。

演習課題02：トグルメニューの拡張

演習課題02

演習課題の詳細

課題概要
- トグルメニューの開閉時に滑らかな動きをつけ、ユーザーに視覚的に分かりやすくするための機能を実装します。
要件（実装する内容）
- トグルメニューにアニメーション効果を追加
- .slideToggle() を使用して開閉時に滑らかな動きを実現
自由部分（設定自由な内容）
- トグルメニューの開閉時のアニメーション速度や動き方（例えば、時間指定やイージングの選択）は自由に変更できます。
- メニューが開閉される際の視認性を向上させるために、背景色やアニメーション効果のカスタマイズが可能です。
ヒント
- .slideToggle() を使用して開閉時にスムーズなアニメーションを追加
- トグルボタンを押したときのイベントに関しては、.click() を使用

途中で躓いたら、教材を振り返りながら進めてみましょう。
解き終わったら、02_endフォルダ内の解答例と見比べて、自分の実装を確認してみましょう。

この章では、jQueryを用いた基本的なUIの実装方法を学びました。
次の章では、より実践的なメニュー系UI実装に進みます！

前の章に戻る次の章に進む