Reactとは?
Reactは、Facebookによって開発されたフロントエンドライブラリで、UIコンポーネントを作成するために使用されます。Reactは、仮想DOM(Virtual DOM)を使った効率的なレンダリングが特徴で、大規模なアプリケーションでもパフォーマンスが優れています。
Reactの基本構造
Reactでは、UIをコンポーネントとして分割し、それらを組み合わせてアプリケーションを構築します。コンポーネントは主に、JSX(JavaScript XML)で記述されます。
JSXとは?
JSXは、HTMLライクな構文でJavaScript内にHTMLを記述できるものです。JSXはコンパイル時にJavaScriptのReact.createElement()
に変換され、Reactコンポーネントが生成されます。
// JSXの基本構造
const element = <h1>Hello, React!</h1>;
このように、JSXを使うことで、JavaScriptの中にHTMLのような構文で要素を記述できます。これにより、コンポーネントの作成が直感的で簡単になります。
コンポーネントの定義
Reactコンポーネントは、主に2つの方法で定義されます。
コンポーネントタイプ | 説明 |
---|---|
関数コンポーネント | 最もシンプルな形式で、関数として定義されたコンポーネント。状態を持たず、受け取ったプロパティに基づいてUIを描画する。 |
クラスコンポーネント | ES6クラスで定義され、状態(state)やライフサイクルメソッドを持つことができる。 |
関数コンポーネントの定義
Reactで最もシンプルなコンポーネントは、関数コンポーネントです。これは、関数として定義され、JSXを返します。
// 関数コンポーネントの定義例
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
この例では、Welcome
という関数コンポーネントを定義しており、props
を受け取ってUIを描画します。
クラスコンポーネントの定義
より複雑なコンポーネントは、クラスコンポーネントとして定義されます。クラスコンポーネントは、状態(state)やライフサイクルメソッドを持ち、より柔軟な処理が可能です。
// クラスコンポーネントの定義例
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
この例では、React.Component
を継承して、render
メソッド内でJSXを返しています。クラスコンポーネントは、関数コンポーネントよりも複雑なロジックを実装できます。
Reactの状態(State)とプロパティ(Props)
Reactコンポーネントは、2つの主要なデータモデルでUIを更新します。それがstateとpropsです。
モデル | 説明 |
---|---|
props | コンポーネント間でデータを渡すために使用。親コンポーネントから子コンポーネントへデータを渡す。 |
state | コンポーネント自身が管理する状態。ユーザーの操作やアプリケーションの動作に応じて更新される。 |
Stateの使用例
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
この例では、クラスコンポーネント内でstate
を管理し、setState
を使ってコンポーネントの状態を更新しています。
Reactのライフサイクル
Reactコンポーネントには、ライフサイクルメソッドがあり、コンポーネントの生成、更新、破棄のタイミングで特定の処理を実行できます。
ライフサイクルメソッド | 説明 |
---|---|
componentDidMount |
コンポーネントがDOMに挿入された後に呼ばれる。データの取得やタイマーの設定などに使う。 |
componentDidUpdate |
コンポーネントの更新が完了した後に呼ばれる。再レンダリング後に必要な処理を実行する。 |
componentWillUnmount |
コンポーネントがDOMから削除される直前に呼ばれる。タイマーのクリアなどのクリーンアップ処理に使う。 |
ライフサイクルメソッドは、コンポーネントの挙動をより制御するために活用されます。
まとめ
Reactは、コンポーネントベースのフロントエンドライブラリであり、仮想DOMを使用して効率的にUIをレンダリングします。JSXを使用することで、JavaScript内に直感的にUIを記述でき、関数コンポーネントやクラスコンポーネントを活用して動的なアプリケーションを構築できます。また、状態管理やライフサイクルメソッドを通じて、より複雑な動作も簡単に実装できます。