1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

コンポーネントとモジュールの違い

Last updated at Posted at 2024-08-21

はじめに

コンポーネントとモジュールはどちらも部品という意味で呼び出して使うものと理解していたのですが、どういう違いがあるのか理解できていないかったのでまとめていきたいと思います。
わかりやすくまとまってる記事を見つけたのでぜひこちらも参考にしてみてください。
モジュールとは?ライブラリ、コンポーネントとの違い

それぞれの定義

コンポーネントとは

UIを独立した再利用可能なピースに分割したもの。例えば、ヘッダー、フッター、メインコンテンツ、サイドバー、ボタンなどに分割したものをコンポーネントと言います。
コンポーネントは呼び出して使うもので、単体で使うことは目的としておらず、単体では機能しません。

モジュールとは

アプリケーション内の異なる部分で共有される機能やデータをまとめるものです。例えば商品管理をするアプリケーションであれば、商品の在庫データなどをまとめているものや、商品登録の機能などをモジュールと言います。
モジュールは呼び出して使うもので、単体で使うことは目的とされてませんが、単体でも機能します。

Atomic Design(アトミックデザイン)

コンポーネントやモジュールはAtomic Designという考え方で使用されているみたいです。
Atomic Designとは、コンポーネントやモジュールよりももっと小さな単位に分割してコードを再利用する方法です。
気になる方はこちらの記事を参考にしてみてください。
Atomic Design(アトミックデザイン)とは

まとめ

  • コンポーネント:呼び出して使うもので、単体としては機能しない
  • モジュール:呼び出して使うもので、単体でも機能する

どちらも呼び出して使うものではあるが、単体として機能するかしないかに違いがあるみたいですね。
間違いや補足などあればコメントなどで教えていただきたいです。

参考記事

Vue公式
モジュールとは?ライブラリ、コンポーネントとの違い
Atomic Design(アトミックデザイン)とは

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?