🌐
🔰はじめてのReact入門ガイド【クイックスタート】

2025/04/05に公開
 フロントエンドが苦手なのに、Reactを始めてみた訳あってReactの勉強を始めました。
日ごろAIを活用している関係でPythonは少し慣れていますが、フロントエンドは苦手意識がありこれまで距離を置いてきました。
javascriptだけなら、まだマシですが、
「HTMLとかCSSとか覚えるの面倒そう・・・」
というのもあり、これまで敬遠してきました。
とりあえず、「挫折することなく手っ取り早く始めてみたい」ということで、いろいろ読み漁った結果、公式サイトの「クイックスタート」が初心者向けに簡単そうなのでここから初めてみました。（公式のクイックスタートだけあって、なんとReactのコンセプトの8割がこのクイックスタートに盛り込まれてるようです）
React ドキュメントへようこそ！ このページでは、日々の開発で使用する React のコンセプトのうち 80％ の部分を紹介します。
参考情報
https://ja.react.dev/learn
でも、この手の公式サイトの情報は行間が省略されていてとてもわかりにくいのが多いので、少し行間を補完しながらまとめてみました。

 事前準備残念ながら、Reactのクイックスタートには、Reactの環境準備方法は記載がありませんでした。
本記事でも環境準備は省略しますが、筆者の環境では事前に以下を準備しています。
nodeのインストール
npx create-react-app　～の実行
npm startでReact動作確認
Reactの環境準備方法はさまざまな方法があり、情報もたくさんありますので、お好みの方法で準備していきましょう。
Webブラウザ上でReactの開発ができる以下のサービスもおすすめです。Freeプランもありますので学習用途の範囲なら無償で利用できると思います。
CodeSandBox
StackBlitz
参考までに筆者の環境準備の順番を以下記載しておきます。
nodeのバージョン
# node -v 
v22.14.0
npxの実行
# npx create-react-app test-react-typescript --teplate typescript
npm startで実行
# cd test-react-typescript/
# ls
README.md  node_modules  package-lock.json  package.json  public  src
# npm start
ローカルで立ち上げた場合は、ブラウザで「http://localhost:3000」にアクセスします。
以下の画面が表示されたらReactの動作確認は完了です。

 Reactクイックスタートそれでは公式のクイックスタートに沿って始めていきましょう。

 コンポーネントの作成とネストReactアプリは「コンポーネント」というブロックで作られています。コンポーネントは、簡単に説明すると以下のとおりです。
コンポーネントは、画面に表示される部品です
それぞれの部品は見た目（デザイン）と動き（機能）を持っています
小さなコンポーネント（例：ボタン、入力フォーム）から大きなコンポーネント（例：ヘッダー、ページ全体）まであります
技術的には、Reactのコンポーネントは「HTMLのようなマークアップを返すJavaScript関数」です。
これは例えで言うと、「この関数を呼ぶと、画面に表示する部品が返ってくる」という仕組みです。
コンポーネントを組み合わせることで、複雑なウェブサイトも簡単なパーツに分解して作ることができます。
以下はHTMLの「<button>」タグを返却するMyButton()という関数の例です。
function MyButton() {
  return (
    <button>I'm a button</button>
  );
}
MyButton関数 を宣言したあと、別のコンポーネント内にネストできます。
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
Reactでは名前の付け方に重要なルールがあります。
<MyButton /> が大文字で始まっていることに注目してください。これには理由があります。

 大文字と小文字の使い分け大文字で始める：<MyButton />、<Header />、<ProfileCard />
これらはReactのカスタムコンポーネントだと認識されます
あなたや他の開発者が作ったパーツであることを示します

小文字で始める：<div>、<span>、<button>
これらは通常のHTMLタグだと認識されます
ブラウザが最初から理解できる標準的な要素です

先頭の文字を大文字にすることでReact のコンポーネントであるということを示しています。React のコンポーネント名は常に大文字で始める必要があります。一方、HTML タグは小文字にする必要があります。
それでは、実際にボタンを表示してみましょう。
「npx create-react-app　～」で作成した場合、src/App.jsファイルがありますので、中身を全部削除します。
中身を消したあと、以下のように記載します。
function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
ファイルを保存すると、自動的にブラウザで「http://localhost:3000」にアクセスした画面が自動的に以下のように変更されます。（もし画面が変わらない場合は、画面をリロードしてみてください）
ちゃんとボタンが表示されました。
JavaScript の構文についての詳細は、MDN やjavascript infoのリファレンスを参照しましょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export
https://javascript.info/import-export

 JSX でマークアップを書く前述のマークアップ構文は、「JSX」記法と呼ばれています。
利用しなくても問題ないですのですが、便利なのでほとんどのReact プロジェクトでは JSX が使用されていると思います。
HTMLと比較するとJSX では構文観点でいくつか注意点があります。
 のようにタグは閉じる必要があります。また、コンポーネントは複数の JSX タグを return することはできません。<div>...</div> や空の <>...</> ラッパのような共通の親要素で囲む必要があります。
複数タグがNGな例（<h1>と<p>タグの２つがreturnで指定されています）
export default function MyApp() {
  return (
      <h1>Welcome to my app</h1>
      <p>こんにちは</p>
  );
}
上記の書き方だと、複数タグをreturnで返しているためエラーが出ます。
この場合は、親要素として<div></div>を追加してreturnで返すタグを１つにする必要があります。
OKな例
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
以下のように空タグを使ってもreturnとしては１つのタグになりますのでこれでも問題ありません。
空タグで括った例
function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}
前述の例では、<div></div>タグでreturnで返すタグが一つですので、中にタグを追加することは可能です。

試しに、さきほどボタンを表示したApp.jsに<h2>、<p>タグを追加してみましょう。
function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
    
      <h1>Welcome to my app</h1>
      <h2>ボタンのテスト</h2>
      <p>ボタンのテスト</p>
      <MyButton />
    </div>
    
  );
}
HTMLタグが表示されました。
JSXは便利とはいえ、JSXに変換したいHTMLがたくさんある場合は少し面倒ですよね。もし、JSX に変換しないといけない HTML がたくさんある場合は、オンラインコンバータを使うと一気に変換が可能です。
＜オンラインコンバータ＞
例えば以下のようなHTMLを、JSXに変換してくれます。
HTML
<!-- Hello world -->
<div class="awesome" style="border: 1px solid red">
  <label for="name">Enter your name: </label>
  <input type="text" id="name" />
</div>
<p>Enter your HTML here</p>
JSX
<>
  {/* Hello world */}
  <div className="awesome" style={{ border: "1px solid red" }}>
    <label htmlFor="name">Enter your name: </label>
    <input type="text" id="name" />
  </div>
  <p>Enter your HTML here</p>
</>

 スタイルの追加React では、CSS クラスを className で指定します。HTML の class 属性と同じ方法で動作します。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class
<img className="avatar" />
そして、別の CSS ファイルに対応する CSS ルールを記述します。
/* In your CSS */
.avatar {
  border-radius: 50%;
}
border-radius：　CSSのプロパティで、要素の境界の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。上記例では１つの半径を指定しているので丸表示になります。
以下のサイトにアクセスするとCSSの効果をリアルタイムに確認することが可能です。
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius
試しに、上から２つ目の「border-radius: 25% 10%;」をクリックすると、右側に効果のイメージが表示されます。
React には CSS ファイルの追加方法に関する規則はありません。
簡単な例を挙げると、HTML に <link> タグを追加します。ビルドツールやフレームワークを使っている場合は、それらのドキュメントを参照して、プロジェクトに CSS ファイルを追加する方法を確認しましょう。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/link

 データの表示JSX を使うことで、JavaScript 内にマークアップを入れることができます。
反対に、波括弧「{ }」を使うことで、JSX の中から JavaScript に「戻る」ことができます。
コード内の変数を埋め込んでユーザに表示することができます。たとえば、以下は変数であるuser.name を表示します。
return (
  <h1>
    {user.name}
  </h1>
);
JSX の属性 (attribute) の部分から JavaScript に「戻る」こともでき、その場合引用符の代わりに波括弧を使う必要があります。
例えば、className="avatar" は CSS クラスとして "avatar" 文字列を渡すものですが、src={user.imageUrl} は JavaScript の user.imageUrl 変数の値を読み込み、その値を src 属性として渡します。
return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);
以下のようなconsole.log()を利用することも可能です。
return (
  <>
    {console.log("console log test")
    <h1>
      {user.name}
    </h1>
  </>
);
JSX の波括弧の中にもっと複雑な式を入れることもできます。例えば、文字列の連結ができます。
https://javascript.info/operators#string-concatenation-with-binary
以下のコードでは、「alt={’Photo of ‘ + user.name}」で文字列を連結しています。
const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}
ブラウザの画面で見てみましょう。
名前と写真が表示されました。
まず、文字列の連結ができいるか確認してみましょう。
ブラウザで「F12」キーを押して、デベロッパーツールを起動します。alt属性部分の文字列が連結されていることがわかります。
次に表示されている内容を見ていきましょう。
コードでは、<h1>タグで、{user.name}が指定されていますが、{}で括ることで、javascriptで定義した変数がHTMLタグの中で利用できます。
上記の例では、style={{}} は特別な構文ではなく、style={ } という JSX の波括弧内にある通常の {} オブジェクトです。
スタイルが JavaScript 変数に依存する場合は、style 属性を使うことができます。
次にcssファイル（スタイルシート）の読み込んでみましょう。
App.cssファイルの一番下に以下を追加します。
App.css
～　～

/* In your CSS */
.avatar {
  border-radius: 50%;
}
App.jsファイルの先頭に「import “./App.css”;」を追加します。
App.js
import "./App.css";

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}
冒頭の「import “./App.css”」でスタイルシートを読み込んでします。
それ以外は変更無しです。
それではページをリロードします。
画像がApp.cssファイルで指定したとおりサークル表示になりました。

 条件付きレンダーReact には、条件分岐を書くための特別な構文は存在しません。

代わりに、通常の JavaScript コードを書くときに使うのと同じ手法を使います。

例えば、if 文を使って条件付きで JSX を含めることができます。
let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);
コンパクトなコードにしたい場合は、条件 「? 」演算子を使用できます。if とは異なり、JSX の中で動作します。
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>
else 側の分岐が不要な場合は、短い論理構文「 && 」を使用することもできます。
<div>
  {isLoggedIn && <AdminPanel />}
</div>
これらのアプローチはすべて、属性を条件付きで指定する場合にも機能します。このような JavaScript 構文の一部に慣れていないという場合、最初は常に if...else を使用することにしても構いません。
＜条件付きレンダーの詳細＞
https://ja.react.dev/learn/conditional-rendering

 条件を満たす場合に JSX を返す（実践）例えば、複数の Item をレンダーする PackingList コンポーネントがあり、各 Item が完了しているかどうかを表示させたい場合を見てみましょう。
function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>遠足の持ち物リスト</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="お弁当" 
        />
        <Item 
          isPacked={true} 
          name="水筒" 
        />
        <Item 
          isPacked={false} 
          name="お菓子" 
        />
      </ul>
    </section>
  );
}
画面を表示してみましょう。
コードを確認すると、複数の Item コンポーネントのうち一部で、props である isPacked が true にしています。
この意図は、isPacked={true} の場合にのみチェックマーク (✅) を表示させることです。
これは if/else 文を使って、以下のように書くことができます。
if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;
isPacked プロパティが true だった場合、このコードは異なる JSX ツリーを返します。この変更により、一部のアイテムの末尾にチェックマークが表示されるようになります。
function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>遠足の持ち物リスト</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="お弁当" 
        />
        <Item 
          isPacked={true} 
          name="水筒" 
        />
        <Item 
          isPacked={false} 
          name="お菓子" 
        />
      </ul>
    </section>
  );
}
それぞれの場合に返される内容を編集してみて、表示がどのように変化するか確認しましょう。条件分岐ロジックを実装するために JavaScript の if や return 文を使ったことに注目してください。React では、制御フロー（条件分岐など）は JavaScript で処理されます。

 リストのレンダーコンポーネントのリストをレンダーする場合は、for ループ や 配列の map() 関数 といった JavaScript の機能を使って行います。例えばこのような商品の配列があるとします。
const products = [
  { title: 'キャベツ', id: 1 },
  { title: 'ニンニク', id: 2 },
  { title: 'リンゴ', id: 3 },
];
コンポーネント内で、map() 関数を使って商品の配列を <li> 要素の配列に変換します。
const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);
aコードを見ると<li> に key 属性があることがわかります。リスト内の各項目には、それらを一意に識別するための文字列または数値を渡す必要があります。通常、key はデータから来るはずで、データベース上の ID などが該当します。React は、後でアイテムを挿入、削除、並べ替えることがあった際に、何が起こったかを key を使って把握します。
const products = [
  { title: 'キャベツ', isFruit: false, id: 1 },
  { title: 'ニンニク', sFruit: false, id: 2 },
  { title: 'リンゴ', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}
上記のコードを実行してみましょう。
リストを表示することができました。

 イベントに応答するコンポーネントの中でイベントハンドラ関数を宣言することで、イベントに応答できます。ボタンをクリックするなどのイベントを処理することができます。
function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}
onClick={handleClick} の末尾に括弧がないことに注目してください。
そこでイベントハンドラ関数を呼び出すわけではありません。
ユーザがボタンをクリックしたときに、React がイベントハンドラを呼び出します。

 画面の更新しばしば、コンポーネントに情報を「記憶」させて表示したいことがあります。例えば、ボタンがクリックされた回数を数えて覚えておきたい場合です。これを行うには、コンポーネントに state を追加します。まず、React から useState をインポートします。
useState とは、コンポーネントに state 変数 を追加するための React フックです。
https://ja.react.dev/reference/react/useState
import { useState } from 'react';
これで、コンポーネント内に state 変数を宣言できます。
＜stateの詳細＞

https://ja.react.dev/learn/state-a-components-memory
function MyButton() {
  const [count, setCount] = useState(0);
  // ...
useStateはReactの特別な機能で、画面の表示内容を簡単に変更できるようにします。例えば、カウンターの仕組みを見てみましょう。
useStateを使うと、2つの便利なものが手に入ります。
現在の値（例：count）- 画面に表示される数字
更新用の関数（例：setCount）- その値を変更するための道具

名前は自由に決められますが、普通は [値, set値] という形式で書きます。
const [count, setCount] = useState(0);

useState(0)の0は初期値です。

-コンポーネントが初めて画面に表示されるとき、countは0になります
値を変えたいときは、更新関数を使います。
setCount(1)と書けば、countが1に変わります
setCount(count + 1)と書けば、現在の値に1を足した新しい値になります

ボタンクリックと組み合わせると、クリックするたびに数字が増えるカウンターが作れます。
このようにuseStateを利用することができます。
function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}
React は、再度コンポーネントの関数を呼び出します。今度は count が 1 になっています。次の呼び出しでは 2 になっています。次々と増えていきます。同じコンポーネントを複数の場所でレンダーした場合、それぞれが独自の state を持ちます。それぞれのボタンを個別にクリックしてみましょう。
import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}
上記コードの画面を表示してみましょう。
ボタンをクリックするたびに、クリックした方のボタンの数字がカウントアップされます。
各ボタンがそれぞれ count という state を「記憶」し、他のボタンに影響を与えないことに注目してください。

 フック（Hook）についてフックは「Reactの特別な機能を使うための道具」です。例えば以下のようなものがあります。
useState - 値を保存して更新するためのフック
useEffect - 画面表示後に何かを実行するためのフック
useContext - コンポーネント間でデータを共有するためのフック

 フックの特徴種類：
Reactが提供する「組み込みフック」があります
自分で「カスタムフック」を作ることもできます（既存のフックを組み合わせて）

重要なルール：
フックはコンポーネントの一番上のレベルでのみ使えます
条件分岐（if文）やループ（for文）の中では使えません

ルールの例：
// ✅ 正しい使い方 - トップレベルで使用
function MyComponent() {
  const [count, setCount] = useState(0);
  // ...
}

// ❌ 間違った使い方 - 条件分岐の中
function MyComponent() {
  if (something) {
    const [count, setCount] = useState(0); // これはエラーになります！
  }
  // ...
}
解決策：
もし条件付きでフックを使いたい場合は、新しいコンポーネントを作って、そこでフックを使いましょう。

フックを使うことで、Reactの機能を簡単に活用できるようになります。
https://ja.react.dev/reference/react

 コンポーネント間でデータを共有する前述の例では、それぞれの MyButton が独立した count を持っており、ボタンがクリックされるたびにクリックされたボタンの count だけが変更されました。
ただし、コンポーネント間でデータを共有し、常に一緒に更新したいということもよくあります。両方の MyButton コンポーネントが同じ count を表示し、一緒に更新されるようにするには、状態を個々のボタンから「上に」移動して、それらすべてを含む最も近いコンポーネントに入れます。この例では、MyApp がそれです。
こうすれば、どちらのボタンをクリックしても、MyApp の count が更新され、連動して MyButton の両方のカウントが更新されます。以下は、コードでこれを表現する方法です。まず、MyButton から MyApp に、state の移動を行います。
export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  // ... we're moving code from here ...
}
次に、MyApp から各 MyButton に state を渡し、共有のクリックハンドラも一緒に渡します。以前に <img> のような組み込みタグで行ったときと同様、JSX の波括弧を使うことで MyButton に情報を渡すことができます。
export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}
このように渡される情報は props と呼ばれます。MyApp コンポーネントは count 状態と handleClick イベントハンドラを保持しており、それらをどちらも props として各ボタンに渡します。最後に、MyButton を変更して、親コンポーネントから渡された props を読み込むようにします。
function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}
ボタンをクリックすると、onClick ハンドラが発火します。
各ボタンの onClick プロパティは MyApp 内の handleClick 関数となっているので、その中のコードが実行されます。
そのコードは setCount(count + 1) を呼び出し、count という state 変数をインクリメントします。新しい count の値が各ボタンに props として渡されるため、すべてのボタンに新しい値が表示されます。
この手法は「state のリフトアップ（持ち上げ）」と呼ばれています。リフトアップすることで、state をコンポーネント間で共有できました。
import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}
今度は、片方のボタンをクリックすると両方のボタンの数がカウントアップされます。

 次のステップこれで、React のコードを書く基本が分かったことになります。チュートリアルをチェックして、これらの概念を実践し、React を使った最初のミニアプリを作成しましょう。
https://ja.react.dev/learn/tutorial-tic-tac-toe

 まとめとりあえずReact公式のクイックスタートを手を動かしながら試してみました。クイックスタートですが、あまり初心者向けの説明が無いのでとてもわかりにくいですが、キーワードは別の情報で調べながらなんとか少しずつ理解することができました。
おそらくjavascriptやHTML、CSSがわかっている人でないとこのクイックスタートは完全に理解できないように思いますが、初心者向けにまずは触って動きを見てみるのにちょうどよいボリューム感ではないでしょうか。
これまで、毛嫌いしていたフロントエンドの技術ですが、動きが見えてくると面白くなってきたのでこれから覚えていきたいと思います。
https://www.amazon.co.jp/dp/B0C1VWSPV8