0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

コンポーネント設計とは

Last updated at Posted at 2023-06-14

コンポーネントとは

コンポーネント(component)とは、部品や成分を意味する英単語であり、機械や電子機器、オーディオ機器など幅広い分野で使用されます。 IT分野においては、機器やソフトウェア、システムを構成する部品や要素のことを示します。

上記からIT分野においてはプログラムの部品に分ける設計の事をいうと考えられる。

デプロイ単位の事をいうこともあり、システムの一部としてデプロイできる最小限のまとまりを指す。

コンポーネント指向とは

アプリケーションにおいてはプログラムを部品と捉え、それを組み合わせて開発する考え方の事という。
例えばインターフェース上のパーツは汎用的にすることを考えて、
名称、粒度、バリエーションを意識して他のページでも使いまわせるように設計する事をいう。

コンポーネント図とは

クラスやオブジェクトの実装コンポーネントへの割り当てを表示したり、ソースコードや実行モジュールの間の依存関係を表現したりする。

メリット

画面のデザインを統一することができる
コンポーネントごとに分割したコードを作成できる

  • 一貫性
  • 再利用性
  • 拡張性
  • 保守性

を高めることができる。

デメリット

  • 人によって粒度がバラバラになりがち
  • こんなに細かく分割必要があるのか疑問が生まれてくる
  • 何のためにしているのかわからなくなる場合がある

デメリットを防ぐためにルールを定めたり粒度・分割の認識を合わせておく必要がある。
また、デザイン観点よりも開発観点でも正解を優先する必要がある。

参考サイト

用語集
https://www.ntt.com/business/sdpf/glossary/011.html#:~:text=%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%88component%EF%BC%89%E3%81%A8%E3%81%AF%E3%80%81,%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E7%A4%BA%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

コンポーネントに関する6つの原則
https://qiita.com/NagaokaKenichi/items/65c149ba92580fce5be2

【React/Vue.js】コンポーネント設計の(個人的)ベストプラクティス | Offers Tech Blog
https://zenn.dev/overflow_offers/articles/20220523-component-design-best-practice

コンポーネント設計との上手な付き合い方
https://jtk.hatenablog.com/entry/2022/09/15/000000

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?