JavaScriptから直接CSSを読み込む方法

React入門17 / 10

React で作ったコンポーネントだけでは、まだ見た目は地味です。
このレッスンでは、HTMLで行うようにCSSを使って、それぞれのコンポーネントにスタイルを加えていく方法を学んでいきましょう！

JavaScript で CSS を読み込む方法

HTML での CSS 読み込み

<link rel="stylesheet" href="style.css" />

HTML では、このようにlinkタグを使って CSS ファイルを読み込むことができましたね！

CSSはWebpackのようなビルドツールを使うことでJavaScript経由でファイルを読み込むこともできます。

JavaScript での CSS 読み込み

import "./style.css";

ビルドツールを使っているJavaScriptの環境では、import文を使って、JavaScriptファイルに直接CSSを読み込めます。

ビルドツールって？

ビルドツールは、Web 開発で使われるソフトウェアです。さまざまな言語で書かれた多くの小さなファイルやコードを自動的に一つにまとめ、ブラウザーで実行できるようにするためのものです。

実際にコードを見てみましょう！import "./card.css";と書くことで、CSSファイルをインポートしています。

import React from "react";
import "./card.css";

export function App() {
  return (
    <div className="card">
      <h2 className="card-name">
        mosyabo
      </h2>
      <p className="card-title">
        Software Engineer
      </p>
    </div>
  );
}

コンポーネントごとにスタイルを設定できるのは便利だね！

ただ、この方法では、もし複数のコンポーネントが同じ CSS クラス名を使っている場合、スタイルが衝突してしまい、結局全部のコンポーネントに同じスタイルが適用されてしまうことがあります。

その他のスタイリング方法

React では、スタイルの衝突を防ぐために「CSS Modules」や「CSS in JS」といったテクニックがよく使われます。

これらのテクニックについてはまた別のレッスンで学ぶよ！