UI部品 基本編
| この記事でわかること： ・クライアント側バリデーションの役割と基本的な考え方 ・セル型の設定による入力制御の方法 ・データの入力規則を用いたチェック処理の実装方法 ・実務ユースケース（見積入力アプリ）における具体的な活用 |
見積入力などの業務画面では、数量や金額、日付の入力ミスによって「登録エラー→修正依頼→再入力」といった手戻りが発生しがちです。
こうした問題は、入力時点での制御とチェックを設計することで大きく減らすことができます。
本記事では、セル型の設定とデータの入力規則を使い、リアルタイムで入力ミスを防ぐ方法を体系的に解説します。
| プロジェクトファイル （作成バージョン：(10.0.14.0） | validation-check1_before.fgcp validation-check1_after.fgcp（実装済みプロジェクトファイル） |
1.入力チェックの基本
業務アプリケーションの適正な運用にはシステムとして正しいデータが登録されいていることが必須です。そのため、入力値のチェックは重要な役割を持っています。
Webアプリケーションにおける入力値チェックには、Webブラウザー上で動作するフロントエンドとサーバー側で動作するバックエンドの2つの方法があり、それぞれチェックの目的や役割が異なります。
| フロントエンド | バックエンド | |
|---|---|---|
| 目的・ 役割 | ユーザービリティ・UX向上 ・即時性：入力ミスを即時検知 ・効率性：正しい入力を促す サーバー側の負荷や無用通信の削減 | データの正当性、一貫性 システムとしての堅牢性 セキュリティ 不正アクセス、改ざん対策 |
| 主な チェック | 必須入力 データ型、フォーマット 文字数、桁数 数値や日時の範囲 ビジネスロジック （フロント側にある値との比較など） | フロント側と同じチェック 複雑なビジネスロジック 他データとの整合性 複数のテーブルデータに対する整合性 セキュリティ対策 SQLインジェクション XSS（スクリプト混入） |
| 苦手な こと | サーバー側にあるデータとの比較するようなビジネスロジックによる値のチェック JavaScriptが無効化されると機能しない 通信におけるリクエスト改ざんの可能性 （信用できない） | 即時性が低く、入力者の効率を妨げる |
Forguncyで作成するWebアプリケーションにおいても、フロントエンド側とバックエンド側のいずれにも入力値チェックの機能を実装することができます。
今回はフロントエンド側で実装できる入力値チェックについて解説します。
2.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順2-1.テーブルを確認
プロジェクトには既にテーブルが内蔵されています。今回は見積テーブルを使用します。
手順2-2.ページを確認
プロジェクトには複数のページが内蔵されています。
「見積一覧」ページは見積テーブルに登録されているデータを一覧表形式で表示するページです。「見積入力」ページは新規に見積データを登録する際に使用するページです。
今回はこの「見積入力」ページに入力チェックを実装していきます。
3.セル型を設定する
入力欄にセル型を設定し、入力する内容を制限します。数値や日付など入力内容が固定されているものは、入力欄にテキストボックスではなく入力値に合わせたセル型を指定することで入力できる値を制限できます。
手順3-1.日付型セルを設定
入力欄となるセルに日付型セルを設定し、他の形式の値が入力されないよう設定します。対象となる項目は見積日と納期です。
G2セルを選択した状態で、リボンのホーム＞セル型から日付型セルを選択します。
同様に、G10セルも日付型に変更します。
手順3-2.コンボボックスを設定
入力欄となるセルにコンボボックス型セルを設定し、リストに表示されているデータ以外を入力できないよう設定します。リストの項目は自由に設定できます。今回対象となる項目は顧客区分です。
G3セルを選択した状態で、リボンのホーム＞セル型からコンボボックス型セルを選択します。
右ペインの[セル型]タブにある[リスト項目]に、コンボボックス内のリストに表示するデータを入力します。今回は「新規」と「既存」と入力します。
手順3-3.数値型セルを設定
入力欄となるセルに数値型セルを設定し、数字以外を入力できないよう設定します。対象となる項目は数量と単価です。
G6セルを選択した状態で、リボンのホーム＞セル型から数値型セルを選択します。
G7セルにも同様の操作を行います。
4.入力規則を設定する
入力欄にデータの入力規則を設定します。データの入力規則は数式や正規表現を使えるため、入力必須の有無や文字数の制限など詳細なチェックロジックも実装できます。ここでは、代表して2種類をご紹介します。
手順4-1.指定の値より大きい数値のみを許可
数量、単価は0よりも大きい値以外が入力されることの無いよう、入力規則を設定します。
G6セルを選択した状態で右ペインの[セル型]タブから[データの入力規則…]をクリックします。データの入力規則ウィンドウが開くので、[設定]タブで以下のように条件を指定します。
| 入力値の種類 | 整数 |
| データ | 次の値より大きい |
| 最小値 | 0 |
また、[未入力を許可する]のチェックは外しておきます。こうすることで、入力漏れを防げます。
設定ができたら、単価の入力欄（G7セル）にも全く同じように設定を行います。
手順4-2.指定の値より先の日付のみを許可
納期の日付は見積日より前の日付にならないよう、入力規則を設定します。
G10セルを選択した状態で右ペインの[セル型]タブから[データの入力規則…]をクリックします。データの入力規則ウィンドウが開くので、[設定]タブで以下のように条件を指定します。
| 入力値の種類 | 日付 |
| データ | 次の値以上 |
| 最小値 | =G2 |
また、こちらも[未入力を許可する]のチェックは外しておきます。こうすることで、見積日に入力された日付の値より先の日付のみを、必ず入力させるよう設定できます。
5.デバッグを実行する
デバッグを行うには、動作確認したいページを開いた状態でリボンの[ホーム]>[デバッグ実行]>[▶]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
プロジェクトを実行すると、「見積一覧」ページが表示されます。
新規登録ボタンを押下すると「見積入力」ページが表示されます。各項目にこれまでの手順で実装した入力チェックがセットされているので、実際に値を入力して動作を確認してください。登録ボタンを押下すると入力チェックで問題が無い場合のみデータが新たに登録されます。
ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。
