フォームは、単純なニュースレターの登録から複雑なエンタープライズ アプリケーションに至るまで、デジタル世界のあらゆる場所に存在します。基本的なフォームは、Formik や React Hook Form などの一般的なツールで簡単に処理できますが、エンタープライズ レベルのフォームには、既存のソリューションが対処するのに苦労している重大な課題が引き続き存在します。
エンタープライズレベル フォームは、単純な入力フィールドや送信ボタンを超えています。これらは、金融、銀行、保険などの業界の複雑なワークフローのバックボーンです。これらのフォームは、高度な機能、スケーラビリティ、およびユーザー エクスペリエンスのバランスをとる必要があり、単純なフォームとは根本的に異なります。
ローン申請: 金利、月々の支払い、および収入に対する負債の比率 リアルタイムで。 信用スコアや収入確認要件に基づく融資限度額などの規制遵守ルールを強制する必要があります。
納税申告: さまざまな収入源、控除、およびクレジット。税務当局の規則に照らして検証し、複数のセッションにわたる草案の保存をサポートし、項目別控除 と 標準控除 のような複雑なワークフローをユーザーにガイドする必要があります。
: 保険請求の種類 (自動車、住宅、生命) と 保険の詳細 に基づいて適応される洗練されたフォーム。既存の顧客データを使用してフィールドに事前入力し、証拠の添付ファイルを処理し、複雑な検証ルールを実装し (例: 保険金請求額 は保険の限度額を超えることはできません)、競合他社との差別化を図るためにさまざまな保険商品にわたって一貫したブランディングを維持します。 .
このようなミッションクリティカルでありながらコストがかかるフォームを、私は「エンタープライズレベルのフォーム」と呼んでいます。
エンタープライズレベル
非技術的利害関係者の関与: 融資は複雑であり、財務、会計、法律分野の専門知識が関与しており、これらの専門知識は通常、非技術的利害関係者が保有しています。これらの利害関係者は、「申請者の信用スコアが 650 未満の場合、連帯保証人が必要である」 または 「月間総収入を次の値で割って負債と収入の比率を計算する」などの複雑なビジネス ルールを理解しています。毎月の借金の合計支払い額"。重要な課題は、開発者にすべてのルールを教えるために過度の時間を費やすことなく、これらの関係者が効率的にフォーム設計を主導できるようにすると同時に、エッジケースに対処するためのスムーズなコラボレーションを確保できるようにすることです。
ブランド化された UI とカスタム UX: 開発者も重要です!企業はありきたりなフォームデザインを望んでいません。すべての真剣な企業は、自社のブランドを構築し、独自のユーザー エクスペリエンスを提供したいと考えており、その目標を達成するには開発者の専門知識が必要です。たとえば、銀行は、ローン申請を自社のブランドカラーに合わせたり、カスタム入力コンポーネントを使用したり、「個人情報」、「雇用詳細」、および 「融資条件」。
計算、公式、動的動作: ローン申請フォームには、さまざまな複雑なリアルタイム計算と動的動作が必要な場合があります。
自動保存と再開: 複雑なフォームには何百ものフィールドが含まれる場合があります。ユーザーは誤ってブラウザを閉じても最初からやり直す必要はありません。
その他の技術的課題:
これらは特定のシナリオに特有の特殊な問題ではなく、企業が複雑なフォームを構築する際に直面する一般的な課題です。ビジネスの複雑さ、技術的要件、ユーザー エクスペリエンスのニーズが組み合わさることにより、エンタープライズ レベルのフォームを効果的に実装することが特に困難になります。
Formik や React Hook Form などの一般的なフォーム ライブラリは、基本的なフォームの処理には優れていますが、企業のニーズを念頭に置いて構築されていません。前述の課題に照らしてこれらのツールを検討すると、いくつかの制限が明らかになります。
現在のフォーム ライブラリは開発者中心であり、フォーム ロジックを定義するには JavaScript/TypeScript の知識が必要です。
これによりカスタマイズが可能になりますが、複雑なルールを含むフォーム配信の効率が大幅に低下します。例:
フォームルールに複雑な計算が含まれる場合、利害関係者は「融資上限額を年収の4倍として計算する」などの口頭説明を使用して開発者に段階的に説明する必要があります。 、信用スコアが 700 未満の場合は 15% 減額調整され、月々の総収入に対する既存の月々の借金返済額の割合によってさらに 10% 減額されます。職歴が 2 年未満の場合」、ただし、これらの計算は専門分野では常識である可能性があります。
融資限度額の調整など、フォーム ルールの変更が必要な場合、関係者は変更の実装を開発者に依存する必要があり、その結果、プロセスが長くなり、納期も長くなります。
両方の既存のライブラリは (開発者中心 という性質のため) この点で優れており、強力なカスタマイズ機能を提供します。たとえば、React Hook Form は、制御された入力コンポーネントを適応させるためのコントローラー コンポーネントを提供します。
既存のライブラリは、「機能する」計算機能を提供しますが、複雑な計算のための抽象化機能や編成機能が不足しています。
React Hook Form でローン計算ツールを実装することを検討してください:
function LoanForm() {
const { watch, setValue } = useForm()
const [loanAmount, interestRate, term] = watch([
'loanAmount',
'interestRate',
'term',
])
useEffect(() => {
if (loanAmount && interestRate && term) {
const monthlyRate = interestRate / 100 / 12
const months = term * 12
const payment =
(loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
(Math.pow(1 + monthlyRate, months) - 1)
setValue('monthlyPayment', payment.toFixed(2))
}
}, [loanAmount, interestRate, term, setValue])
return (
<form>
{/* ... */}
<input type="number" {...register('monthlyPayment')} />
{/* ... */}
</form>
)
}
このアプローチにはいくつかの欠点があります:
これらのライブラリには、自動保存と再開のための組み込みソリューションはありません。自動保存機能を実装するには、大幅なカスタム コードが必要です。開発者は以下を処理する必要があります:
これらの制限により、エンタープライズ アプリケーションの開発オーバーヘッドが大幅に増加し、市場投入までの時間が長くなり、メンテナンス コストが増加します。回避策は存在しますが、多くの場合、保守や拡張が困難な複雑で脆弱なソリューションが得られます。
FormML は、次のセクションで説明するように、エンタープライズ レベルのフォーム向けに特別に設計されたドメイン固有の言語とアーキテクチャを通じてこれらの課題に対処します。
FormML (Form Modeling Language の略) は、「フォーマル」と発音され、エンタープライズ レベルのフォームの課題に取り組むために特別に設計された新しいオープンソース フレームワークです。他のツールによって残されたギャップを埋める方法は次のとおりです:
その正式名称「フォーム モデリング言語」が示すように、FormML は、直感的で開発者以外にも使いやすい ドメイン固有言語 (DSL) を導入しています。そのシンプルな構造、最小限の構文、自然な用語により、財務専門家、法律専門家、およびその他の非技術的関係者は、プログラミング スキルを必要とせずにフォームをモデル化できます。
プログラミングの知識がなくても、熟練した会計士でも、最もシンプルで実行可能な税務記入フォームを作成できます。
function LoanForm() {
const { watch, setValue } = useForm()
const [loanAmount, interestRate, term] = watch([
'loanAmount',
'interestRate',
'term',
])
useEffect(() => {
if (loanAmount && interestRate && term) {
const monthlyRate = interestRate / 100 / 12
const months = term * 12
const payment =
(loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
(Math.pow(1 + monthlyRate, months) - 1)
setValue('monthlyPayment', payment.toFixed(2))
}
}, [loanAmount, interestRate, term, setValue])
return (
<form>
{/* ... */}
<input type="number" {...register('monthlyPayment')} />
{/* ... */}
</form>
)
}
FormML は、フォーム ロジックを UI プレゼンテーションから明確に分離する、堅牢な モデルとビューの分離アーキテクチャ を採用しています。ドメインの専門家は、FormML DSL を使用して .fml ファイルでフォームの構造、タイプ、動作 (「モデル」) を定義します。
この分離により、開発者は、基礎となるビジネス ロジックを気にすることなく、他のフォーム ライブラリと同じ柔軟性を備えた洗練されたカスタム UI エクスペリエンス (「ビュー」) の作成に完全に集中できるようになります。
function LoanForm() {
const { watch, setValue } = useForm()
const [loanAmount, interestRate, term] = watch([
'loanAmount',
'interestRate',
'term',
])
useEffect(() => {
if (loanAmount && interestRate && term) {
const monthlyRate = interestRate / 100 / 12
const months = term * 12
const payment =
(loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
(Math.pow(1 + monthlyRate, months) - 1)
setValue('monthlyPayment', payment.toFixed(2))
}
}, [loanAmount, interestRate, term, setValue])
return (
<form>
{/* ... */}
<input type="number" {...register('monthlyPayment')} />
{/* ... */}
</form>
)
}
FormML は動的な動作を 第一級市民 として扱います。 JavaScript 式 または Excel のような式 システム (WIP) を使用して、DSL で直接リアルタイム計算をサポートします。たとえば、上記の例の入力フィールドに基づいて税金を計算するのは簡単で、最小限の労力で済みます。
FormML は、自動保存と再開も 第一級市民 として扱います。状態の永続化、競合解決、データ同期、進行状況の追跡、すぐに使えるエラー回復をサポートする予定です。
基本的なフォームはほぼ解決されていますが、エンタープライズレベルのフォームには引き続き特有の課題が存在します。 FormML は、これらの永続的な問題に対処する上で一歩前進し、パワー、柔軟性、使いやすさのバランスをとった包括的なソリューションを提供します。
複雑な計算、動的な動作、チーム間のコラボレーションに苦労している場合でも、FormML はエンタープライズ レベルのフォームの課題に特化して設計されたフレームワークを提供します。
エンタープライズ フォームの課題に取り組む準備はできていますか? X または Bluesky で私のアカウントをフォローし、最初のリリース後に試してみてください!
以上が基本フォームを超えて: エンタープライズレベルのフォームが依然として課題である理由 (および FormML がそれを解決する方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
