Web アプリケーションの実装初期段階にスタイルをあてるコンポーネント実装で考慮していること

こんにちは、 Gaji-Labo 横田です。

先日、鈴木が「新規プロジェクトの初期段階でどのように開発を進めていくか」という記事を書きましたが、 Web アプリケーションでフロントエンドの実装をする場合、ページの機能開発とスタイルをあてるコンポーネントの実装を分担しながら同時進行で進めることがあります。

今回は、そのような初期段階で、スタイルをあてるコンポーネント実装時に考慮していることにフォーカスしてみます。

デザインや仕様の揺れを想定する

新規プロジェクトの初期段階ではデザインや仕様が確定していないので手戻りやデザインアップデートは発生する前提です。そのため、コンポーネントのスタイル設計において、汎用性を重要視しています。

どんなページに置かれても破綻しないように、特に考慮してる点を挙げてみます。

コンポーネント内で指定する色をある程度自由に選択できるような作りとする

初期段階ではデザインアップデートの頻度が高いため、コンポーネント内で指定する色を固定してしまうとその後のアップデートで色が変更された時に逐一スタイル変更が必要になります。

そのため、デザインアップデートを考慮し、初期段階ではある程度自由に色選択できる作りにすることで、その後の対応を柔軟に行うことができるようになります。

コンポーネント自体ではなく、そのコンポーネントを内包するコンテナでレイアウトを行うようにする

例えば input 系やボタン、カード系コンポーネントで、そのコンポーネント自体で幅や高さを固定してしまうと、デザインのアップデートでコンポーネントそのもののスタイル変更が必要になることはもちろん、コンポーネントをページに組み込む時の使われ方に対応しきれなくなってしまうこともあります。

そのため幅や高さなどのレイアウトに関するスタイルは、そのコンポーネント自体ではなく、コンポーネントを内包するコンテナの責務で持つようにします。

コンポーネントが持つスタイルの責務はどこまでかを定めることは、特に開発の初期段階において重要です。

動的に扱われることに耐えうる実装にする

Web アプリケーションでは、ほとんどのコンポーネントは動的に扱われます。

そのため、どのような要素が入ったとしても、またいくつ並列されたとしても対応できるようにスタイル実装することが必要です。

組み込み時を想定する

Web アプリケーション開発で、ページの機能開発とコンポーネントのスタイル実装を並行していて、ここまで挙げた点を考慮する時には、実装担当間でのすりあわせが必要になってきます。

特に新規プロジェクトを進める初期段階では仕様がまだ確定していないことが多いため、組み込み時を考慮した汎用的なコンポーネントを実装する上で、今後の想定を共有することが重要です。

React コンポーネントであれば「そのコンポーネントはどのような機能と状態を持っているか」「そのコンポーネントはどのような props を受け取るようになっているか」など、スタイルと同じく、機能においてもコンポーネントの責務を実装担当間ですりあわせて、定めるようにします。

例えば値を受け取って表示するコンポーネントに、その値を操作する役割まで持たせると値を外部から扱うことができなくなり、使いづらいコンポーネントとなってしまいます。

また、 TypeScript で実装している時などは、 props が必須かそうでないかを指定することができますが、特に開発の初期段階では全て必須にしてしまうと柔軟に使えなくなってしまうため、必須かそうでないかをすりあわせて必要なものだけ必須とします。

ページや機能の中でコンポーネントが持つべき役割の想定を実装者間ですりあわせ、組み込み時の使いづらさを解消していくことで、並行・分担していてもスムーズに実装を進められるようになります。

まとめ

今回は、新規プロジェクトの初期段階でページの機能開発とスタイルをあてたコンポーネントの実装を並行して進めるにあたり、考慮していることについてまとめました。

実装担当者間で組み込み時を想定した認識のすりあわせを行い、デザインや仕様の揺れを前提にコンポーネントの責務まで考慮して実装することは、実装初期段階に並行・分担しながらも、スピードを保った進め方ができ、コンポーネントの使いやすさや堅牢さにも繋がると考えています。

Gaji-Laboブログ内には、他にもチーム開発でのWebフロントエンドについて取り上げた記事があります。
チーム開発のために必要なコーディングルールやスタイルガイド、コンポーネントの設計方法など、実践をもとにしたリアルなWebフロントエンド知見に興味がある方におすすめの記事シリーズを「チーム開発でのWebフロントエンド」としてまとめていますので、あわせてお読みいただけるとうれしいです。