1. はじめに
私は、業界未経験者で、エンジニア未経験者です。Reactを学び始めてから、約３か月が経過しました。Reactを学び、関数コンポーネント、return、フック、コンポーネント分割等…。
最初は、全部がごちゃごちゃしていて混乱し、理解が追いつきませんでした。
例えば…
・function 〇〇が呪文に見える
・returnは何を返しているのか、どこに返っているのかがわからない
・useState、useEffect、useRefの違いがわからない
・コンポーネントを分割する意味がわからない
などなど、初学者目線で私が躓いた所と、理解できたポイントをまとめました。
2. Reactを学び始めて躓いたこと
学び始めてから躓いた部分は以下の４点が挙げられます。
- 関数コンポーネントって何？
- return は何を返してどこに返るの？
- useState・useEffect・useRef の違いが分からない
- コンポーネント分割ってどういう意味？
3. 関数コンポーネント = “マシンのボタン”と考える
初学者向けの捉え方を自己流にまとめました。
- 関数本体 = マシン
- 関数名() = ボタン
- return = 出荷口（画面に返す）
4. useState・useEffect・useRef の違いを理解
基礎中の基礎ですがしっかりと違いを認識しましょう。
- useState = 状態管理、書き換えると画面更新
- useEffect = 副作用、描画後や状態変化時に作業
- useRef = 値を保持する箱、画面更新はされない
５. 実際のコード例
- 関数コンポーネント + return
title
function Greeting(props) {
return <h1>こんにちは、{props.name}さん！</h1>;
}
<Greeting name="きーた"/>
２. useState で状態管理
title
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>現在のカウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増やす</button>
</div>
);
}
３. useEffect で副作用
title
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => setSeconds(prev => prev + 1), 1000);
return () => clearInterval(interval);
}, []);
return <p>経過秒数: {seconds}</p>;
}
4.useRef で DOM にアクセス
title
import React, { useRef } from 'react';
function InputFocus() {
const inputRef = useRef();
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={() => inputRef.current.focus()}>フォーカスを当てる</button>
</div>
);
}
5.コンポーネント分割例
• App.js（親コンポーネント）
App.js
import React from 'react';
import Header from './Header';
import Counter from './Counter';
import Footer from './Footer';
function App() {
return (
<div>
<Header />
<Counter />
<Footer />
</div>
);
}
export default App;
• Header.js
Header.js
function Header() {
return <h1>React学習完全ガイド</h1>;
}
export default Header;
• Footer.js
Footer.js
function Footer() {
return <p>© 2025 初心者向けReact学習</p>;
}
export default Footer;
まとめ（初学者向け）
勉強を始めたばかりの方は、個人的にどんな用途で使うのか違いを認識するのが重要だと感じています。
• 関数名() = マシンのボタン
• return = 結果を外に返す出口
• useState = 状態管理、画面更新
• useEffect = 副作用、描画後に作業
• useRef = 値を保持、画面は更新されない
• コンポーネント分割 = コード整理＋フックや return の理解を助ける
ぜひ初学者の方の参考になれば嬉しいです。