Reactコンポーネントのスタイリング手法

Reactコンポーネントのスタイリングには多くの異なる手法があります。 ここでは、基本的な手法のいくつかを取り上げます。

適用できる標準的なアプローチは、通常のWebページのスタイリングと同様に、 グローバルCSSの使用です。 ここでは、スタイルを定義した1つの外部共通CSSファイルを作成します。 このアプローチでは、すべてのクラス名がグローバルスコープに存在するため、 クラス間の競合が発生する可能性があります。 また、多くの小さなCSSファイルを作成することも可能ですが、 大規模でスケーラブルなアプリケーションを作成する際には、 この方法は非効率的です。

次のアプローチは、インラインスタイリングです。 これを使用すると、通常のHTMLで行うのと同様に、 CSSスタイルをインラインで追加できます。 この場合、必要なCSSプロパティを渡すstyle属性を扱います。 このようなスタイリングの使用は悪い習慣と見なされ、 レンダリング時に動的に計算されるスタイルを追加する場合にのみ推奨されます。 この方法は、個々のコンポーネントのインターフェースを 迅速にプロトタイピングするのに適しています。

次に検討する2つの手法は、現代的な、人気が高まっている、 効果的なスタイリング手法です。 これらは、大規模でスケーラブルなReactアプリケーションの スタイリングに適用することが推奨される手法です。

その1つ目は、Styled Components ライブラリの適用です。 このライブラリはスタイリングにテンプレートリテラルを使用します。 この手法により、通常のCSSをJavaScriptコード内で記述し、 そのすべての機能を利用することができます。

2つ目の手法は、CSSモジュールの適用です。 この場合、CSSモジュールとは、デフォルトで すべてのクラス名とアニメーション名がローカルスコープにあり、 つまり、それを使用するコンポーネント内でのみ利用可能なCSSファイルのことです。

これら最後の2つの手法では、クラス名の競合を恐れる必要はありません。 なぜなら、それらは一意であり、ローカルスコープの概念が使用されているからです。 また、これらの手法を使用すると、BEMのような方法論が必要なくなります。

次のレッスンでは、ここで紹介したすべての手法について詳しく見ていきます。