Reactの「コンポーネント」とCMSの「モジュール」は何が違うの？

Posted at 2026-09-12

こんにちは。
私は個人開発でReactやNext,jsを触っている一方、実務でCMSエンジニアとしてMovable TypeやPowerCMS系統のパッケージ型CMSも触っています。

双方を触る中で「共通パーツをまとめる仕組み」について似ている部分と異なる部分があると感じたため、今回の記事は類似点と相違点について考えていきたいと思います。

※当記事では「コンポーネント」をReactのコンポーネント、「モジュール」をMovable TypeやPowerCMS系統のモジュールを指すこととします。

前提：ReactコンポーネントとCMSモジュールの説明

双方がどのようなものを指しているかについては以下の公式ドキュメントもご確認ください。

ReactのコンポーネントもCMSのモジュールも、「複数回登場するパーツを1箇所にまとめる」という点では共通です。
例えば共通フッターや記事のカードなどが挙げられます。

これらの変更箇所を1つにまとめることで、毎回各ページのファイルを編集する手間が省けます。

コンポーネントもモジュールもやりたい目的自体は同じです。

いずれも要素の再利用という点では一致しています。

CMSのモジュールは『テンプレートの断片』という意味合いが強く粒度の低い単位でモジュール化されることが多いです。

例：ヘッダー全体をモジュール化

一方でReactのコンポーネントは『個々の機能を組み合わせる』『役割と責務の分割』という観点から、1つの画面要素について可能な限り細分化してコンポーネント化することが多いです。

例：お知らせのカードUIをコンポーネント化→中身のボタン・カテゴリバッジ等も別途コンポーネント化

今回想定しているCMSはベースのエンジンがPerlやPHPのものが多く、実行するタイミングはCMSでの公開(再構築)段階で実行されるものが多数派です(一部動的パブリッシング機能を除く)。

一方でReactのコンポーネントは動的でありレンダリングごとに実行されます。

そもそも今回想定しているCMS内における変数(例：mt:var)は、ブロックスコープを持たず当該テンプレート内ならどこでも共有できるという特徴を持ちます。

そのためCMSのモジュールにおいては、モジュールの外側で定義した変数の値が暗黙的にモジュール側に引き継がれるという特徴があります。
これにより事前に変数の値をテンプレートごとに設定しておけば、モジュール側でテンプレートに合ったデータを出力します。

一方でReactのデータ受け渡しはPropsを用いた明示的なデータ受け渡しが原則です。
TypeScriptなどと組み合わせつつ明示的にデータを受け渡すことで、意図しない型のデータを受け渡すリスクを減らせます。

CMSのモジュールとReactのテンプレートは、

「繰り返し使うものは再利用したい」という思想は一致しているが、実行しているエンジンや言語が異なる関係で中身の思想や設計は大きく異なっている

ということでした。

今後私がReactとCMSを触る際も、双方の思想や設計の違いを想定しながら開発を行いたいです。