コンポーネントの分割について

アプリ開発では、コンポーネントを適切に分割することは非常に重要です。画面を1つのコンポーネント内に実装すると、コードが肥大化してしまいます。また、他の画面で同じような表示をする場合に再利用できません。

では、コンポーネントはどのような単位で分割すれば良いのでしょうか。

それには、UIの設計方法が大きく関係します。

例えば、アプリ開発ではデザインシステムと呼ばれる一貫したデザインや操作性を提供するためのガイドラインを定義することがあります。デジタル庁では以下のようなデザインシステムを定義しています。

デザインシステムでは、デザインの一貫性を定義すると同時に、画面を構成する要素を整理して適切な部品に切り分けます。これらの部品を複数の箇所で再利用することで、開発効率も格段に向上します。

そのため、初期コストはかかりますが、デザインシステムを定義することはアプリ開発において非常に有効です。

アプリを開発するエンジニアは、デザインシステムがある場合、その定義に従ってコンポーネントを分割する必要があります。

デザインシステムは、UIの設計の1つです。それに従わず、エンジニアが独自にコンポーネントを分割してしまうと、デザインシステムの変更がアプリに及ぼす影響を正確に把握することが難しくなります。

もし、コンポーネントの分割方法を変更したい場合は、必ずデザインシステムも併せて変更するようにしてください。

なお、Q&AアプリではFigmaを使用してデザインシステムを定義しています。

デザインシステムが定義されていない場合は、エンジニアが自身でコンポーネントの分割単位を決める必要があります。

前述したように、画面を1つのコンポーネント内に実装すると、コードが肥大化してしまいます。また、他の画面で同じような表示をする場合に再利用できません。

これらを解決するためにも、画面を構成する要素を適切な単位で分割し、それらを別々のコンポーネントとして実装することをおすすめします。そうすることにより、コードの視認性や再利用性が向上します。

この場合、以下のような手順で実施すると良いでしょう。

No	手順	説明
1	基本部品の一覧化	画面を構成する要素の基本となる部品を整理します。これは、Atomic DesignのAtomsやMoleculesに該当するような部品です。 React Native ElementsやReact Native Paperなど、UIライブラリが提供するコンポーネントは基本部品とする単位の参考になります。全画面で使用する基本部品を洗い出し、再利用可能な部品として一覧化します。
2	基本部品を組み合わせた部品の一覧化	No.1で整理した基本部品を組み合わせて、画面を構成する要素となる部品を一覧化します。これは、Atomic DesignのOrganismsに該当するような部品です。ここで整理した部品は、必ずしも再利用可能な部品ではなく、特定の画面にしか使用しない部品も含まれます。
3	画面で使用する部品の一覧化	No.1とNo.2で整理した部品が、どの画面で使われるのかを一覧化します。
4	部品の実装	No.1とNo.2で整理した部品を実装します。