Reactの基本概念
Reactとは？
Reactはユーザーインターフェースを構築するためのJavaScript ライブラリです。Facebookが開発・メンテナンスを行っています。
「コンポーネント」を中心とした設計で、効率的なUI開発が可能！
主な特徴
- コンポーネントベース：UIを独立した再利用可能なパーツで構築
- 仮想DOM：効率的な描画の更新
- 一方向のデータフロー：予測可能な状態管理
- JSX：JavaScriptの中にHTMLを書くような構文
🔍 Reactは「ライブラリ」であり「フレームワーク」ではありません。必要に応じて他のライブラリと組み合わせて使います。
コンポーネントの基本
コンポーネントの種類
- 関数コンポーネント：シンプルなJavaScript関数
- クラスコンポーネント：React.Componentを継承したクラス
// 関数コンポーネント
function Welcome(props) {
return <h1>こんにちは、{props.name}さん</h1>;
}
// クラスコンポーネント
class Welcome extends React.Component {
render() {
return <h1>こんにちは、{this.props.name}さん</h1>;
}
}
✏️ 現在のベストプラクティスでは関数コンポーネントとHooksの使用が推奨されています。
ライフサイクルと副作用
関数コンポーネントでのライフサイクル
Hooksを使って副作用を管理します：
// マウント/アンマウント時に実行
useEffect(() => {
// コンポーネントがマウントされた時に実行
console.log('コンポーネントがマウントされました');
// クリーンアップ関数（アンマウント時に実行）
return () => {
console.log('コンポーネントがアンマウントされました');
};
}, []);
依存配列の重要性
- []：マウント時とアンマウント時のみ実行
- [依存値]：依存値が変わるたびに実行
- 省略：レンダリングのたびに実行
Hooksの基本
useState
コンポーネント内で状態を管理するためのHook
const [count, setCount] = useState(0);
// カウントを増やす関数
const increment = () => {
setCount(count + 1);
};
useEffect
副作用（データフェッチ、DOM操作など）を扱うためのHook
useContext
Contextを使ってコンポーネントツリー全体でデータを共有
useReducer
複雑な状態ロジックを管理するためのHook
🧩 Hooksは関数コンポーネントでのみ使用できます。またHooksはコンポーネントのトップレベルでのみ呼び出せます。
JSXの書き方
JSXの基本構文
- HTMLのような構文でUIを表現できる
- 最終的にはReact.createElement()に変換される
- JavaScriptの式を{}で囲んで埋め込める
const element = <h1>こんにちは、{user.name}さん</h1>;
クラスとスタイル
- class属性の代わりにclassNameを使用
- インラインスタイルはオブジェクト形式で記述
// クラス名の指定
<div className="container">...</div>
// インラインスタイル
const styles = {
color: 'blue',
fontSize: '16px'
};
<div style={styles}>...</div>
条件付きレンダリング
// 論理演算子を使った条件
{isLoggedIn && <UserGreeting />}
// 三項演算子を使った条件
{isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
実践的なテクニック
リストのレンダリング
const items = ['りんご', 'バナナ', 'オレンジ'];
function FruitList() {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
🔑 リストアイテムには必ずkeyプロパティを指定しましょう！
イベント処理
function Button() {
const handleClick = () => {
console.log('クリックされました！');
};
return (
<button onClick={handleClick}>
クリック
</button>
);
}
フォーム処理
function Form() {
const [name, setName] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
alert(`こんにちは、${name}さん！`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">送信</button>
</form>
);
}