ReactでカスタムフックuseFormを活用した効率的なフォーム処理方法

Reactでフォーム処理を効率化するカスタムフックuseFormの重要性を紹介します。

Reactはコンポーネントベースのライブラリとして、多くの開発者に採用されています。その中でも、フォーム処理は多くのアプリケーションで避けて通れない課題です。フォームの状態管理、入力バリデーション、エラーハンドリングなど、さまざまな側面を適切に処理する必要があります。

しかし、フォームの処理はコードが冗長化しやすく、プロジェクトの規模が拡大するにつれて、メンテナンスが難しくなることがあります。そこで登場するのが、カスタムフックuseFormです。useFormを使うことで、Reactアプリケーションのフォーム処理が効率化され、コードの可読性と再利用性が大幅に向上します。

本記事では、useFormの基本構造から応用例までを解説し、Reactアプリケーションにおけるフォーム処理を効率化する方法を学びます。さらに、バリデーションや送信処理の最適化、デバッグのポイントについても触れ、より実践的な知識を提供します。

Reactでフォーム管理が重要な理由

Reactアプリケーションでは、フォーム管理が重要な要素として挙げられます。ユーザー入力を処理するフォームは、データの収集、検証、送信といった重要な役割を担っており、これを適切に管理することがアプリケーションの安定性とユーザー体験を向上させる鍵となります。

フォーム管理の課題

フォーム管理には、以下のような課題があります。

1. 状態の管理

フォームの各フィールドに対する値の管理は、単純なアプリケーションでも複雑になることがあります。特に、複数の入力フィールドがある場合、状態を明確に追跡することが重要です。

2. 入力バリデーション

ユーザーが正しい形式でデータを入力するようにバリデーションを行う必要があります。これは、必須項目のチェックや、特定の形式（例: メールアドレスや電話番号）の検証が含まれます。

3. エラーハンドリング

入力エラーに対するユーザーへのフィードバックも、アプリケーションの品質に影響を与える重要な要素です。エラーメッセージを適切に表示し、修正を促す必要があります。

4. 冗長なコード

フォーム管理のロジックは冗長になりがちで、コードの可読性やメンテナンス性が低下する可能性があります。

Reactでのフォーム管理の利点

Reactを用いることで、これらの課題に対して以下のような利点を得ることができます。

1. コンポーネントベースの管理

各フォームフィールドを独立したコンポーネントとして管理することで、コードの再利用性と可読性が向上します。

2. 状態管理の簡略化

useStateやuseReducerなどのReactフックを利用して、フォームの状態を簡潔かつ効率的に管理できます。

3. カスタムフックによる効率化

フォーム処理を汎用的なカスタムフックとして実装することで、同様のロジックを複数のフォームで簡単に再利用できます。

これらの理由から、Reactでのフォーム管理を効率化する方法を学ぶことは、React開発者にとって非常に重要です。本記事では、次章以降でカスタムフックuseFormを利用した具体的な方法を詳しく解説します。

useFormとは何か

useFormは、Reactでフォーム処理を効率化するために設計されたカスタムフックです。フォームの状態管理やバリデーション、送信処理など、煩雑になりがちなフォームのロジックを簡潔に実装できるようにすることで、開発者の負担を軽減します。

useFormの特徴と利点

1. 簡潔なコードでフォームロジックを管理

useFormを利用することで、各フォームフィールドの状態やバリデーションを一元的に管理できます。これにより、個別のフィールドごとにuseStateを定義する必要がなくなり、コードが簡潔になります。

2. 再利用性の向上

フォーム処理のロジックをカスタムフックとして分離することで、複数のフォームに共通する処理を簡単に再利用できます。これにより、アプリケーション全体で一貫性のあるフォーム処理を実現できます。

3. 柔軟なバリデーション対応

useFormは、バリデーションロジックを簡単に追加できる柔軟性を持っています。シンプルな必須チェックから、複雑な正規表現を用いた検証まで対応可能です。

4. 実装コストの削減

手動での状態管理やエラーメッセージの処理に比べて、useFormを使用すると実装コストが大幅に削減されます。また、バグの発生も抑えられるため、メンテナンス性が向上します。

useFormのユースケース

以下のようなケースでuseFormを活用できます。

ユーザー登録フォーム
ログインフォーム
サポート問い合わせフォーム
アンケートや調査フォーム
複数ページにまたがるフォーム（ウィザード形式のフォーム）

次章で解説する内容

次章では、useFormの基本構造と実際の作成方法をコード例とともに解説します。これにより、useFormを自分のプロジェクトにどのように統合するかを理解できます。

useFormの基本構造と作成方法

useFormは、Reactのカスタムフックとして作成され、フォーム処理の状態管理、バリデーション、送信処理を効率的に行うことができます。この章では、useFormの基本構造と実際の作成方法についてコードを交えて解説します。

基本構造

useFormの基本的な構造は以下の通りです：

import { useState } from "react";

const useForm = (initialValues, validate) => {
    const [values, setValues] = useState(initialValues);
    const [errors, setErrors] = useState({});

    const handleChange = (event) => {
        const { name, value } = event.target;
        setValues({ ...values, [name]: value });

        if (validate) {
            const validationErrors = validate({ ...values, [name]: value });
            setErrors(validationErrors);
        }
    };

    const handleSubmit = (callback) => (event) => {
        event.preventDefault();
        if (validate) {
            const validationErrors = validate(values);
            setErrors(validationErrors);
            if (Object.keys(validationErrors).length === 0) {
                callback();
            }
        } else {
            callback();
        }
    };

    return { values, errors, handleChange, handleSubmit };
};

export default useForm;

useFormの主要な機能

values: フォームフィールドの現在の値を管理するオブジェクト。
errors: フォームのバリデーションエラーを保持するオブジェクト。
handleChange: フォームフィールドの値が変更された際に呼び出される関数。
handleSubmit: フォームが送信された際に呼び出される関数。バリデーションが成功した場合にのみ、指定したコールバックを実行します。

実際の使用例

以下は、useFormを利用した簡単なフォームの実装例です。

import React from "react";
import useForm from "./useForm";

const validate = (values) => {
    const errors = {};
    if (!values.username) errors.username = "ユーザー名は必須です";
    if (!values.password) errors.password = "パスワードは必須です";
    return errors;
};

const LoginForm = () => {
    const { values, errors, handleChange, handleSubmit } = useForm(
        { username: "", password: "" },
        validate
    );

    const onSubmit = () => {
        console.log("送信成功:", values);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div>
                <label>ユーザー名</label>
                <input
                    type="text"
                    name="username"
                    value={values.username}
                    onChange={handleChange}
                />
                {errors.username && <p>{errors.username}</p>}
            </div>
            <div>
                <label>パスワード</label>
                <input
                    type="password"
                    name="password"
                    value={values.password}
                    onChange={handleChange}
                />
                {errors.password && <p>{errors.password}</p>}
            </div>
            <button type="submit">ログイン</button>
        </form>
    );
};

export default LoginForm;

コードのポイント

初期値の設定: useFormにinitialValuesを渡すことで、フォームの初期値を設定します。
バリデーション関数: validate関数を渡すことで、フォームの入力値をリアルタイムで検証できます。
送信処理: handleSubmitは、フォームの送信イベントを処理し、コールバック関数を実行します。

このように、useFormを利用することで、フォームの状態管理やバリデーションロジックを簡潔に実装できます。次章では、バリデーション処理をさらに詳しく掘り下げます。

バリデーション処理をuseFormで実装する方法

フォームのバリデーションは、ユーザーが正しいデータを入力するための重要なプロセスです。useFormを利用することで、バリデーション処理を効率的に実装できます。この章では、バリデーションの基本的な仕組みから、複雑なルールを持つバリデーション処理の実装方法までを解説します。

基本的なバリデーションの実装

useFormのvalidate関数を利用して、フォームの入力値をリアルタイムで検証します。以下はシンプルな必須チェックの例です。

const validate = (values) => {
    const errors = {};
    if (!values.username) {
        errors.username = "ユーザー名は必須です";
    }
    if (!values.password) {
        errors.password = "パスワードは必須です";
    }
    return errors;
};

このvalidate関数は、各入力値を検証し、エラーがある場合はエラーメッセージを含むオブジェクトを返します。

リアルタイムバリデーション

リアルタイムでエラーメッセージを表示するには、handleChange関数内でvalidateを呼び出します。これにより、入力値の変更時に即座にエラーが反映されます。

const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    if (validate) {
        const validationErrors = validate({ ...values, [name]: value });
        setErrors(validationErrors);
    }
};

複雑なバリデーションの実装

複雑な条件を持つバリデーション（例: パスワードの強度チェックや日付範囲の検証）も簡単に追加できます。以下は、パスワードの強度をチェックする例です。

const validate = (values) => {
    const errors = {};

    if (!values.password) {
        errors.password = "パスワードは必須です";
    } else if (values.password.length < 8) {
        errors.password = "パスワードは8文字以上である必要があります";
    } else if (!/[A-Z]/.test(values.password)) {
        errors.password = "パスワードには少なくとも1つの大文字が必要です";
    } else if (!/[0-9]/.test(values.password)) {
        errors.password = "パスワードには少なくとも1つの数字が必要です";
    }

    return errors;
};

カスタムバリデーションメッセージの表示

バリデーションエラーが発生した場合、errorsオブジェクトを利用して適切なエラーメッセージを表示します。

<div>
    <label>パスワード</label>
    <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
    />
    {errors.password && <p>{errors.password}</p>}
</div>

バリデーションをテストする

フォームが期待通りに動作することを確認するため、さまざまなケース（必須フィールドの未入力、形式の不正、条件を満たしていない入力）をテストします。

次章で解説する内容

次章では、useFormを既存のReactプロジェクトにどのように統合するかを詳しく説明します。また、動的なフォーム生成にも対応する応用例を紹介します。

useFormを既存プロジェクトに統合する方法

useFormを既存のReactプロジェクトに統合することで、フォーム処理を効率化し、コードの簡潔化を実現できます。この章では、useFormを既存プロジェクトに組み込む手順を具体的に説明します。

ステップ1: useFormのインストールまたは作成

カスタムフックuseFormを作成済みの場合は、useForm.jsファイルをプロジェクトのhooksディレクトリに保存します。プロジェクトに未実装の場合は、[a4]で紹介したコードを基に作成してください。

ディレクトリ構造の例:

src/
├── components/
├── hooks/
│   └── useForm.js
├── App.js

ステップ2: フォームコンポーネントでuseFormをインポート

対象のフォームコンポーネントでuseFormをインポートします。

import React from "react";
import useForm from "../hooks/useForm";

ステップ3: 初期値とバリデーション関数の定義

フォームフィールドの初期値と、バリデーションロジックを定義します。

const initialValues = { username: "", email: "", password: "" };

const validate = (values) => {
    const errors = {};
    if (!values.username) errors.username = "ユーザー名は必須です";
    if (!values.email) {
        errors.email = "メールアドレスは必須です";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
        errors.email = "正しいメールアドレスを入力してください";
    }
    if (!values.password || values.password.length < 8) {
        errors.password = "パスワードは8文字以上である必要があります";
    }
    return errors;
};

ステップ4: useFormフックの使用

useFormを呼び出し、フォームフィールドの状態やイベントハンドラーを取得します。

const { values, errors, handleChange, handleSubmit } = useForm(
    initialValues,
    validate
);

ステップ5: フォーム要素にuseFormを適用

取得した状態や関数をフォーム要素にバインドします。

const MyForm = () => {
    const onSubmit = () => {
        console.log("フォーム送信データ:", values);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div>
                <label>ユーザー名</label>
                <input
                    type="text"
                    name="username"
                    value={values.username}
                    onChange={handleChange}
                />
                {errors.username && <p>{errors.username}</p>}
            </div>
            <div>
                <label>メールアドレス</label>
                <input
                    type="email"
                    name="email"
                    value={values.email}
                    onChange={handleChange}
                />
                {errors.email && <p>{errors.email}</p>}
            </div>
            <div>
                <label>パスワード</label>
                <input
                    type="password"
                    name="password"
                    value={values.password}
                    onChange={handleChange}
                />
                {errors.password && <p>{errors.password}</p>}
            </div>
            <button type="submit">送信</button>
        </form>
    );
};

ステップ6: プロジェクト内でuseFormを再利用

useFormは汎用性が高いため、他のフォームでも初期値とバリデーション関数を変更するだけで簡単に再利用できます。以下の例は、ログインフォームへの応用です。

const loginInitialValues = { email: "", password: "" };

const loginValidate = (values) => {
    const errors = {};
    if (!values.email) errors.email = "メールアドレスは必須です";
    if (!values.password) errors.password = "パスワードは必須です";
    return errors;
};

次章で解説する内容

次章では、useFormを活用した動的フォームの生成と管理方法について解説します。これにより、さらに柔軟なフォーム処理が可能になります。

応用例：動的フォームの生成と管理

Reactアプリケーションでは、フォームの構造がユーザーの操作や外部データに応じて動的に変化するケースがあります。useFormを活用すると、こうした動的フォームを効率的に管理できます。この章では、動的フォームの生成方法と管理テクニックについて解説します。

動的フォームのユースケース

動的フォームは以下のようなシナリオで役立ちます。

アンケートフォーム：質問数や内容がユーザーの回答に基づいて変化する。
商品カスタマイズフォーム：選択したオプションによって表示されるフィールドが変わる。
フォームビルダー：ユーザーがフォーム構造を設計できるツール。

useFormを活用した動的フォームの基本構造

useFormを利用することで、動的に変化するフォームフィールドを効率的に管理できます。以下に基本的な例を示します。

import React, { useState } from "react";
import useForm from "../hooks/useForm";

const DynamicForm = () => {
    const [fields, setFields] = useState([{ name: "field1", label: "項目 1" }]);
    const initialValues = fields.reduce((values, field) => {
        values[field.name] = "";
        return values;
    }, {});

    const validate = (values) => {
        const errors = {};
        fields.forEach((field) => {
            if (!values[field.name]) {
                errors[field.name] = `${field.label}は必須です`;
            }
        });
        return errors;
    };

    const { values, errors, handleChange, handleSubmit } = useForm(
        initialValues,
        validate
    );

    const addField = () => {
        const newField = {
            name: `field${fields.length + 1}`,
            label: `項目 ${fields.length + 1}`,
        };
        setFields([...fields, newField]);
    };

    const onSubmit = () => {
        console.log("フォーム送信データ:", values);
    };

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                {fields.map((field, index) => (
                    <div key={index}>
                        <label>{field.label}</label>
                        <input
                            type="text"
                            name={field.name}
                            value={values[field.name]}
                            onChange={handleChange}
                        />
                        {errors[field.name] && <p>{errors[field.name]}</p>}
                    </div>
                ))}
                <button type="submit">送信</button>
            </form>
            <button onClick={addField}>フィールドを追加</button>
        </div>
    );
};

export default DynamicForm;

コード解説

動的フィールドの状態管理:
fieldsという状態で、現在のフォームフィールドを管理しています。新しいフィールドを追加する際は、setFieldsで更新します。
初期値の生成:
フィールドに応じて動的に初期値を設定します。reduceを使用して、initialValuesを生成します。
バリデーションの動的適用:
各フィールドのnameとlabelを利用して、バリデーションエラーを動的に生成します。
フォームのレンダリング:
fieldsの内容を基にフォームを動的にレンダリングし、各フィールドにuseFormのhandleChangeを適用しています。

動的フォームの応用

動的フォームのアイデアをさらに広げることで、複雑なシナリオにも対応可能です。

条件付きフィールドの表示:
特定の条件を満たした場合にのみ、新しいフィールドを表示する。
動的なバリデーションルール:
各フィールドに異なるバリデーションルールを適用する。
データベース連携:
サーバーから取得したデータに基づいて動的にフィールドを生成する。

次章で解説する内容

次章では、useFormを使用したフォーム送信処理の最適化について詳しく説明します。APIとの連携やエラーハンドリングを効率的に行う方法を学びます。

useFormを使用したフォーム送信処理の最適化

フォーム送信は、ユーザーからの入力データをサーバーに送信し、レスポンスを処理する重要なプロセスです。useFormを利用すれば、送信処理を簡潔かつ効率的に実装できます。この章では、送信処理の基本的な流れ、API連携、エラーハンドリングの最適化について解説します。

フォーム送信処理の基本構造

useFormのhandleSubmit関数を活用して、フォーム送信イベントを処理します。以下はシンプルな例です。

const onSubmit = async () => {
    try {
        const response = await fetch("https://example.com/api/submit", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(values),
        });

        if (!response.ok) {
            throw new Error("サーバーエラーが発生しました");
        }

        const result = await response.json();
        console.log("送信成功:", result);
    } catch (error) {
        console.error("送信失敗:", error.message);
    }
};

handleSubmitを使ってこの関数をトリガーします。

<form onSubmit={handleSubmit(onSubmit)}>
    <button type="submit">送信</button>
</form>

非同期処理の最適化

非同期処理では、ユーザー体験を向上させるために以下のような工夫が必要です。

1. ローディングインジケータ

フォーム送信中にローディングインジケータを表示します。

const [isLoading, setIsLoading] = useState(false);

const onSubmit = async () => {
    setIsLoading(true);
    try {
        // API呼び出し
    } finally {
        setIsLoading(false);
    }
};

{isLoading && <p>送信中...</p>}

2. エラーメッセージの表示

エラーメッセージをユーザーにわかりやすく表示します。

const [submitError, setSubmitError] = useState("");

const onSubmit = async () => {
    try {
        // API呼び出し
    } catch (error) {
        setSubmitError(error.message);
    }
};

{submitError && <p>{submitError}</p>}

3. 成功時のリダイレクトや通知

送信が成功した場合、別ページへのリダイレクトや成功通知を行います。

const onSubmit = async () => {
    try {
        const result = await fetch("https://example.com/api/submit", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(values),
        });
        alert("送信が完了しました！");
        navigate("/success");
    } catch (error) {
        console.error("送信エラー:", error.message);
    }
};

エラーハンドリングのベストプラクティス

クライアント側の入力エラー: useFormのバリデーション機能を活用して事前に防ぐ。
サーバーエラー: APIのレスポンスコードに基づいて適切にエラーメッセージを表示。
ネットワークエラー: ネットワーク障害やタイムアウトの場合の処理を追加。

デバッグのポイント

console.logで送信データを確認してからAPIを呼び出す。
APIエンドポイントやリクエストヘッダが正しいか確認する。
サーバー側で受け取ったデータを検証し、期待どおりかチェックする。

次章で解説する内容

次章では、フォーム状態のデバッグとトラブルシューティングについて詳しく解説します。フォーム処理の安定性を向上させるための実践的な方法を学びます。

フォーム状態のデバッグとトラブルシューティング

フォーム処理のデバッグとトラブルシューティングは、安定した動作を実現するために重要なステップです。useFormを使用したフォームでは、状態やエラーの管理が一元化されているため、効率的にデバッグを進めることができます。この章では、デバッグ手法とよくある問題への対処法を紹介します。

フォーム状態のデバッグ方法

1. フォーム状態をコンソールに出力

フォームの現在の状態（valuesとerrors）をコンソールに表示することで、意図したデータが管理されているか確認できます。

useEffect(() => {
    console.log("現在のフォーム値:", values);
    console.log("現在のエラー:", errors);
}, [values, errors]);

2. デバッグツールの活用

React DevTools: Reactコンポーネントの状態やプロパティをリアルタイムで確認できます。
ブラウザのネットワークタブ: フォーム送信時のリクエストとレスポンスを詳細に確認します。

3. バリデーションロジックの確認

バリデーション関数が期待どおりに動作しているかをテストします。

const validate = (values) => {
    console.log("検証対象の値:", values);
    const errors = {};
    if (!values.username) errors.username = "ユーザー名は必須です";
    return errors;
};

よくある問題と対処法

1. フォームフィールドが更新されない

原因: 入力フィールドのname属性がvaluesのプロパティ名と一致していない。
対処: 各フィールドのname属性が正しいか確認する。

<input
    type="text"
    name="username" // 必ずvaluesのプロパティと一致
    value={values.username}
    onChange={handleChange}
/>

2. エラーメッセージが表示されない

原因: errorsオブジェクトが正しく更新されていない。
対処: validate関数がエラーを適切に返しているか確認する。

{errors.username && <p>{errors.username}</p>}

3. フォーム送信がトリガーされない

原因: フォームのonSubmitが正しく設定されていない、またはボタンがtype="button"になっている。
対処: フォームとボタンが正しく構成されているか確認する。

<form onSubmit={handleSubmit(onSubmit)}>
    <button type="submit">送信</button>
</form>

4. サーバーエラーが発生する

原因: 送信データの形式がAPIの仕様と一致していない。
対処: 送信前にデータをコンソールで確認し、API仕様に基づいたフォーマットに修正する。

console.log("送信データ:", values);

デバッグのベストプラクティス

問題が発生した場合は、変更履歴を追跡するために状態のログを詳細に記録。
エラーを段階的に切り分けるため、入力値、バリデーション、送信処理の各フェーズを個別に確認。
ユニットテストを活用して、特定のバリデーションロジックや処理が期待通りに動作することを確認。

次章で解説する内容

次章では、本記事のまとめとして、useFormの全体像と効率的なフォーム処理の重要性について振り返ります。useFormをさらに活用するためのポイントも紹介します。

まとめ

本記事では、Reactでのフォーム処理を効率化するカスタムフックuseFormについて、基本構造から応用例までを解説しました。useFormを利用することで、フォームの状態管理、バリデーション、送信処理を簡潔に実装し、コードの再利用性や可読性を大幅に向上させることができます。

特に、動的フォームの管理やAPIとの連携といった高度なシナリオにも対応できる点がuseFormの大きな利点です。また、デバッグとトラブルシューティングの方法を理解することで、フォーム処理の信頼性をさらに高めることができます。

useFormを活用すれば、開発効率を上げながら、堅牢で使いやすいフォームを構築できます。これを機に、自身のReactプロジェクトでフォーム処理を改善し、より洗練されたユーザー体験を提供してみてください。

ReactでカスタムフックuseFormを活用した効率的なフォーム処理方法

Reactでフォーム管理が重要な理由

フォーム管理の課題

1. 状態の管理

2. 入力バリデーション

3. エラーハンドリング

4. 冗長なコード

Reactでのフォーム管理の利点

1. コンポーネントベースの管理

2. 状態管理の簡略化

3. カスタムフックによる効率化

useFormとは何か

useFormの特徴と利点

1. 簡潔なコードでフォームロジックを管理

2. 再利用性の向上

3. 柔軟なバリデーション対応

4. 実装コストの削減

useFormのユースケース

次章で解説する内容

useFormの基本構造と作成方法

基本構造

useFormの主要な機能

実際の使用例

コードのポイント

バリデーション処理をuseFormで実装する方法

基本的なバリデーションの実装

リアルタイムバリデーション

複雑なバリデーションの実装

カスタムバリデーションメッセージの表示

バリデーションをテストする

次章で解説する内容

useFormを既存プロジェクトに統合する方法

ステップ1: useFormのインストールまたは作成

ステップ2: フォームコンポーネントでuseFormをインポート

ステップ3: 初期値とバリデーション関数の定義

ステップ4: useFormフックの使用

ステップ5: フォーム要素にuseFormを適用

ステップ6: プロジェクト内でuseFormを再利用

次章で解説する内容

応用例：動的フォームの生成と管理

動的フォームのユースケース

useFormを活用した動的フォームの基本構造

コード解説

動的フォームの応用

次章で解説する内容

useFormを使用したフォーム送信処理の最適化

フォーム送信処理の基本構造

非同期処理の最適化

1. ローディングインジケータ

2. エラーメッセージの表示

3. 成功時のリダイレクトや通知

エラーハンドリングのベストプラクティス

デバッグのポイント

次章で解説する内容

フォーム状態のデバッグとトラブルシューティング

フォーム状態のデバッグ方法

1. フォーム状態をコンソールに出力

2. デバッグツールの活用

3. バリデーションロジックの確認

よくある問題と対処法

1. フォームフィールドが更新されない

2. エラーメッセージが表示されない

3. フォーム送信がトリガーされない

4. サーバーエラーが発生する

デバッグのベストプラクティス

次章で解説する内容

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル