IP03-06 ネットワークで広がるWebページ

ライブラリ	できること	どんな場面で使う？
SweetAlert2	きれいなポップアップ表示ができる	確認メッセージ・成功通知・注意表示など
Day.js	日付・時刻を簡単に扱うことができる	今日の日付表示、時間の計算など
Chart.js	グラフを表示することができる	アンケート結果のグラフ化やデータの可視化など

えっ、グラフまで表示できるの？自分で描くのは大変そうだから便利かも。

そうですね。これらをゼロから自作するのはとても大変です。

だからこそ、世界中で使われている安全で便利なライブラリをCDNで利用します。

それでは「SweetAlert2」から体験していきましょう！

1. SweetAlert2を使ってみよう

SweetAlert2 は、きれいなポップアップ画面を簡単に表示できる JavaScript ライブラリです。

ボタンを押したときの通知や、確認メッセージなどによく使われています。

ポップアップ画面はどんなものか知ってますか？

ポップアップって、「OK」を押す小さい画面のことだよね？

そうです。 JavaScriptで、alertを使うとポップアップ画面が表示されます。

まずは、alert を使ってポップアップ画面を表示してみましょう。

ポップアップ画面を表示するHTML「sample2.html」が入っているファイルをダウンロードしましょう。

ファイルはzip形式ですのでダウンロード後、展開してファイルを取り出してください。

ポップアップ確認用HTMLファイルダウンロード

HTMLファイルの内容(テキストエディタで見た場合)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>alert と SweetAlert2 の比較</title>

    <!-- SweetAlert2 を CDN から読み込む -->
   

    <style>
        body {
            font-family: sans-serif;
            background-color: #f5f5f5;
            padding: 30px;
        }

        h1 {
            margin-bottom: 10px;
        }

        .box {
            background-color: #ffffff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>alert と SweetAlert2 の比較</h1>
    <p>
        同じ「お知らせ」でも、表示のされ方がどう変わるか確認してみましょう。
    </p>

    <!-- 普通の alert -->
    <div class="box">
        <h2>① 普通の alert</h2>
        <p>
            JavaScript に最初から用意されている alert です。
        </p>
        <button onclick="normalAlert()">
            普通の alert を表示
        </button>
    </div>

    <!-- SweetAlert2 -->
    <div class="box">
        <h2>② SweetAlert2（CDNを使用）</h2>
        <p>
            CDN から読み込んだライブラリを使ったポップアップです。
        </p>
        <button onclick="sweetAlert()">
            SweetAlert2 を表示
        </button>
    </div>

    <script>
        // 普通の alert
        function normalAlert() {
            alert("こんにちは！\nこれは普通の alert です。");
        }

        // SweetAlert2 ここに記述
        
    </script>

</body>
</html>

ブラウザの表示例

プログラムのポイントは次のとおりです。

・48行目

「<button>タグ」はボタンを表示します。

「onclick="normalAlert()"」はボタンが押されたときの処理を指定します。

今回はボタンが押されたらJavaScriptの「normalAlert()」を呼び出し、実行します。

・64行目～72行目

「<script>タグ～</script>タグ」はJavaScriptを記述するためのタグです。

この範囲内でJavaScriptのプログラムを記述します。

・66行目～68行目

「function normalAlert()」は関数normalAlertを定義しています。

normalAlert関数が呼び出されると、67行目の「alert("こんにちは！\nこれは普通の alert です。");」を実行します。

ボタン押したけど、普通のポップアップ画面がでてきた。

なんか地味だよね。

そうですね。でも、これがノーマルなポップアップ画面です。

では「SweetAlert2」を使ってみましょう。

SweetAlert2を使う場合は次の手順を行います。

作成手順

ステップ1. CDNを使ってJavaScriptライブラリを読み込む
ステップ2. SweetAlert2を利用するプログラムを入力する

それではステップ1から行っていきましょう。

ステップ1 CDNを使ってJavaScriptライブラリを読み込む

JavaScriptをCDNから読み込む場合は、「<script>～</script>」タグの中で記述します。

今回は、「<head>～</head>」タグ内の8行目に挿入しましょう。

挿入する内容

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

linkタグを使わないんですね！

JavaScriptを読み込む場合は、 <script>タグで行います。

間違わないようにしましょう。

ステップ2 SweetAlert2を利用するプログラムを入力する

今回行いたいことは、Webページの「② SweetAlert2（CDNを使用）」の「SweetAlert2を表示」ボタンを押すと、SweetAlert2のポップアップ画面を出すことです。

プログラムではどのようにするか、確認をしましょう。

・59行目

ボタンが押されたらJavaScriptの「sweetAlert()」を呼び出し、実行します。

・64行目～72行目

「<script>タグ～</script>タグ」はJavaScriptを記述するためのタグです。

この範囲内でjavaScriptのプログラムを記述します。

・71行目～

59行目で「sweetAlert()」を呼び出していますが、 <script>～</script>の中にはありません。

そこで、71行目にsweetAlert()関数を作成します。

71行目に次のプログラムを入れて「sweetAlert()」関数を完成させます。

挿入する内容

function sweetAlert() {
    Swal.fire({
        title: 'こんにちは！',
        text: 'これは SweetAlert2 を使った表示です。',
        icon: 'success'
    });
}

プログラムの完成例は下記で確認来ます。

SweetAlert2のサンプルページを開く

Well done!

次のステップに進みましょう！

次のステップに進む

← 前のステップにもどる