はじめに
こんにちは！
この記事では、フロントエンド開発でよく名前を聞く「React」について、
一緒にゆっくり学んでいこう！というスタンスでお届けします✨
「Reactって聞いたことあるけど、ちょっと難しそう…」
そんなあなたに向けて、できるだけやさしく紹介していきます！
Reactってなに？
Reactは、Meta（旧Facebook）が開発した
UI（ユーザーインターフェース）を作るためのJavaScriptライブラリです。
つまり、「画面を作るための道具」みたいなもの！
コンポーネント（ボタン） ＝ 見た目（色・形） × 機能（押したら光る）
💡 コンポーネントを組み合わせることで画面を作っていく！ 💡
どう便利なの？
実は…
従来のHTMLへの記述方法では再描画コストが高いのです！
🔁 従来のDOM操作では…
たとえば、HTMLとJavaScriptでこんな感じにボタンを作ってたとします👇
<div id="message">こんにちは！</div>
<button onclick="update()">更新</button>
<script>
function update() {
document.getElementById("message").innerHTML = "こんにちは、React！";
}
</script>
このような場合、ブラウザは要素全体を再描画することが多く、
特に要素が多くなると処理が重くなってしまいます…💦
⚛️ Reactでは…
Reactは、変更があったところだけをピンポイントで更新します！
function App() {
const [text, setText] = useState("こんにちは！");
return (
<>
<div>{text}</div>
<button onClick={() => setText("こんにちは、React！")}>更新</button>
</>
);
}
ここで起きているのは…
💡「差分だけ」＝ 変わった部分だけを再描画している！
🧠 なぜそんなことができるの？
Reactは「仮想DOM（Virtual DOM）」という仕組みを使っています！
仮想DOMは、ブラウザに表示されているDOMをメモリ上でコピーしておいて、
変更前と変更後を比較し、必要な部分だけ効率的に更新してくれます👀✨
実際にコーディングしてみよう！
「Reactが効率的に再描画してくれる」って話、
ちょっとワクワクしてきませんか？😎
ここからは、ローカルでReactアプリを動かして、
ボタンを押すとテキストが変わる！ というところまで一緒にやってみましょう！
🛠 ステップ1：Reactアプリを作ろう！
まずは以下のコマンドを実行！
npx create-react-app my-app
cd my-app
npm start
⬆️ これだけで「 http://localhost:3000 」にReactのアプリが立ち上がります！
初回実行時に、以下のような確認メッセージが表示される場合があります
Need to install the following packages:
create-react-app@latest
Ok to proceed? (y)
この場合は、y を入力してEnterキーを押してください
これは「このツール（create-react-app）をインストールして使っていい？」という確認なので、問題ありません！
補足
すでに同じ名前（例：my-app）のフォルダがある状態で
npx create-react-app my-app を実行すると、以下のようなエラーになります
A template was not provided. This is likely because you're trying to create a project in a directory that already exists.
この場合は、別のフォルダ名を使って作成しましょう！（例：my-app2）
🧭「コマンドってなに？」「どうやって実行するの？」と不安な方へ
とてもわかりやすく解説してくれている記事があります
VSCodeでReact開発環境を整える方法
https://high-career.jp/2022/01/04/vscode-react-dev/
フォルダ構成は下記リンクを参照！✨
✏️ ステップ2：テキストを書き換えてみよう！
src/App.js を開いて、以下のように書き換えてみてください👇
import { useState } from 'react'; // ReactからuseStateをインポート
function App() {
// text という状態（state）と、それを更新する setText を定義
const [text, setText] = useState('こんにちは！');
// 画面に表示する内容を返す
return (
<div className="App">
<h1>{text}</h1>
<button onClick={() => setText('こんにちは、React！')}>
テキストを変える
</button>
</div>
);
}
export default App; // このコンポーネントを他の場所でも使えるようにする
保存後下図のようになればOK！
👇 🔁 ボタンを押すと…！？ 👇
🤔 ここで注目！
Reactでは、ボタンを押して text の値が変わると…
⚛️ Reactが自動で表示を更新してくれます！
しかも、変わった部分 だけ をサクッと再描画してくれるから、
速くて・軽くて・気持ちいい！
💻コード説明
ここからは、さっき実践したコードを
一緒に確認していきましょう！
１. useStateを使う準備をする
import { useState } from 'react'; // ReactからuseStateをインポート
ReactがもっているuseStateという道具を使えるようにしています！
用語メモ ✏️
・useState = 画面に表示するデータを覚えておくための機能
ここは「道具を取り出してるんだな〜」くらいで今はOK！
２. Appというコンポーネントを作る
function App() {
「App」という名前の コンポーネント（画面の部品） を作り始めます
Reactでは、画面を「部品」に分けて作るのが基本です！
３. 状態（＝textという変数）を管理する
// text という状態（state）と、それを更新する setText を定義
const [text, setText] = useState('こんにちは！');
Reactでは、画面に表示するデータを「状態（state）」として管理します
この1行でやっているのは、
・ text という状態変数を宣言（初期値は 'こんにちは！'）
・ setText という状態を更新する関数もセットで受け取っている
ということです！
普通の変数と違って、stateは「画面とつながっている」のがポイント👌
つまり、text の中身が変わると、それに合わせて画面も自動で更新される仕組みになっています！
状態（state）＝「画面をリフレッシュするトリガー付きの変数」みたいなものと考えるとイメージしやすいです！
(次回詳しく説明します🌟)
４. returnで画面に表示する内容を決める
このreturnの中で、このコンポーネントが画面に出力する内容を定義しています
中身のポイント☝️
<h1>{text}</h1>
→ 今のtextの中身を表示する
つまり、textの値が 'こんにちは！' なら「こんにちは！」と表示されるし、
textが 'こんにちは、React！' に変わったら、画面上もちゃんと更新されます！
<button onClick={() => setText('こんにちは、React！')}>
→ ボタンを押したら、setTextを使ってtextを更新する
これによって、表示されるテキストも一緒に変わります！
５. export defaultで外に出す
export default App; // このコンポーネントを他の場所でも使えるようにする
このファイルで作ったAppコンポーネントを他のファイルからインポートできるようにしています
ここは今すぐ深く理解しなくても大丈夫👍✨
ざっくり「このコンポーネントをアプリのメイン画面に使うための準備」くらいに思っておきましょう！
まとめ
今回は、
- Reactってなにが便利なの？
- 実際にローカルでReactアプリを立ち上げる方法
- ボタンをクリックして、表示を変える基本の仕組み
を一緒に体験してみました！
補足
本記事では、Reactを手軽に体験できる方法として npx create-react-app を使用しています
ただし、現在React公式からは「create-react-app は今後推奨されない」と発表がありました。
参考：https://ja.react.dev/blog/2025/02/14/sunsetting-create-react-app
学習目的で使う分には問題ありませんが、
もし今後本格的にReactでアプリ開発をしてみたい場合は、
より軽量で高速な Vite や、フルスタック対応の Next.js といった代替ツールの利用も検討してみてくださいね！
次回予告：さらにReactに触れてみよう！
今回のように「状態（state）」の変化で画面が更新される体験ができたら、次はもう一歩進んでみましょう！
⏭️ 次回以降の予定はこちら！
-
🔢 カウントアップアプリを作ってみる
→ ボタンを押すたびに数字が増えていく簡単アプリを通して、useState をさらに深く理解！ -
複数の状態を扱ってみる
→ 複数のuseStateを使って、ちょっとだけ複雑なUIにもチャレンジ！ -
🎨 CSSでスタイリングしてみる
→ Reactの中でどうやってデザインを整える？簡単なスタイル調整にもトライ！ -
🧩 コンポーネントを分けてみる
→ Reactの本領発揮！コードを小さく・再利用しやすくしていく方法を学びます！
💬「やってみたけど分からない！」
「ここをもう少し詳しく教えてほしい！」
そんなときは、気軽にコメントください😊
一緒にReactを楽しみながら学んでいきましょ〜！💪✨
実行環境🌎
- Node.js： v22.14.0
- npm： v10.9.2
- React： v19.1.0
- create-react-app： 5.0.1