JavaScript | 9章：CONTACTフォームの入力チェックをやってみよう

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

9章：CONTACTフォームの入力チェックをやってみよう

本章では、8章で学習した条件分岐（if文）の知識を元に、CONTACTフォームの入力チェック機能のつくり方を学習します。

【9-1】CONTACTフォームの仕様

CONTACTフォーム（お問い合わせフォーム）には、以下の理由により入力チェック機能が必要です。

📝 入力チェック機能を必要とする理由

必須入力項目が未入力のまま送信された場合に、問い合わせしたユーザーへの連絡が困難になる可能性がある。
入力チェック機能がないと、スパム投稿の標的にされやすくなる。

この章では、各必須項目には、次の入力チェック機能を作成します。

必須項目	入力チェック機能の説明（エラー条件）
お名前	未入力（空欄）だとアラートでメッセージ（お名前を入力してください。）が表示され、送信できない。
E-Mail	正確なメールアドレスの形式で入力されていないと、アラートでメッセージ（メールアドレスを正確に入力してください。）が表示され、送信できない。
TEL（ハイフンあり）	正確な電話番号の形式で入力されていないと、アラートでメッセージ（電話番号をハイフンありで正確に入力してください。）が表示され、送信できない。
ご要望・ご質問など	未入力（空欄）だとアラートでメッセージ（お問い合わせ内容を入力してください。）が表示され、送信できない。

※エラー項目がない場合は、サーバーに入力データが送信されますが、送信機能の作成はサーバーサイドのプログラミングが必要となりますので、本教材では解説しません。

本章で作成するサンプルページ

9章サンプルページ

演習データをダウンロードし、「formcheck_start.html」とjsフォルダ内の「formcheck_start.js」をエディターで開き、ブラウザプレビューしてください。
- 使用素材

ダウンロード

JS9演習データ.zip (13.1 KB)

演習素材について

ダウンロードした「JS9演習データ」フォルダの中には、「formcheck_start.html」と「formcheck_fin.html」が入っています。
「js」フォルダには「formcheck_start.js」と「formcheck_fin.js」が入っています。
「formcheck_start.html」と「formcheck_start.js」は、教科書用のファイルです。
「formcheck_fin.html」と「formcheck_fin.js」は完成データです。
自分で書いたコードがうまく動かないときは、完成データとの違いを探してみると良いでしょう。

<body>
  <main class="maincontents">
    <h2 class="heading-contact">CONTACT</h2>

    <section class="form-wrap">
      <form class="form-contact">
        <div class="form-parts-wrap">
          <label for="name" class="form-label"
            >お名前<span class="required">必須</span></label
          >
          <input
            type="text"
            name="name"
            class="name form-singleline"
          />
        </div>

        <div class="form-parts-wrap">
          <label for="e-mail" class="form-label"
            >E-Mail<span class="required">必須</span></label
          >
          <input
            type="text"
            name="e-mail"
            class="mail form-singleline"
          />
        </div>

        <div class="form-parts-wrap">
          <label for="tel" class="form-label"
            >TEL<span class="required">必須</span></label
          >
          <input
            type="text"
            name="tel"
            class="tel form-singleline"
          />
        </div>

        <div class="form-parts-wrap">
          <label for="comment" class="form-label"
            >ご要望・ご質問など<span class="required">必須</span>
          </label>
          <textarea
            name="comment"
            type="text"
            class="comment form-multiline"
          ></textarea>
        </div>

        <div class="form-submitbtn-wrap">
          <input
            type="submit"
            value="入力内容を確認する"
            class="form-submitbtn"
          />
        </div>
      </form>
    </section>
  </main>

  <script src="js/formcheck_start.js"></script>
</body>

サンプルコード9−1

【9-2】お名前の空欄チェックとイベントキャンセルの機能を作成しよう

- 最初に、お名前欄の空欄チェック機能を作成します。
- 「未入力（空欄）だとアラートでメッセージ（お名前を入力してください。）が表示され、送信できない」というのが、お名前欄に対して作成する機能です。

<form class="form-contact">
  <div class="form-parts-wrap">
    <label for="name" class="form-label">
      お名前<span class="required">必須</span>
    </label>
    <input type="text" name="name" class="name form-singleline" />
  </div>

  ・・・中略・・・
</form>

サンプルコード9-2

■ 要素オブジェクトの作成

📝 サンプルコードの解説

submitイベント（送信イベント）を設定するので、まずはformタグのclass名を取得してformObj定数に格納し、要素オブジェクトを作成します。
submitイベントはform要素にしか設定することができません。

//オブジェクト一覧
const formObj = document.querySelector(".form-contact");

サンプルコード9−3

💡 サンプルコードの解説

次に、inputタグのclass名を取得してelemName定数に格納し、要素オブジェクトを作成します。

//オブジェクト一覧
const formObj = document.querySelector(".form-contact");
const elemName = document.querySelector(".name");

サンプルコード9−4

■ 送信イベントの設定

📝 サンプルコードの解説

必要な要素オブジェクトの準備ができたので、イベントの設定を行います。
form要素オブジェクト（formObj）にaddEventListenerメソッドでsubmitイベントを設定します。

📝 空欄チェックの処理の流れ

お名前欄に入力された文字列を取得して変数に格納する。
その変数の中身が「空の文字列（""）」かどうかをif文で判定する。
判定結果がtrueの場合は、alertメソッドでメッセージを表示し、送信をキャンセルする。

📝 送信キャンセルの必要性

この処理のポイントは、alertでメッセージを表示するだけではなく、送信をキャンセルする点です。
送信キャンセル処理を行わないと、メッセージが表示された後に空欄のままデータがサーバーに送信されてしまいます。

//オブジェクト一覧
const formObj = document.querySelector(".form-contact");
const elemName = document.querySelector(".name");

//submitイベントを設定
formObj.addEventListener("submit", function () {
//ここにsubmitイベント発生時の処理を記述する
});

サンプルコード9−5

送信ボタンがクリックされたときの空欄チェックの処理の流れは、次のようになります。

1. お名前欄に入力された文字列を取得して変数に格納する。

それでは、順番に空欄チェックの処理の流れをプログラミングしていきましょう。

📝 サンプルコードの解説

関数の{ }内に空欄チェックの処理を書いていきます
変数（今回は再代入の処理を行わないので定数）nameInputを宣言し、input要素オブジェクト（elemName）のvalueプロパティで取得した入力内容を格納します。

//オブジェクト一覧
const formObj = document.querySelector(".form-contact");
const elemName = document.querySelector(".name");

//submitイベントを設定
formObj.addEventListener("submit", function () {
  //お名前欄に入力された文字列を取得して変数に格納する
  const nameInput = elemName.value;
});

サンプルコード9−6

2. その変数の中身が「空の文字列（””）」かどうかをif文で判定する。

📝 サンプルコードの解説

続いてif文を使い、空欄チェックを行います。
条件式は、「nameInput定数の中身と空の文字列（””）が等しいかどうか」ということを表しますので、「nameInput == ""」となります。

//オブジェクト一覧
const formObj = document.querySelector(".form-contact");
const elemName = document.querySelector(".name");

//submitイベントを設定
formObj.addEventListener("submit", function () {
  //お名前欄に入力された文字列を取得して変数に格納する
  const nameInput = elemName.value;
  //if文でお名前欄の空欄チェック
  if (nameInput == "") {
    //alertでメッセージを表示する
    //送信をキャンセルする
  }
});

サンプルコード9−7

3. 判定結果がtrueの場合は、alertメソッドでメッセージを表示し、送信をキャンセルする。

💡 サンプルコードの解説

まずは、alertメソッドで"お名前を入力してください。"と出力します。

//if文でお名前欄の空欄チェック
if (nameInput == "") {
  //alertでメッセージを表示する
  alert("お名前を入力してください。");
  //送信をキャンセルする
}

サンプルコード9-8

次に、送信をキャンセルする仕組みについて解説します。

■ イベント発生時の挙動をキャンセルするeventオブジェクトのpreventDefaultメソッド

送信をキャンセルする際には、eventオブジェクトのpreventDefaultメソッドを使います。
eventオブジェクトとは、イベント発生時のさまざまな情報が格納されているブラウザオブジェクトです。
eventオブジェクトから取得できる主な情報には以下のようなものがあります。

📝 eventオブジェクトから取得できる主な情報

イベント発生元の要素（targetプロパティ）
イベントの種類（typeプロパティ）
イベントが発生したブラウザ上の座標（clientX, clientYプロパティ）
マウスのどのボタンが押されたか（buttonプロパティ）
キーボードのどのキーが押されたか（keyCodeプロパティ）

eventオブジェクトの使用方法

📝 eventオブジェクトの情報を受け取る方法（サンプルコードの解説）

引数名は変数名の命名ルールに則っていれば何でもよいのですが、慣例的にイベントの意で「e」または「event」という名前がよく使われます。
eventオブジェクトの情報を受け取るために、イベント発生時に実行される関数に引数を指定します。
eventオブジェクトの使用方法は通常のオブジェクトと少し異なります。

//「function(e)」の「e」がイベントオブジェクトとして扱われる
formObj.addEventListener("submit", function (e) {
  //お名前欄に入力された文字列を取得して変数に格納する
  const nameInput = elemName.value;
  //if文でお名前欄の空欄チェック
  if (nameInput == "") {
    //alertでメッセージを表示する
    alert("お名前を入力してください。");
    //送信をキャンセルする
  }
});

サンプルコード9-9

イベント発生時の挙動をキャンセルする

💡 サンプルコード9-10の解説

イベント発生時の挙動は、イベント発生元やイベントの種類によって異なります。a要素に発生したclickイベント発生時の挙動は「ページ遷移する」、form要素に発生したsubmitイベント発生時の挙動は「サーバーにデータを送信する」です。
eventオブジェクトのpreventDefaultメソッドを使うと、これらのブラウザ動作をキャンセルすることができます。
サンプルコード9-9で指定した関数の引数eにはイベント発生時の情報が格納されています。つまり引数eをeventオブジェクトとして扱い、JavaScriptの書式でメソッドやプロパティを取り出すことができるということです。
したがって、送信ボタンクリック時のイベントのキャンセルはe.preventDefault();と記述します。

formObj.addEventListener("submit", function (e) {
  //お名前欄に入力された文字列を取得して変数に格納する
  const nameInput = elemName.value;
  //if文でお名前欄の空欄チェック
  if (nameInput == "") {
    //alertでメッセージを表示する
    alert("お名前を入力してください。");
    //送信をキャンセルする
    e.preventDefault();
  }
});

サンプルコード9-10

プレビュー

【9-3】メールアドレスと電話番号の入力チェックの機能を作成しよう

続いて、メールアドレス欄の入力チェック機能を作成します。
メールアドレスのチェックは、単なる空欄チェックではなく、正確なメールアドレスの形式で入力されているかどうかを、より厳密なルールで判定した方が連絡トラブルも起こりにくくなります。
正規表現という表記方法を使うと、特定の文字パターンを判別して、厳密なルールに従った判定が可能になります。
例えば、メールアドレスの文字順には、以下のような表記ルールがあります。

メールアドレスの表記ルール例

最初の文字	A～Z、a～zのアルファベットと0～9の数字
2文字目以降	A～Z、a～zのアルファベットと0～9の数字 -（ハイフン）_（アンダースコア）.（ピリオド）最初の文字のみでもよい
@（アットマーク）	2つ以上連続して表記してはならない
ドメイン表記	A～Z、a～zのアルファベットと0～9の数字先頭と末尾以外は-（ハイフン）_（アンダースコア）.（ピリオド）が使える

■ 正規表現とは

上記のように、メールアドレスは英数字と記号を複雑なルールで並べて表記したものです。
メールアドレス以外にもWebサイト上でユーザーからよく取得される情報として、郵便番号、電話番号、URLなどがあります。
これらには全て、決まった表記パターンがあり、文字順によって判別することができます。
判別に使うための表記方法を正規表現といいます。

例えば、上記メールアドレスの表記ルール例を正規表現で表したものが次のコードです。

メールアドレスの正規表現例

/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/

サンプルコード9-11

正規表現は、次のパターン（意味を持った記号）の組み合わせによって作成されます。

JavaScriptで使用する主な正規表現パターン

この正規表現のパターンを使うと、電話番号の正規表現は以下のようになります。

パターン	意味
`^`	文頭に一致する
`$`	文末に一致する
`[ABC]`	A、B、Cのいずれか1文字
`[A-Z]`	AからZのいずれか1文字
`*`	直前文字を0回以上繰り返す
`+`	直前文字を1回以上繰り返す
`{n}`	直前の文字をn回繰り返す
`.`	任意の1文字
`\d`	数字（0～9）

電話番号の正規表現例（ハイフンあり）

/\d{2,4}-\d{2,4}-\d{4}/

サンプルコード9-12

電話番号の正規表現例（ハイフンなし）

/^(0{1}\d{9,10})$/

サンプルコード9-13

■ 正規表現を使ったメールアドレスの入力チェック

- それでは、サンプルコード9-11のメールアドレスの正規表現を使い、メールアドレスの入力チェック機能を作成してみましょう。
- 処理の流れは以下のようになります。

それでは、この順番で、正規表現を使ったメールアドレスの入力チェックの処理の流れをプログラミングしていきましょう。

📝 正規表現を使ったメールアドレスの入力チェックの処理の流れ

E-Mail欄のinputタグのclass名を取得して、要素オブジェクトを作成する。
E-Mail欄に入力された文字列を取得して変数（定数）に格納する。
メールアドレスの正規表現パターンを変数（定数）に格納する。
正規表現パターンに合致しなかった場合にアラートを表示する条件分岐を追記する。
判定結果がtrueの場合は、alertメソッドでメッセージを表示し、送信をキャンセルする。

1. E-Mail欄のinputタグのclass名を取得して、要素オブジェクトを作成する

const elemMail = document.querySelector(".mail");

サンプルコード9-14

2. E-Mail欄に入力された文字列を取得して変数（定数）に格納する

const mailInput = elemMail.value;

サンプルコード9-15

3. メールアドレスの正規表現パターンを変数（定数）に格納する。

💡 サンプルコードの解説

正規表現は英語でregular expressionと表記します。
サンプルコード9-16の定数名regExpMailのregExp部分はregular expressionの略です。

const regExpMail =
  /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;

サンプルコード9-16

4. 正規表現のパターンに合致しない場合に処理を実行する条件分岐を追記する

💡 サンプルコード9-17の解説

正規表現パターンを変数に格納すると、正規表現オブジェクトとして扱われます。
正規表現オブジェクトのtestメソッドは、指定した文字列と正規表現パターンが一致した場合にtrueを返します。
従って、条件式をregExpMail.test(mailInput)と記述すると、正しいメールアドレスが入力されていた場合にアラートが出て送信がキャンセルされてしまいます。
そこで、論理演算子（8章を参照）の「!（条件式がfalseの場合はtrueを返す）」を使うことにより、条件式を!regExpMail.test(mailInput)と記述します。
これにより、指定した文字列と正規表現パターンが一致しなかった場合にtrueを返す処理に、条件式の意味が反転します。

//if文でお名前欄の空欄チェック
if (nameInput == "") {
  alert("お名前を入力してください。");
  e.preventDefault(); //送信をキャンセルする
} //ここからメールアドレスのチェック
else if (!regExpMail.test(mailInput)) {
  //ここに入力された文字列が正しいメールアドレスではなかった場合の処理を記述する
}

サンプルコード9-17

5.判定結果がtrueの場合は、alertメソッドでメッセージを表示し、送信をキャンセルする。

//if文でお名前欄の空欄チェック
if (nameInput == "") {
  //alertでメッセージを表示する
  alert("お名前を入力してください。");
  //送信をキャンセルする
  e.preventDefault();
} //ここからメールアドレスのチェック
else if (!regExpMail.test(mailInput)) {
  //入力された文字列が正しいメールアドレスではなかった場合の処理を記述する
  alert("メールアドレスを正確に入力してください。");
  e.preventDefault();//送信イベントキャンセル
}

サンプルコード9-18

コード全体

1〜5の処理をまとめて記述したコード全体がこちらです。

//オブジェクト一覧
const formObj = document.querySelector(".form-contact");
const elemName = document.querySelector(".name");
const elemMail = document.querySelector(".mail");

formObj.addEventListener("submit", function (e) {
  //お名前欄に入力された文字列を取得して変数に格納する
  const nameInput = elemName.value;
  //E-Mail欄に入力された文字列を取得して変数に格納する
  const mailInput = elemMail.value;
  //メールアドレスの正規表現パターンを変数に格納する
  const regExpMail =
    /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;

  //if文でお名前欄の空欄チェック
  if (nameInput == "") {
    //alertでメッセージを表示する
    alert("お名前を入力してください。");
    //送信をキャンセルする
    e.preventDefault();
  } //ここからメールアドレスのチェック
  else if (!regExpMail.test(mailInput)) {
    alert("メールアドレスを正確に入力してください。");
    e.preventDefault();
  }
});

サンプルコード9-19

プレビュー

■ 正規表現を使った電話番号の入力チェック

続いて、同様の手法で正規表現を使った電話番号の入力チェック機能を作成します。
今回は、ハイフンありの正規表現パターン（サンプルコード9-12参照）で条件式を書いてみます。
基本的な流れは、メールアドレスのチェックと同じです

📝 正規表現を使った電話番号の入力チェックの処理の流れ

TEL欄のinputタグのclass名を取得して、要素オブジェクトを作成する。
TEL欄に入力された文字列を取得して変数（定数）に格納する。
電話番号（ハイフンあり）の正規表現パターンを変数（定数）に格納する。
正規表現のパターンに合致しない場合に処理を実行する条件分岐を追記する
判定結果がtrueの場合は、alertメソッドでメッセージを表示し、送信をキャンセルする。

1. TEL欄のinputタグのclass名を取得して、要素オブジェクトを作成する。

const elemTel = document.querySelector(".tel");

サンプルコード9-20

2. TEL欄に入力された文字列を取得して変数（定数）に格納する。

const telInput = elemTel.value;

サンプルコード9-21

3. 電話番号（ハイフンあり）の正規表現パターンを変数（定数）に格納する。

const regExpTel = /\d{2,4}-\d{2,4}-\d{4}/;

サンプルコード9-22

4. else if文で「1.と2.の値が合致しなかったときにtrueを返す」条件式を追加する。

//if文でお名前欄の空欄チェック
if (nameInput == "") {
  alert("お名前を入力してください。");
  e.preventDefault(); //送信をキャンセルする
} //ここからメールアドレスのチェック
else if (!regExpMail.test(mailInput)) {
  //ここに入力された文字列が正しいメールアドレスではなかった場合の処理を記述する
  alert("メールアドレスを正確に入力してください。");
  e.preventDefault();
  //ここから電話番号のチェック
} else if (!regExpTel.test(telInput)) {
  //入力された文字列が正しい電話番号ではなかった場合の処理を記述する
}

サンプルコード9-23

5. 判定結果がtrueの場合は、alertメソッドでメッセージを表示し、送信をキャンセルする。

//if文でお名前欄の空欄チェック
if (nameInput == "") {
  //alertでメッセージを表示する
  alert("お名前を入力してください。");
  //送信をキャンセルする
  e.preventDefault();
} //ここからメールアドレスのチェック
else if (!regExpMail.test(mailInput)) {
  alert("メールアドレスを正確に入力してください。");
  e.preventDefault();
} else if (!regExpTel.test(telInput)) {
  alert("電話番号をハイフンありで正確に入力してください。");
  e.preventDefault();
}

サンプルコード9-24

コード全体

1〜5の処理をまとめて記述したコード全体がこちらです。

//オブジェクト一覧
const formObj = document.querySelector(".form-contact");
const elemName = document.querySelector(".name");
const elemMail = document.querySelector(".mail");
const elemTel = document.querySelector(".tel");

formObj.addEventListener("submit", function (e) {
  //お名前欄に入力された文字列を取得して変数に格納する
  const nameInput = elemName.value;
  //E-Mail欄に入力された文字列を取得して変数に格納する
  const mailInput = elemMail.value;
  //メールアドレスの正規表現パターンを変数に格納する
  const regExpMail =
    /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
  //TEL欄に入力された文字列を取得して変数に格納する
  const telInput = elemTel.value;
  //電話番号（ハイフンあり）の正規表現パターンを変数に格納する
  const regExpTel = /\d{2,4}-\d{2,4}-\d{4}/;

  //if文でお名前欄の空欄チェック
  if (nameInput == "") {
    //alertでメッセージを表示する
    alert("お名前を入力してください。");
    //送信をキャンセルする
    e.preventDefault();
  } //ここからメールアドレスのチェック
  else if (!regExpMail.test(mailInput)) {
    alert("メールアドレスを正確に入力してください。");
    e.preventDefault();
  } else if (!regExpTel.test(telInput)) {
    alert("電話番号をハイフンありで正確に入力してください。");
    e.preventDefault();
  }
});

サンプルコード9-25

プレビュー

【9-4】演習 textarea要素の空欄チェックとイベントキャンセルの機能を作成しよう

最後に、textarea要素（ご要望・ご質問など）の空欄チェック機能を作成したら完成です。
else if文を使うこと以外は、最初のお名前欄の空欄チェックと作成手順が同じですので、まずは完成コードを見ずに自分で考えてコードを書いてみてください。
わからなかったら完成コードを見ながらやってみましょう！

以下の▶︎ をクリックすると完成コードとブラウザプレビューが表示されます。

完成コード (クリックして展開 / 折りたたみ)

        
        // オブジェクト一覧
        const formObj = document.querySelector(".form-contact");
        const elemName = document.querySelector(".name");
        const elemMail = document.querySelector(".mail");
        const elemTel = document.querySelector(".tel");
        const elemComment = document.querySelector(".comment");

        // submitイベントを設定
        formObj.addEventListener("submit", function (e) {
          // お名前欄に入力された文字列を取得して変数に格納する
          const nameInput = elemName.value;
          // E-mail欄に入力された文字列を取得して変数に格納する
          const mailInput = elemMail.value;
          // メールアドレスの正規表現パターンを変数に格納する
          const regExpMail = /^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/;
          // TEL欄に入力された文字列を取得して変数に格納する
          const telInput = elemTel.value;
          // 電話番号（ハイフンあり）の正規表現パターンを変数に格納する
          const regExpTel = /^\d{2,4}-\d{2,4}-\d{4}$/;
          // ご要望・ご質問など欄に入力された文字列を取得して変数に格納する
          const commentInput = elemComment.value;

          // if文でお名前欄の空欄チェック
          if (nameInput === "") {
            alert("お名前を入力してください。");
            e.preventDefault(); // 送信をキャンセルする
          }
          // ここからメールアドレスのチェック
          else if (!regExpMail.test(mailInput)) { 
            // ここに入力された文字列が正しいメールアドレスではなかった場合の処理を記述する
            alert("メールアドレスを正確に入力してください。");
            e.preventDefault();
          }
          // ここから電話番号のチェック
          else if (!regExpTel.test(telInput)) {
            alert("電話番号をハイフンありで正確に入力してください。");
            e.preventDefault();
          }
          // ここからご要望・ご質問などのチェック
          else if (commentInput === "") {
            alert("お問い合わせ内容を入力してください。");
            e.preventDefault();
          }
        });

サンプルコード9-26

プレビュー

これで「9章：CONTACTフォームの入力チェックをやってみよう」の解説を終わります。

次の章に進みましょう。

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

9章：CONTACTフォームの入力チェックをやってみよう

【9-1】CONTACTフォームの仕様

9章 サンプルページ

【9-2】お名前の空欄チェックとイベントキャンセルの機能を作成しよう

■ 要素オブジェクトの作成

■ 送信イベントの設定

■ イベント発生時の挙動をキャンセルするeventオブジェクトのpreventDefaultメソッド

プレビュー

【9-3】メールアドレスと電話番号の入力チェックの機能を作成しよう

■ 正規表現とは

■ 正規表現を使ったメールアドレスの入力チェック

プレビュー

■ 正規表現を使った電話番号の入力チェック

プレビュー

【9-4】演習 textarea要素の空欄チェックとイベントキャンセルの機能を作成しよう

プレビュー

9章サンプルページ