コンポーネントの作り方！基本的な書き方と使い方をReact初心者向けに解説

1. Reactコンポーネントの基本を知ろう

1. Reactコンポーネントの基本を知ろう

React（リアクト）では、画面を作るときに「コンポーネント」という単位で部品を作ります。コンポーネントとは、見出し・ボタン・入力欄・一覧など、画面に表示される一つ一つの要素のことです。Webサイト全体をレゴブロックのように細かいパーツに分けておき、必要なところに組み立てていくイメージです。

たとえば、ヘッダー、フッター、メニュー、ログインフォーム、送信ボタンなどをそれぞれコンポーネントとして作っておくと、別のページでも同じ見た目・同じ動きをそのまま再利用できます。1か所を修正すれば、そのコンポーネントを使っている画面すべてに変更が反映されるので、保守もとても楽になります。Reactではこの部品の再利用がしやすい設計になっているのが大きな特徴です。

Reactのコンポーネントは、基本的には「関数が画面の部品（JSX）を返すだけ」というシンプルな仕組みです。まずは、文字を1行表示するだけの小さなコンポーネントから慣れていきましょう。次のように書くと、タイトル用のコンポーネントを作ることができます。

import React from "react";

function Title() {
  return <h1>Reactコンポーネントの基本</h1>;
}

export default Title;

この例では、Titleという関数コンポーネントを定義し、その中で<h1>タグを返しています。Reactはこのコンポーネントを読み込み、ブラウザ上に見出しとして表示してくれます。初心者の方は、まずこのような小さなコンポーネントを1つ作り、「名前を付けた部品を作る → 画面に配置する」という流れを体験するところから始めるのがおすすめです。

2. 最もシンプルなReactコンポーネント

2. 最もシンプルなReactコンポーネント

Reactを初めて触る方は、「コンポーネントって本当に簡単に作れるの？」と感じるかもしれません。実は、たった数行のコードで自分だけの部品を作ることができます。ここでは、最もシンプルな「Hello」というコンポーネントを例に、基本の流れをつかんでみましょう。

import React from "react";

function Hello() {
  return <h1>こんにちは！</h1>;
}

export default Hello;

このコードでは、Helloという名前の関数コンポーネントを作っています。関数の中で<h1>を返すことで、そのまま画面に見出しとして表示されます。難しい仕組みを覚える必要はなく、「関数がタグを返すと画面に表示される」という流れだけ理解すれば大丈夫です。

たとえるなら、Helloという“おしゃべりする箱”を作り、その箱をページに置くと「こんにちは！」と言ってくれるようなイメージです。Reactでは、このような小さな箱（コンポーネント）を組み合わせて画面を作っていきます。まずはこのシンプルなパターンに慣れて、コンポーネントの動きを体で覚えていきましょう。

3. コンポーネントを別のコンポーネントで使う

3. コンポーネントを別のコンポーネントで使う

Reactの大きな特徴のひとつが「作った部品をほかの部品の中に自由に組み込める」ことです。これはレゴブロックのように、小さな部品を組み合わせて大きな画面を作っていくイメージに近いものがあります。たとえば、前の章で作ったHelloコンポーネントを、画面全体をまとめるAppコンポーネントの中で呼び出してみましょう。

import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

ここで注目してほしいのは、<Hello />という部分です。まるでHTMLタグのように書いていますが、これは先ほど自分で作ったコンポーネントをそのまま“部品”として読み込んでいるだけです。とても自然な書き方なので、プログラミング初心者でも直感的に理解しやすい構造になっています。

また、コンポーネントの再利用ができることで、「同じデザインを何度も書かないで済む」というメリットも生まれます。たとえば、挨拶のパーツをページの上部と下部に2回表示したいときも、<Hello />を2回書くだけでOKです。こうした積み重ねが、Reactを使った開発をとても効率的にしてくれます。

4. JSXの基本ルールを知っておこう

4. JSXの基本ルールを知っておこう

Reactでコンポーネントを書くときは、JSXという独自の書き方を使います。JSXにはいくつかルールがあるので、初心者の方は次のポイントを覚えておきましょう。

• タグは1つの親要素で囲む必要がある（例：<div>）
• classではなくclassNameを使う
• JavaScriptの変数を使うときは{ }で囲む

これらを守ることで、Reactの画面が正しく表示されます。

5. props（プロップス）を使って値を渡す

5. props（プロップス）を使って値を渡す

Reactのコンポーネントには、外から値を渡すことができます。そのときに使うのがprops（プロップス）です。

たとえば、「Hello」というコンポーネントに「名前」を渡してみましょう。

Helloコンポーネントの修正

import React from "react";

function Hello(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

export default Hello;

Appコンポーネントで呼び出す

import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello name="たろう" />
    </div>
  );
}

export default App;

propsは「プロパティ」の略で、他のコンポーネントから値を受け取るための仕組みです。これを使えば、1つの部品をいろんな値で使いまわせるようになります。

6. 状態（state）を持つコンポーネントを作ってみよう

6. 状態（state）を持つコンポーネントを作ってみよう

コンポーネントの中で「状態」を管理したいときには、useStateという仕組みを使います。これを使えば、画面の中身をクリックや入力に応じて動的に変えることができます。

import React, { useState } from "react";

function Message() {
  const [text, setText] = useState("こんにちは！");

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={() => setText("ボタンが押されました！")}>
        メッセージを変更
      </button>
    </div>
  );
}

export default Message;

useStateは「ユーズステート」と読みます。これはReactが用意しているフック（Hook）の一種で、関数コンポーネントの中でも状態を持てるようになります。

7. 自分だけの部品を自由に作ろう

7. 自分だけの部品を自由に作ろう

Reactのコンポーネントを覚えることで、自分だけの「画面の部品」を自由に作れるようになります。ボタン・見出し・カード・入力欄など、すべてを部品として組み合わせられるのがReactの強みです。

最初は難しく感じるかもしれませんが、「1つの関数で1つの部品」という考え方を覚えておけば、少しずつ慣れていけます。たくさん作って、実際に表示して、Reactの楽しさを体験してみましょう。

まとめ

まとめ

Reactのコンポーネントは、画面を構成するための最小単位であり、見出し・ボタン・入力欄・一覧など、あらゆるUI要素を部品化して組み合わせることで、柔軟で拡張性の高いアプリケーションを作ることができます。この記事で学んだとおり、コンポーネントの基本は「関数として部品を定義し、JSXを返す」という非常にシンプルな構造です。最初は小さなひとつのコンポーネントから始め、次に複数のコンポーネントを組み合わせて複雑なレイアウトを作り、さらにpropsを受け取ることで外部から値を柔軟に渡せるようになります。propsを使えば、ひとつのコンポーネントを何通りもの形で再利用でき、見た目や内容を状況に応じて簡単に変えられるのが大きな魅力です。また、状態を管理するuseStateを組み合わせると、ユーザー操作に反応して動的に画面が変わるコンポーネントが作れます。Reactの開発では、こうした「コンポーネント」「props」「state」という三つの基礎がとても重要であり、この仕組みを理解するほど、自分の設計の幅がどんどん広がるようになります。

応用：複数コンポーネントを組み合わせたサンプル

ここでは、コンポーネント、props、stateを組み合わせて動きのある画面を作る例を紹介します。複数の部品が連動し、ひとつの画面として動作する流れが分かりやすくなる構成です。

import React, { useState } from "react";

function Title(props) {
  return <h2>{props.text}</h2>;
}

function CounterButton(props) {
  return (
    <button onClick={props.onClick} style={{ margin: "5px" }}>
      {props.label}
    </button>
  );
}

function MessageBox(props) {
  return (
    <div>
      <p>現在のメッセージ: {props.message}</p>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("ようこそReactの世界へ！");

  return (
    <div>
      <Title text="コンポーネント応用例" />

      <h3>カウント: {count}</h3>
      <CounterButton label="増やす" onClick={() => setCount(count + 1)} />
      <CounterButton label="減らす" onClick={() => setCount(count - 1)} />

      <MessageBox message={message} />

      <button 
        onClick={() => setMessage("メッセージが更新されました！")}
        style={{ marginTop: "10px" }}
      >
        メッセージ変更
      </button>
    </div>
  );
}

export default App;

このサンプルでは、見出しを表示するTitleコンポーネント、カウントを増減するためのCounterButtonコンポーネント、現在のメッセージを表示するMessageBoxコンポーネントを組み合わせています。propsを活用することで、それぞれの部品が役割を持ちながらも、外部から受け取る値によって柔軟に内容を変えられます。また、Appコンポーネントの中でstateを管理しているため、ユーザーの操作によって値が変化し、その変化が即座に画面に反映される動的なUIが実現しています。Reactの魅力は、このように小さな部品を組み合わせて拡張しながら、好きなように画面を構築できるところにあります。初心者のうちはまずシンプルな部品から慣れ、徐々にpropsやstateを使った応用に挑戦すると理解が深まります。

JSXにおける基本的なルールである「1つの親要素で囲む」「classNameを使う」「JavaScriptは{}で書く」といった項目も、コンポーネント作成では非常に重要です。これらを意識しておくことで、エラーを避けながらスムーズにコードを書けるようになります。また、コンポーネントをファイルごとに分けて管理することで、画面の構造が整理され、読みやすく保守しやすいコードになります。Reactは部品化の思想が強く、ひとつひとつのコンポーネントを丁寧に作ることで、大規模なアプリケーションでも整然とした構造を保てます。コンポーネントごとの役割を意識しながら開発することは、Reactを効率よく使う上で欠かせない考え方です。今後さらにpropsの応用やstateの管理が複雑になっていくと、コンポーネント同士の連携をどう設計するかが重要になり、ここで学んだ基礎が大きく役に立ちます。

Reactのコンポーネント開発は、単なる部品作りではなく、画面全体の構造を理解しながらアプリの動きを設計する力を育ててくれます。自分の作った部品が画面に表示され、他の部品と組み合わさってひとつの機能を実現する過程はとても楽しく、学習のモチベーションにもつながるでしょう。初心者の方は「簡単なコンポーネントを作る → 再利用する → propsで値を変える → stateで動きをつける」という順番で学ぶことで、自然とReactの考え方に慣れることができます。コンポーネントの概念が理解できれば、どんな画面も「部品の組み合わせ」として考えられるようになり、開発のスピードも大きく向上します。Reactの本質は「部品を組み立てて動くアプリを作る」こと。この流れを理解しながら、これからも楽しく学習を続けていきましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Reactのコンポーネントとは何ですか？初心者でも理解しやすい意味を知りたいです。

Reactのコンポーネントとは、画面を構成するための最小の部品のことです。見出し・ボタン・入力欄・一覧など、ひとつの役割を持ったUI要素を部品化して作る仕組みで、組み合わせることで複雑な画面も作れます。