Tech

Reactの基本構文とコンポーネントを5分で理解する入門ガイド

はじめに

「Reactってよく聞くけど、正直よく分からない…」
そんな方は多いのではないでしょうか？

私も最初は「JavaScriptのライブラリ？SPA？なにそれ？」という状態でした。でも実際に触ってみると、意外とシンプルで、しかも便利。特にUIをサクッと構築できるという点に感動しました！

この記事では、Reactのまったくの初心者が「Reactってこういうものか！」と納得できるように、やさしく・具体的に・テンポよく解説していきます。

✅ 本記事を読めば、Reactの基本構文とコンポーネントの概念が5分で理解できます！

Reactって何？なぜ使われているの？

そもそもSPAって何？

まず、Reactの話に入る前に「SPA（Single Page Application）」という言葉を知っておきましょう。

SPAとは、その名の通り「1ページで完結するWebアプリケーション」のことです。

ページ全体を毎回リロードするのではなく、必要な部分だけを動的に書き換える仕組みです。

たとえば、TwitterやGmailを使っているとき、ページ遷移しても一瞬で次の画面が表示されたり、URLは変わっているのにページがリロードされていないように見えることはありませんか？それがSPAの特徴です。

特徴従来のWeb（MPA）SPA（Single Page Application）
ページ遷移のたびに毎回HTML全体をサーバーから取得必要なデータのみ取得して部分的に更新
表示速度遅くなりがち速くてスムーズ
サーバー負荷ページごとに再描画最小限の通信のみ
実装の難易度比較的シンプルJavaScriptの知識が必要
主な使用例コーポレートサイト、ブログなどGmail、Twitter、Reactアプリなど

JavaScriptライブラリって何？

Reactは「ユーザーインターフェース（UI）を作るためのJavaScriptライブラリ」です。

ライブラリとは、あらかじめ便利な機能をまとめた“道具箱”のようなもの。

Reactはその中でも「画面表示」に特化しており、効率よくUIを構築することができます。

なぜReactが選ばれるのか？

Reactは以下のような特徴で支持されています：

  • UIを部品（コンポーネント）単位で組み立てられる
  • 必要な部分だけを効率的に再描画できる
  • JavaScriptの知識があればすぐに始められる

さらに、FacebookやInstagram、Netflixなどの大手企業でも採用されている安心感も。

Reactの基本構文を理解しよう

JSXとは？

ReactではJSX（JavaScript XML）という特別な文法を使います。
これは、JavaScriptの中にHTMLのような記述ができる構文です。

function Hello() {
  return <h1>Hello, world!</h1>;
}

これは関数Helloが<h1>Hello, world!</h1>というHTMLを返している、というイメージです。

JSXは見た目はHTML、でも中身はJavaScript。最初は戸惑うけどすぐ慣れます！

Reactのコンポーネントって何？

コンポーネント＝UIの部品

Reactでは「画面を小さな部品の集合体として作る」という考え方が基本です。

  • ヘッダー
  • フッター
  • ボタン
  • ユーザーカード

など、すべてがコンポーネントです。

コンポーネントの作り方

Reactでは、コンポーネントを関数として定義します。

function Header() {
  return <h1>ようこそ、Reactへ！</h1>;
}

Props（プロップス）ってなに？どうやって使うの？

データを渡す仕組み

親コンポーネントから子コンポーネントにデータを渡すときに使うのがprops（プロップス）です。

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

function App() {
  return <Greeting name="Taro" />;
}

この例では、AppがGreetingにname="Taro"という情報を渡しています。

コンポーネントを組み合わせてみよう

複数のコンポーネントを合体！

Reactの強みは、「小さな部品（コンポーネント）を組み合わせて1つの画面を作れる」点にあります。

function Header() {
  return <h1>Reactブログ</h1>;
}

function Footer() {
  return <p>© 2025 LifeCode</p>;
}

function App() {
  return (
    <div>
      <Header />
      <p>記事一覧はこちら</p>
      <Footer />
    </div>
  );
}

このように、複数の部品を並べるだけで1つのアプリが完成！

まとめ＆次に学ぶべきこと

Reactでは、以下の基本概念を理解するだけでも大きな一歩です：

  • JSX構文に慣れる
  • UIはすべてコンポーネントとして作る
  • データはpropsで受け渡す

次は、状態管理（useState）やイベント処理（onClickなど）を学ぶと、さらに実践的なアプリ開発に近づけます！

Categories