deve.K

エンジニアが未来を切り開く。

Reactでのスタイリングする方法 【CSS】 基礎

react画像

本日はReactでのCSS扱い方と利点やデメリットも含め初学者様向けにご紹介したいのですが、ReactでCSSのスタイル設定する際の方法は沢山あります。

なので記事を分けて、解説していきます。

CSSを使用したReactでのスタイリング

主に『インラインスタイル』や『外部CSSファイル』『CSS modules』などを操作します。

インラインでのスタイリングの際は、『値』がJavaScriptオブジェクトである必要性があります。

const App = () => {
return(
<div>
  <h1 style={{backgroundColor: "#44014C", width: "300px", minHeight: "200px"}}>
Hello welcome
  </h1>
</div>
 
);
}

2つの中括弧があります、最初の中括弧はJavaScriptをJSXに挿入し、内側の中括弧は『オブジェクトリテラル』を作成します。

スタイルはオブジェクトリテラルとして要素に渡されます。

プロパティはカンマで区切られ、渡すのはオブジェクトである為なので注意して下さい。

const myStyles = {

Width: 400,      
Height: 100,
borderRadius: 4,
border: "none",
padding: "1.5em",
color: "#fff",
background: "#639",
boxShadow: "0 0 3px 2px #cec7c759",
display: "flex",
alignItems: "center",

};

const App = () => {
    return ( 

<div style={myStyles}> Inline Style</div>
)
}

パディングの値などには単位がなく『'em'』や 『'rem'』などの他の単位を使用する必要がある場合は、値を使用して単位を文字列として明示的に指定しなければいけないので注意が必要です。

JSからDOMノードのプロパティにアクセスする際の一貫性を保つために、スタイルキーはキャメルケースとなっています。

公式のReactドキュメントは、プロジェクトでのスタイリングの主要な手段としてインラインスタイリングを使用することを『非推奨』としています。

その理由として欠点の1つは、スタイルをインラインで定義すると、毎度新しいオブジェクトが作成されます。

これにより、『style小道具』に差分が作成され、パフォーマンスの問題が発生する可能性があるという事です。

スタイル属性での場合はいくつかの制限があります

CSS擬似セレクター』と『メディアクエリ』を使用ができない事です。

『Radium』 を使用してこれらを解決する方法があります、ですがプロジェクトが膨らんできて面倒になってきたりします。

これは、アプリケーションの規模の大きさにより変わってきます

『webpack』などのバンドラーを使用してCSSとJSをビルドでバンドルするかどうか、もしくはアプリケーションフローをどのように管理するかによって異なってきます。

ですのでほとんどの場合ではCSSファイルとJSファイルを分離しアプリケーション全体でファイルの整理なども容易になり、外部CSSスタイルシートをインポートし『className』属性で定義されたクラスを参照し管理していきます。

import './index.css';

const App = (props) => {
    return (
        <h1 className="box">Hello welcome</h1>
    )
}

React開発者になるのであれば、CSS Modulesの使用をお勧め致します。

ReactのCSS Modules

大規模なWebアプリケーションでスタイルシートを扱った経験がある方々はクラスでの命名が難しい場合があり、注意しないと競合が発生する可能性があるのはご存知かと思います。

つまり本来のCSSでのルールはグローバルスコープに従います

同じ名前である2つ以上のクラスが衝突したりします

このCSSモジュールはCSSファイルです。

ですが違いがあります

インポート時にCSSモジュール内のすべてのクラス名とアニメーションなどは、インポートしているコンポーネントにローカルにスコープされます、

そうすることにより、アプリケーション内のクラス名の衝突について心配する必要はありません。

セレクターやルールはエラーなしに、複数でのファイルで同じクラス名を使用が可能となります。

クラスはJavascriptのローカル変数と同様に機能します。

クラスを拡張しそれらのスタイルを継承することもでき、この概念はクラス構成と呼ばれています。

利点としては特定のコンポーネントにスタイリング機能を提供することです。

これにより、次の開発者がプロ​​ジェクトで作業するための、非常に保守しやすいコードと読みやすいプロジェクトアーキテクチャが作成されます。

CSS Modules実装方法

CSS Modulesを作成する際は、create-react-appを使用してる場合に限り、コンポーネントCSSモジュールを作成するのは比較的容易となります。

基本的にはCSSファイルの命名規則に従いますが

ファイル名に『.CSS』の前に『module』を付け加えるだけとなります。

[任意の名前].module.css

それでは名前の競合回避の例を確認しましょう。

.test {
  color: red;
  font-size: 16px;
}

コンパイルすると、以下のようなものが生成されます

.test_jhys {
  color: red;
  font-size: 16px;
}
{
test: test_jhys
}

2つの出力が生成されます。1つは名前が変更されたクラス名を持つ修正バージョンです。

もう1つは、元のCSS名を名前が変更された名前にマップするJavaScriptオブジェクトとなります。

追加された『jhys』は、このクラスを一意に識別するために使用されるサンプルキーとなり、Reactファイルにインポートして使用できます。

本日のReact基礎は以上となります。


CSS Modulesの深い学習については、個別で今後取り上げていきたいと思います。

他のCSSでのスタイリング方法も近いうちにご紹介致します。

ご質問やご意見がございましたら、下のコメント欄もしくはお問い合わせまでお願い致します。

最後までお読み頂きありがとうございました。

プライバシーポリシー