はじめに
Reactを学び始めたばかりの方にとって、「関数コンポーネント」という言葉はやや難しく聞こえるかもしれません。
この記事では、Reactの関数コンポーネントとは何か？、そしてどのように使うのか？を、わかりやすく丁寧に解説していきます。
コンポーネントってなに？
コンポーネントとは「UIの部品」です。
Reactでは、以下のようなUIの構成要素を「コンポーネント」として分けて実装します。
- ボタン
- 入力フォーム
- ToDoリスト
- ヘッダーやフッター
複数のコンポーネントを組み合わせて、アプリケーション全体を構築していきます。
関数コンポーネントとは？
関数コンポーネントとは、その名のとおり関数として定義されたReactのコンポーネントでReactの基本単位であり、今のReact開発では主流の書き方です。
function Hello() {
return <h1>Hello, world!</h1>;
}
上記のように function を使って定義し、JSX（HTMLのような構文）を return で返すだけで作れます。
クラスコンポーネントとの違い
書き方
【関数】Functionを使う【クラスコンポーネント】classを使う
状態管理
【関数】useState() などのHooks【クラスコンポーネント】this.state
React公式推奨
【関数】現在はこちら【クラスコンポーネント】 推奨されない旧式の書き方
コード量
【関数】少なめ・シンプル【クラスコンポーネント】多くて複雑になりがち
JSXとは？
JSXは「JavaScript XML」の略で、JavaScript内にHTMLライクな構文を書ける仕組みです。
return (
<div>
<p>これはJSXです！</p>
</div>
);
注意点：
必ず1つのタグで囲む（例：
class 属性は className に書き換える必要がある
実用例：ToDoアプリを関数コンポーネントで書いてみる
import React, { useState } from 'react';
function TodoApp() {
const [input, setInput] = useState('');
const [todos, setTodos] = useState([]);
const addTodo = () => {
if (input.trim() === '') return;
setTodos([...todos, input]);
setInput('');
};
return (
<div>
<h2>My ToDo List</h2>
<input value={input} onChange={(e) => setInput(e.target.value)} placeholder="新しいタスクを入力" />
<button onClick={addTodo}>追加</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
このように、関数の中に useState と JSX を書くだけで、簡単にToDoアプリが作れます！
ReactDOMで画面に表示する方法
import ReactDOM from 'react-dom';
import TodoApp from './TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('root'));
HTML側には、以下のように描画先となる div を用意しておきます。
html:index.html
<div id="root"></div>
まとめ
関数コンポーネントとは、関数で定義されたUI部品
return で JSX（見た目） を返すのが特徴
useState などの Hooks を使って状態管理が可能
現代のReact開発では、関数コンポーネントが主流
関連リンク
React公式ドキュメント
useStateを使ってみよう
最後に
この記事が「関数コンポーネントって何？」という方の疑問解消になれば嬉しいです！
いいね・フォローもお待ちしています！