Skip to main content

導入指標

本節では、省力化コンポーネントの導入を検討する際の指標となる情報を提供します。

まず、読者の皆さんが開発する予定のシステムには、次に示す 8 つの特徴のうちどの画面に該当するものが多いでしょうか。 これらの項目を確認することで、省力化コンポーネントの導入が効果的かどうかを判断できます。

★ 効果の高い画面の特徴

  • 入力系の画面項目が多い
  • クライアントサイドバリデーションを実施する
  • ボタン押下時のイベント処理が多い
  • 入力項目の並びがシンプル

★ 効果の出にくい画面の特徴

  • 入力系の画面項目が動的に増減する
  • 参照系の画面項目が多い
  • ボタン押下時以外のイベント処理が多い
  • 1 つの画面項目に対してデザインが複数ある

効果の高い画面の特徴が多く当てはまる場合、省力化コンポーネントの導入効果は高いと言えます。前節で示した省力化コンポーネントの特徴により、コードの量を大幅に削減しつつ、開発効率を向上させることができます。

一方で、効果の出にくい画面の特徴の項目が多く当てはまる場合、省力化コンポーネントの導入効果は得られにくいかもしれません。省力化コンポーネントの持つ特徴を活かせない、もしくは適用させるためにライブラリの拡張が必要になるケースがあります。

warning

UI コンポーネントライブラリとして、Ant Design、Material UI、React Bootstrapのいずれかを使う場合、省力化コンポーネントが標準で部品を提供しているためすぐに導入できます。

導入効果が高い画面の特徴​

省力化コンポーネントの導入効果が高い画面の特徴については以下の通りです。

入力系の画面項目が多い​

  • 入力項目の定義が 1-2 行で書けるため、少ないコード量で画面を実装できます。

クライアントサイドバリデーションを実施する​

  • バリデーションの定義が簡潔に書けるため、少ないコード量でクライアントサイドバリデーションを実装できます。

ボタン押下時のイベント処理が多い​

  • 高機能なボタンに必要なパラメータを渡すだけで、API 呼び出しやバリデーション処理を実施できます。

入力項目の並びがシンプル​

  • 省力化コンポーネントが提供する自動レイアウト機能を使うことで、ほぼノンプログラミングで項目を配置できます。
info

バックオフィス系のシステムは、前述の 4 つの条件に当てはまる画面が多いため導入効果が高い傾向にあります。

info

プロジェクトへの導入方法については導入ガイドを参照してください。

導入効果が得られにくい画面の特徴​

省力化コンポーネントの導入効果が得られにくい画面の特徴については以下の通りです。

入力系の画面項目が動的に増減する​

warning

この特徴に当てはまる場合、省力化コンポーネントと組み合わせた実装が困難または複雑になり得るため導入をお勧めしません。

画面項目が動的に増減するとは、ユーザーの操作や入力内容によって、入力項目が増えたり減ったりすることを指します。
省力化コンポーネントではカスタムフックを使用して入力項目を作成しています。そのため、条件によって動的に項目数を増減させるといった操作を行うことが難しくなります。

参照系の画面項目が多い​

warning

この特徴に当てはまる場合、省力化コンポーネントの導入によるコード削減の効果はあまり期待できません。

省力化コンポーネントは、入力フィールドやイベントハンドリングの実装時にコードの重複を減らす目的で開発されました。そのため、図表や画像、読み取り項目といった参照系の要素が多く含まれる画面においては、省力化コンポーネントによるコード削減の効果は限定的になります。

ボタン押下時以外のイベント処理が多い​

warning

この特徴に当てはまる場合、省力化コンポーネントの拡張が必要になるため、拡張コストと導入効果のバランスを考慮して導入の判断をする必要があります。

テーブル行の入れ替えやリンク押下といったボタン押下時以外のイベントに対して、省力化コンポーネントは標準機能を提供していません。そのため、これらのイベントに対応する処理はカスタムで実装する必要があります。

1 つの画面項目に対してデザインが複数ある​

warning

この特徴に当てはまる場合、省力化コンポーネントの拡張が必要になるため、拡張コストと導入効果のバランスを考慮して導入の判断をする必要があります。
拡張方法についてはTipsを参照してください。

省力化コンポーネントは、基本 1 つの入力部品が 1 つのデザインを内部で持っています。そのため、例えば 1 つの入力部品に対してデザインが 2 つ以上ある場合には、デザインの数だけ異なるコンポーネントを作成する必要があります。

ただし、パラメータとして CSS のクラス名を渡すことで、1 つのコンポーネントでも多少のデザインのカスタマイズは可能です。

info

コンシューマー向けのシステムは、前述の 4 つの条件に当てはまる画面が多いため、導入効果が得られにくい傾向にあります。

本節では、省力化コンポーネントの導入効果が高い画面と導入効果が得られにくい画面の特徴について詳しく説明しました。これらのポイントを理解し、省力化コンポーネントを導入するかどうかの検討を行ってください。