基本操作

Power Appsでメアドや電話番号の形式間違いを防ぐ!IsMatch関数を使ったフォーマットチェック術

Power Appsでメアドや電話番号の形式間違いを防ぐ!IsMatch関数を使ったフォーマットチェック術

「@」マークのないメールアドレスが登録されていたことがあります。入力した本人は正しいつもりでも、システムはそのまま通してしまいます。

IsMatch関数を使えば、メールアドレスや電話番号の形式をリアルタイムでチェックし、間違いがあれば即座にフィードバックできます。正規表現と聞くと難しそうですが、Power Appsには組み込みパターンが用意されているので、意外とシンプルに実装できます。

なぜ形式チェックが必要か

名簿登録・問い合わせフォーム・社内申請など、メールアドレスや電話番号を入力させる場面は多いです。しかし「必須チェック(IsBlank)」だけでは、何かが入力されているかどうかしか確認できません。

問題は「形式が正しいかどうか」です。「test@」や「090-1234」のような不完全な値も、IsBlankの観点では合格してしまいます。後から連絡を取ろうとしたとき、データが使い物にならないと気づいても遅いです。

IsMatch関数はこの問題に対処するための関数です。入力値が指定したパターンに一致するかどうかをtrueかfalseで返します。必須チェックと組み合わせることで、「何か入力されていて、かつ正しい形式である」ことを同時に保証できます。

Power Apps入力ミス防止ガイドでも、フォーマット制御はバリデーションの重要な柱として位置づけています。

IsMatch関数の基本構文

IsMatch関数の基本的な書き方は次のとおりです。

IsMatch(テキスト, パターン)

第一引数に検証したいテキスト、第二引数にパターンを指定します。パターンには、Power Appsが用意している組み込みパターン(Match列挙型)か、正規表現文字列を使います。

戻り値はtrueまたはfalseです。一致すればtrue、一致しなければfalseが返ります。

組み込みパターン一覧

Power Appsには、よく使うパターンがあらかじめ定義されています。

パターン 意味 使いどき
Match.Email メールアドレス形式 メアド入力欄
Match.Digit 1桁の数字 電話番号・郵便番号(繰り返しと組み合わせ)
Match.Letter 1文字のアルファベット 英字チェック
Match.MultipleLetters 1文字以上のアルファベット 英単語チェック
Match.MultipleDigits 1桁以上の数字列 数値文字列の汎用チェック

メールアドレスのチェックなら、こう書きます。

IsMatch(txtEmail.Text, Match.Email)

実装パターン①:変数+アイコンでリアルタイムフィードバック

入力中に正誤をリアルタイムで表示するUXは、ユーザーのストレスを大幅に減らします。実装のポイントは3つです。

OnChangeプロパティで変数をセット

テキスト入力コントロールのOnChangeプロパティに、次の式を書きます。

If(
    IsMatch(txtEmail.Text, Match.Email),
    Set(varValidEmail, true),
    Set(varValidEmail, false)
)

入力のたびにIsMatchが評価され、結果が変数に格納されます。

アイコンコントロールで合否を視覚化

チェックアイコンと警告アイコンを組み合わせて表示します。アイコンコントロールの各プロパティを次のように設定します。

  • Icon:If(varValidEmail, Icon.Check, Icon.Warning)
  • Color:If(varValidEmail, Color.Green, Color.Red)
  • Visible:Not(IsBlank(txtEmail.Text))(未入力時は非表示)

これで、入力が始まったらアイコンが現れ、正しい形式ならチェックマーク、間違っていれば警告マークが表示されます。入力前から赤いアイコンが出て「なぜ怒られてるの?」となるのを防ぐ工夫です。

DelayOutputで入力途中の誤検知を防ぐ

テキスト入力コントロールには DelayOutput プロパティがあります。これをtrueにすると、入力が止まってから約1秒後にOnChangeが発火します。デフォルト(false)では1文字打つたびに評価されるため、入力途中でずっとエラー表示になるストレスが生まれます。

実務では DelayOutput を true にするのをおすすめします。設定場所はコントロールのプロパティパネル、または数式バーから直接 DelayOutput: true と書きます。

実装パターン②:背景色で視覚フィードバック

アイコンを使わず、入力欄の背景色を変えてフィードバックするパターンもあります。テキスト入力コントロールの Fill プロパティに次の式を設定します。

If(
    varValidEmail,
    Color.White,
    If(IsBlank(txtEmail.Text), Color.White, Color.LightCoral)
)

ポイントは、空欄のときは白(エラー色にしない)、入力後に不正なら薄赤、正しければ白に戻るという3段階の制御です。未入力なのに赤くなると、フォームを開いた瞬間から全項目が赤くなって見た目が悪くなります。

枠線を赤くするパターンは、未入力項目の枠線を赤く光らせるUX改善の記事で詳しく解説しています。

正規表現を使ったカスタムパターン

組み込みパターンでは対応できない場合、正規表現文字列を直接指定できます。

電話番号(10桁または11桁の数字)のチェック

IsMatch(txtPhone.Text, "d{10,11}")

ハイフンなしの数字のみを想定した場合のパターンです。ハイフンありの形式(例:090-1234-5678)を許容する場合は、パターンを調整する必要があります。

IsMatch(txtPhone.Text, "d{2,4}-d{2,4}-d{4}")

URLの先頭チェック

URLが「https://」から始まっているかどうかだけ確認したい場合は、MatchOptions.BeginsWithを第3引数に指定します。

IsMatch(txtURL.Text, "https://", MatchOptions.BeginsWith)

MatchOptionsを使うことで、文字列全体ではなく「先頭だけ」「末尾だけ」の部分マッチも可能になります。

送信ボタンの制御と組み合わせる

バリデーションを実装しても、ボタンを制御しなければ無効な値のまま送信できてしまいます。送信ボタンのDisplayModeプロパティに次の式を設定します。

If(
    Or(IsBlank(txtEmail.Text), Not(varValidEmail)),
    DisplayMode.Disabled,
    DisplayMode.Edit
)

メールアドレスが空欄か、形式が不正な場合はボタンが押せない状態になります。複数フィールドを同時にチェックする場合はOrでつなげていきます。

変数を使ったエラーフラグの設計については、グローバル変数とコンテキスト変数の使い分けガイドも参考にしてください。

IsMatchを使う上での注意点

IsMatch関数を使い始めると、いくつかの落とし穴に気づきます。

ひとつは、組み込みパターン Match.Email は厳密なRFC準拠ではないという点です。実務上のメールアドレスのほぼすべてはカバーできますが、極めて特殊な形式に対応しきれない場合があります。実用上は問題になりません。

もうひとつは、入力欄が空欄のとき IsMatch は false を返すという点です。IsBlankとIsMatchを組み合わせる場合、「空欄かどうか」と「形式が正しいかどうか」を別々に判定するか、空欄時だけ評価を免除する設計を明示的に書く必要があります。

If(
    IsBlank(txtEmail.Text),
    true,  // 空欄は別途必須チェックに任せる
    IsMatch(txtEmail.Text, Match.Email)
)

このように役割を分けて書くと、それぞれのチェックが独立してわかりやすくなります。

フォームの品質はバリデーションの積み重ねでできている

IsMatch関数は、コントロールのOnChangeに数行書くだけで動作します。正規表現というと身構えてしまいがちですが、Match.Emailなどの組み込みパターンがあれば正規表現を書かずに済むケースが大半です。

アイコンの切り替えやDelayOutputの設定も含めて、実装そのものは30分かからないと思います。それで連絡先データの品質が大きく上がるなら、やっておく価値は十分あります。トライしてみましょう。

コメント

    投稿されたコメントは内容を確認の上、後日公開されます。すぐには表示されません。