先生と生徒の会話形式で理解しよう

生徒

「HTMLだとstyle属性で色とか変えられますけど、ReactのJSXでも同じようにできますか？」

先生

「ReactのJSXでもstyle属性でスタイルを指定できますよ。ただし少し書き方に違いがあります。」

生徒

「どんなふうに違うんですか？難しそうですか？」

先生

「大丈夫です！ゆっくりと基本から説明するので安心してください。」

1. JSXでスタイルを指定する基本の形

Reactで使われるJSXでは、HTMLと似たようにstyle属性を使って見た目を変えることができます。ただし、style属性の書き方が少し違います。

HTMLでは次のように書きます：


<h1 style="color: red; font-size: 24px;">こんにちは</h1>

でも、React（JSX）ではstyle属性には文字列ではなく、オブジェクト（{}）で書く必要があります。つまりJavaScriptの書き方に合わせる必要があるのです。

2. JSXでstyleを使ったサンプルコード

実際のサンプルを見てみましょう。Reactではこのように書きます：


import React from "react";

function App() {
  const titleStyle = {
    color: "blue",
    fontSize: "28px",
    backgroundColor: "lightgray",
    padding: "10px"
  };

  return (
    <div>
      <h1 style={titleStyle}>Reactでスタイルをつけよう！</h1>
    </div>
  );
}

export default App;

（画面に青色の文字で「Reactでスタイルをつけよう！」と表示され、背景がグレー、文字サイズが28pxになります）

3. CSSとの違いに注意！キャメルケースで書こう

通常のCSSでは、font-sizeやbackground-colorのようにハイフン（-）を使います。しかし、JSXではハイフンは使えません。代わりにキャメルケースという書き方をします。

キャメルケースとは、単語の区切りを大文字にしてつなげる方法です。たとえば：

font-size → fontSize
background-color → backgroundColor
text-align → textAlign

これを守らないとエラーになってしまうので注意しましょう。

4. style属性はオブジェクト！書き方に{}が2つ必要

JSXでstyleを使うときには、style={{ ... }}のように{}が2重になります。

これは、ReactがJavaScriptのコードを中に書くために1つ目の{}を使い、その中でさらに{}でオブジェクト（スタイル）を書くためです。

次のような形が正しいです：

<div style={{ color: "red", fontSize: "20px" }}>テキスト</div>

慣れないうちは{}の数に戸惑うかもしれませんが、実は理にかなった仕組みなのです。

5. スタイルのオブジェクトを外に出して使う方法

さきほどの例では、style={{ ... }}を直接タグの中に書いていましたが、スタイルのオブジェクトをあらかじめ外で作っておくと、コードがスッキリします。


import React from "react";

function App() {
  const boxStyle = {
    border: "2px solid black",
    padding: "20px",
    margin: "10px",
    backgroundColor: "#f0f0f0"
  };

  return (
    <div style={boxStyle}>
      このボックスにはスタイルがついています！
    </div>
  );
}

export default App;

（画面に枠線付きのグレー背景ボックスが表示され、その中に「このボックスにはスタイルがついています！」と書かれます）

6. 数値の指定方法に気をつけよう

Reactのstyleでは、単位が必要な値は基本的に"px"などを文字列で書きます。ただし、一部のプロパティでは数値だけでもOKです。たとえば：

padding: "10px" → OK
padding: 10 → 自動的に「10px」となりOK
lineHeight: 1.5 → 単位不要なのでそのままでOK

少しややこしいですが、Reactが自動で補ってくれるケースもあります。ただし、基本は文字列で単位を入れておく方が安心です。

7. 動的にスタイルを変更することもできる

Reactでは、ボタンをクリックしたときなどに、スタイルを変更することも簡単にできます。次のようなコードで動的なスタイル変更が可能です。


import React, { useState } from "react";

function App() {
  const [isActive, setIsActive] = useState(false);

  const style = {
    color: isActive ? "green" : "gray",
    fontWeight: isActive ? "bold" : "normal"
  };

  return (
    <div>
      <p style={style}>ステータス表示</p>
      <button onClick={() => setIsActive(!isActive)}>
        状態を切り替え
      </button>
    </div>
  );
}

export default App;

（初期状態では灰色の文字で「ステータス表示」と表示され、ボタンを押すと緑色の太字に変わります。再度押すと元に戻ります）

8. CSSファイルとの併用も可能

JSXでstyle属性を使う方法はとても便利ですが、大きなプロジェクトではCSSファイルを使った方が管理しやすいこともあります。

たとえば、App.cssに次のように書いて：

.title { color: blue; }

そして、JSXではclassName="title"と書けばOKです。

Reactでは、CSSファイルとstyle属性をうまく使い分けることが大切です。

まとめ

Reactのstyle属性の使い方を通じて、JSXの書き方やインラインスタイルの基本的な考え方をじっくり確認することができました。ふだんHTMLのstyle属性に文字列で色やサイズを書くことに慣れていると、最初はReactのオブジェクト形式の書き方にとまどうことがありますが、今回の内容を順番にたどっていくことで、「なぜ波かっこが二重になるのか」「なぜキャメルケースで指定する必要があるのか」といった疑問がひとつずつ解消されていきます。Reactのstyle属性は単なる装飾ではなく、コンポーネントという単位で見た目を組み立てていくための重要な道具であり、テキストの色や背景色、フォントサイズ、余白、枠線などをまとめて管理できる仕組みを理解することで、アプリ全体の見た目を計画的に整えられるようになります。さらに、スタイルのオブジェクトをコンポーネントの外側に切り出すことで、コードの読みやすさや再利用性が高まり、保守もしやすくなるという実践的なポイントも見えてきます。

くわえて、数値の指定方法や単位の扱いをおさらいしたことで、paddingやmargin、lineHeightなどの細かな調整をReactらしい考え方で理解できました。とくに、数値だけを渡したときには自動的にピクセルとして解釈されるものがある一方で、必ず文字列として単位つきで書いたほうが分かりやすい場面もあるという違いは、実際の画面調整でよく登場します。また、状態によってスタイルを切り替えるサンプルを通して、ボタンのクリックやフラグの変化に合わせて色や太さを変える表現も自然に身につきました。動的なスタイル変更という考え方は、メニューの選択状態やエラー表示、入力フォームの強調など、さまざまなインターフェースに応用できるため、習得しておくと便利な概念です。今回の内容を自分なりに書き換えたり、小さなコンポーネントを作ったりしながら試していくことで、Reactのstyle属性とJSXの書き方は、より自信を持って使えるものになっていきます。

さらに、style属性とCSSファイルをどのように使い分けるかという視点も大切です。小さなコンポーネントで一時的に見た目を試したいときにはインラインスタイルが手軽ですが、画面全体のデザインや共通の色、共通の余白ルールを決めたいときにはCSSファイルやクラス名を活用したほうが管理しやすくなります。Reactのコンポーネント開発では、「どこまでをstyle属性で書き、どこからを外部スタイルに任せるか」という線引きを意識することで、読みやすさと柔軟さのバランスがとれた構成を作ることができます。タイトルや強調見出しはクラス名で共通化し、特定の場面だけ変えたい色やサイズはstyle属性で上書きするといった工夫を重ねることで、細かなデザイン調整もしやすくなります。こうした積み重ねは、最終的にユーザーにとって見やすく心地よい画面につながり、Reactでのフロントエンド開発の質を大きく高めてくれます。

また、今回の記事で触れたキャメルケースの書き方に慣れておくと、JavaScriptの変数名や関数名、オブジェクトのプロパティとあわせて統一感のあるコードを書くことができます。fontSizeやbackgroundColorといった書き方は最初は少し不自然に感じるかもしれませんが、何度か繰り返しているうちに自然と目になじみ、コードを眺めただけでどのプロパティがどの部分の見た目を担当しているのかをすぐに想像できるようになります。キャメルケースは単なる表記ルールではなく、「JavaScriptのオブジェクトの中でスタイルを表現する」というReactならではの考え方を体現しているものでもあり、この感覚を身につけることで他のライブラリやフレームワークを学ぶときにもスムーズに応用がききます。小さなコンポーネントから少しずつ積み上げていくことで、style属性を自然に使いこなし、画面づくり全体を主体的に設計できるようになっていくはずです。

最後に、今回学んだ内容を自分の言葉でまとめておくと、Reactのstyle属性は「コンポーネントの中で完結した見た目を表現するための道具」であり、HTMLの延長ではなくJavaScriptのオブジェクトとして考えることが重要だと言えます。小さなボタンや見出しひとつにも意図を持って色や余白を与えることで、画面全体の情報が整理され、利用する人にとって理解しやすいインターフェースになります。コードの中でスタイルを扱うことに慣れてくると、「この状態のときだけ少し強調する」「この部分だけ背景色を変えて流れを区切る」といった工夫も自然に行えるようになり、Reactのコンポーネント設計そのものがいっそう楽しく感じられるようになるでしょう。

style属性を使った簡単なサンプル

最後に、今回の内容をふりかえりながら、Reactのstyle属性を使ったシンプルなサンプルをもうひとつ見ておきましょう。文字の色、背景色、余白、角丸など、よく使う見た目の指定をひとまとめにして、コンポーネントの中で分かりやすく管理する例です。


import React from "react";

function StyleSummaryCard() {
  const cardStyle = {
    color: "white",
    backgroundColor: "teal",
    padding: "16px",
    borderRadius: "8px",
    textAlign: "center"
  };

  const messageStyle = {
    fontSize: "20px",
    fontWeight: "bold"
  };

  return (
    <div className="card p-3" style={cardStyle}>
      <p style={messageStyle}>Reactのstyle属性を使ったまとめカードです。</p>
    </div>
  );
}

export default StyleSummaryCard;

このように、カード全体の色や余白はcardStyleでまとめ、テキスト部分の強調はmessageStyleで分けて指定することで、見た目の役割ごとにスタイルを整理できます。同じようなスタイルを使うコンポーネントが増えてきたら、スタイル用のオブジェクトを別ファイルに分けたり、クラス名と組み合わせたりすることで、Reactの画面づくりはさらに分かりやすく成長していきます。まずは小さなstyle属性から始めて、少しずつ自分なりの書き方やルールを身につけていきましょう。

先生と生徒の振り返り会話

生徒

「今日の内容で、Reactのstyle属性がただの飾りではなくて、コンポーネントごとのデザインを組み立てる大事な仕組みだということがよく分かりました。」

先生

「そうですね。オブジェクトとしてスタイルを扱う感覚に慣れておくと、画面の見た目を論理的に整理できるようになりますよ。」

生徒

「キャメルケースの書き方も最初はぎこちなかったんですが、fontSizeやbackgroundColorの意味が分かってくると、だんだん読みやすく感じてきました。」

先生

「プロパティ名の読みやすさは、後からコードを見返したときの理解しやすさにもつながりますから、その感覚はとても大切です。」

生徒

「状態によって色や太さを切り替えるサンプルもおもしろかったです。自分のアプリでも、ボタンの有効無効やエラーのときだけ色を変えるしかけをつけてみたくなりました。」

先生