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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

組み込み時を想定する

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

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

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

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

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

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

まとめ

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

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

Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。


パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


投稿者 横田 東母子

プレイヤーとして運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、Rails組み込み等でコードを書いたり、マネージャーとして担当プロジェクトを前に進めるための要件整理や社内リソース管理、顧客とのコミュニケーションなどを担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。