こんにちは、かつコーチです。
ReactはComponentベースで開発されています。
Reactのコンポーネントは、UIを独立した再利用可能な部品(部品やパーツ)として
構築する基本単位です。
コンポーネントは、アプリケーションの特定の機能やUIの部分を表現します。
Reactアプリケーションは複数のコンポーネントを組み合わせて構築されており、
それぞれのコンポーネントが特定の責務を持ち、必要に応じてデータを受け渡しながら連携します。
コンポーネントの種類
Reactには主に以下の2種類のコンポーネントがあります:
- 関数コンポーネント(Functional Component)
- こちらはReactの推奨される方法で、JavaScriptの関数としてコンポーネントを定義します。
Hooks
を利用することで状態管理や副作用(例:API呼び出しなど)を簡単に扱うことができます。
- こちらはReactの推奨される方法で、JavaScriptの関数としてコンポーネントを定義します。
- クラスコンポーネント(Class Component)
- 古くからある方法で、JavaScriptのクラスを使ってコンポーネントを定義します。関数コンポーネントに
Hooks
が導入されるまでは、状態管理やライフサイクルメソッドを扱うためにクラスコンポーネントが必要でしたが、現在ではあまり推奨されていません。
- 古くからある方法で、JavaScriptのクラスを使ってコンポーネントを定義します。関数コンポーネントに
関数コンポーネントの基本構造
まずは、関数コンポーネントの基本構造を見てみましょう。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
上記のWelcome
コンポーネントは単純な関数です。
この関数はprops
という入力を受け取り、Hello, {props.name}
という文字列を返します。
このように、Reactのコンポーネントは関数としてUIを定義するものです。
JSX(JavaScript XML)
Reactのコンポーネントでは、通常のJavaScriptコードに加えてJSXという構文を使用します。
JSXは、HTMLに似た記法でUIの見た目を定義できるため、
視覚的にわかりやすいという利点があります。
JSXはJavaScript内でHTMLライクな要素を直接書けるのが特徴です。
コンポーネントの例
1. Buttonコンポーネント
まず、シンプルなボタンを表示するButton
コンポーネントを作ってみましょう。
function Button(props) {
return <button>{props.label}</button>;
}
このButton
コンポーネントは、label
というprops(外部から渡される値)を受け取って、
その値をボタンに表示します。使うときには次のように書きます:
<Button label="Click Me" />
この例では、「Click Me」というラベルがボタンに表示されます。
2. クリックイベント付きのボタン
次に、ボタンがクリックされたときに何かを行うようなボタンを作ってみます。
function ButtonWithAction(props) {
return <button onClick={props.onClick}>{props.label}</button>;
}
このボタンコンポーネントは、クリックされたときにonClick
という関数を呼び出します。使用例:
function App() {
function handleClick() {
alert("Button clicked!");
}
return (
<div>
<ButtonWithAction label="Click Me" onClick={handleClick} />
</div>
);
}
この場合、ボタンがクリックされるとアラートが表示されます。
Reactでは、このようにしてユーザーインタラクションを簡単に扱うことができます。
3. 入力フィールドコンポーネント
次に、テキスト入力フィールドを扱うコンポーネントを見てみましょう。
function TextInput(props) {
return (
<div>
<label>{props.label}</label>
<input type="text" value={props.value} onChange={props.onChange} />
</div>
);
}
このTextInput
コンポーネントは、label
でラベルを表示し、value
を使って入力値を管理します。
また、入力が変更されたときにonChange
関数を呼び出します。
使用例:
function App() {
const [name, setName] = React.useState("");
return (
<div>
<TextInput
label="Your Name: "
value={name}
onChange={(e) => setName(e.target.value)}
/>
<p>Hello, {name}</p>
</div>
);
}
この例では、ユーザーが入力フィールドに名前を入力すると、
その名前が画面にリアルタイムで表示されます。
4. カードレイアウトのコンポーネント
次に、少し複雑なコンポーネントとして、カードレイアウトを作成してみます。
カードはよくUIの中で使われるもので、情報を整理して表示する際に便利です。
function Card(props) {
return (
<div style={{ border: "1px solid #ccc", padding: "16px", borderRadius: "8px" }}>
<h2>{props.title}</h2>
<p>{props.content}</p>
</div>
);
}
このCard
コンポーネントは、title
とcontent
という2つのprops
を受け取って、
簡単な情報をカード形式で表示します。
使用例:
function App() {
return (
<div>
<Card title="React Basics" content="Learn how to use React to build UIs." />
<Card title="Component Reusability" content="Build reusable components in React." />
</div>
);
}
この場合、2つのカードが表示され、それぞれ異なるタイトルと内容を持っています。
5. リストを表示するコンポーネント
次に、リストアイテムを表示するためのコンポーネントを見てみます。
function ItemList(props) {
return (
<ul>
{props.items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
このItemList
コンポーネントは、items
という配列を受け取り、その配列の内容をリスト表示します。
使用例:
function App() {
const fruits = ["Apple", "Banana", "Cherry"];
return (
<div>
<h1>Fruit List</h1>
<ItemList items={fruits} />
</div>
);
}
この場合、”Apple”, “Banana”, “Cherry”の3つのアイテムがリストとして表示されます。
6. モーダルダイアログコンポーネント
最後に、より実用的なコンポーネントとして、モーダルダイアログを作成してみます。
function Modal(props) {
if (!props.isVisible) {
return null;
}
return (
<div style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", backgroundColor: "#fff", padding: "20px", zIndex: 1000 }}>
<h2>{props.title}</h2>
<p>{props.content}</p>
<button onClick={props.onClose}>Close</button>
</div>
);
}
このModal
コンポーネントは、isVisible
がtrue
のときだけ表示されるようになっており、
タイトルと内容を表示します。
また、”Close”ボタンをクリックするとモーダルが閉じられます。
使用例:
function App() {
const [isModalVisible, setModalVisible] = React.useState(false);
return (
<div>
<button onClick={() => setModalVisible(true)}>Show Modal</button>
<Modal
isVisible={isModalVisible}
title="Important Information"
content="This is the modal content."
onClose={() => setModalVisible(false)}
/>
</div>
);
}
この場合、”Show Modal”ボタンをクリックするとモーダルが表示され、”Close”ボタンを押すと閉じます。
結論
Reactのコンポーネントは、UIを小さく分割し、それぞれが独立して動作することで、
コードの再利用性やメンテナンス性を高めることができます。
コンポーネントは、それぞれが他のコンポーネントと協力して機能し、UI全体を構築します。
今回紹介したボタン、入力フィールド、カード、リスト、モーダルなどは、
ReactでのUI構築の基本的な例ですが、これを応用して複雑なUIも簡単に実現できます。