フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】

フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】

どうすれば使いやすい?UIコンポーネントの設計

UIコンポーネントとは、Webアプリケーションの画面を構成するユーザーインターフェースの部品のことです。
直近のWebアプリケーションにおける開発作業では、ReactやAngularをはじめとするコンポーネント指向のライブラリを積極利用が進んでいます。
またWeb Componentsという仕様の策定からコンポーネント単位で開発をすることで、コンポーネントを組み合わせてアプリケーションの画面を構築する手法というものが開発の主流になりつつあります。
今回はそんなUIコンポーネントの「最良な設計方法」についてまとめました。

UIコンポーネントの設計のポイント

UIコンポーネントの設計にあたっては、親やほかのコンポーネントに依存しない開発方針を貫くことが重要です。
これを実現することで、再利用が可能になり、かつテストしやすいコンポーネントを実現できるのです。
こういった考え方が、全体的に「コストをかけない設計の基本発想」に繋がってくることを覚えておきましょう。

押さえておきたいコンポーネント間の依存

コンポーネントの開発ですが、「親子関係ではないコンポーネントへの依存」を許容することで、アプリケーションが次第に肥大化することになり、結果的に実装するコンポーネント間のやり取りが必要以上に多くなっていきます。
結果として、メンテナンスコストにも大きく影響を与えることになってしまいます。
こうした依存関係を排除するためには、ほかのコンポーネントに依存した処理を直接行わないようにすることが重要です。
細かな設計の工夫をすることで、効率的なものを生み出すことができるのです。

親に依存したコンポーネントのスタイリング例

親に依存したスタイリングには様々な問題があります。
以下のスタイルのようにButtonがレイアウトに関する情報を持っていると、他でButtonを使おうとしたときに、とても使いにくくなってしまいます。

.Button {
  position: absolute;
  top: 4px;
  left: 4px;
  border: 1px solid #CCC;
  border-radius: 4px
}

ひとつの解決法としては、Buttonは装飾に関するスタイルだけを定義し、それがどのように配置されるかは別途定義することにします。こうすることでButtonは、ほかでも同様に使える汎用性の高いコンポーネントにできるのです。

.Button {
  border: 1px solid #CCC;
  border-radius: 4px
}

このように、ちょっとした設定を変更することで、親への非依存を実現し、利用の自由度を高められるのです。長期的に安定的かつ経済的なシステムを実現するために、ぜひ上記のことを覚えておきましょう。

【相談無料】案件の紹介や自身のキャリアについてなど相談したい方はこちら
スタートアップ、ベンチャー、大手・上場企業、VCなどIT業界の人脈豊富なコンサルタントがサポートさせていただきます

Return Top