はじめに
こんにちは！
この記事では、フロントエンド開発でよく名前を聞く「React」について、
一緒にゆっくり学んでいこう！というスタンスでお届けします✨
「Reactって聞いたことあるけど、ちょっと難しそう…」
そんなあなたに向けて、できるだけやさしく紹介していきます！
Reactってなに？
Reactは、Meta（旧Facebook）が開発した
UI（ユーザーインターフェース）を作るためのJavaScriptライブラリです。
つまり、「画面を作るための道具」みたいなもの！
コンポーネント（ボタン） ＝ ×
💡 コンポーネントを組み合わせることで画面を作っていく！ 💡
どう便利なの？
実は…
従来のHTMLへの記述方法では再描画コストが高いのです！
🔁 従来のDOM操作では…
たとえば、HTMLとJavaScriptでこんな感じにボタンを作ってたとします👇
id="message">こんにちは！
function update() {
document.getElementById("message").innerHTML = "こんにちは、React！";
}
このような場合、ブラウザは要素全体を再描画することが多く、特に要素が多くなると処理が重くなってしまいます…💦
⚛️ 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というコンポーネントを作る
「App」という名前の コンポーネント（画面の部品） を作り始めます
Reactでは、画面を「部品」に分けて作るのが基本です！
３. 状態（＝textという変数）を管理する
// text という状態（state）と、それを更新する setText を定義
const [text, setText] = useState('こんにちは！');
Reactでは、画面に表示するデータを「状態（state）」として管理します
この1行でやっているのは、・ text という状態変数を宣言（初期値は ‘こんにちは！’）・ setText という状態を更新する関数もセットで受け取っているということです！
普通の変数と違って、stateは「画面とつながっている」のがポイント👌つまり、text の中身が変わると、それに合わせて画面も自動で更新される仕組みになっています！
状態（state）＝「画面をリフレッシュするトリガー付きの変数」みたいなものと考えるとイメージしやすいです！(次回詳しく説明します🌟)
４. returnで画面に表示する内容を決めるこのreturnの中で、このコンポーネントが画面に出力する内容を定義しています
中身のポイント☝️
→ 今の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
Source link
Views: 0
