Reactの特徴についてまとめてみました。
Reactは、Meta（旧Facebook）によって開発されたオープンソースのJavaScriptライブラリで、動的でインタラクティブなユーザーインターフェイス（UI）を構築するために使用されます。Reactの主要な特徴には、コンポーネントベースのアーキテクチャ、仮想DOM（Virtual DOM）、JSX、フック（Hooks）などがあります。
Reactの知識まとめ（例付き）
概要
Reactは、Meta（旧Facebook）によって開発されたオープンソースのJavaScriptライブラリで、動的でインタラクティブなユーザーインターフェイス（UI）を構築するために使用されます。Reactの主要な特徴には、コンポーネントベースのアーキテクチャ、仮想DOM（Virtual DOM）、JSX、フック（Hooks）などがあります。
1,コンポーネント
コンポーネントとは
コンポーネントは、UIを構成する独立した再利用可能な部品です。各コンポーネントは独自の状態やプロパティを持ち、他のコンポーネントと組み合わせて複雑なUIを構築します。
コンポーネントの例
//関数コンポーネント
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
クラスコンポーネント
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
2.JSX（JavaScript XML）
JSXとは
JSXは、JavaScript内でHTMLに似た構文を使用できる拡張機能です。JSXを使うことで、UIの構造を直感的に記述できます。
JSXの例
const element = <h1>Hello, world!</h1>;
レンダリング
ReactDOM.render(element, document.getElementById('root'));
3.PropsとState
Props（プロパティ）
説明：コンポーネント間でデータを受け渡すための手段。
特徴：読み取り専用で、子コンポーネント内で変更できない。
State（状態）
説明：コンポーネント内部で管理される動的なデータ。
特徴：useStateフックやthis.setStateで更新可能。
PropsとStateの例
Propsを使用したコンポーネント
function User(props) {
return <h2>Username: {props.username}</h2>;
}
function App() {
return <User username="Alice" />;
}
Stateを使用したコンポーネント
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増加</button>
</div>
);
}
4,フック（Hooks）
フックとは
フックは、関数コンポーネントで状態管理やライフサイクルメソッドのような機能を使用できるようにする仕組みです。
主なフックと例
useState
状態を管理するためのフック。
function Example() {
const [value, setValue] = useState('初期値');
return (
<div>
<p>{value}</p>
<button onClick={() => setValue('更新された値')}>更新</button>
</div>
);
}
useEffect
副作用（データ取得、DOM操作など）を処理するためのフック。
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then((response) => response.json())
.then((json) => setData(json));
}, []);
return <div>{data ? data.message : '読み込み中...'}</div>;
}
5, 仮想DOM（Virtual DOM）
仮想DOMとは
仮想DOMは、実際のDOMの軽量なコピーです。状態の変化に応じて仮想DOMを更新し、その差分だけを実際のDOMに反映することで、パフォーマンスを最適化します。
仮想DOMの例
以下のコードでは、countが更新されるたびに仮想DOMが再描画され、差分だけが実DOMに適用されます。
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増加</button>
</div>
);
}
6,ライフサイクルメソッド
ライフサイクルとは
コンポーネントが生成、更新、破棄される一連の過程をライフサイクルと呼びます。関数コンポーネントでは、フックを使ってこれらのタイミングで処理を行います。
ライフサイクルメソッドの例
//コンポーネントのマウント時
useEffect(() => {
// コンポーネントがマウントされた後に実行
}, []);
コンポーネントの更新時
useEffect(() => {
// 状態やプロパティが更新された後に実行
});
リアクト用語集
コンポーネントのアンマウント時
useEffect(() => {
return () => {
// コンポーネントがアンマウントされる前に実行
};
}, []);
ユニデレクショナル（単方向）データフロー
Reactは、単方向データフローを採用しています。親コンポーネントから子コンポーネントへpropsでデータを渡し、状態管理がシンプルになります。
メリット:
データの流れが明確で、コードの予測可能性が高い。
デバッグが容易。
状態管理（State）
Reactは、コンポーネントごとにState（状態）を持つことができます。状態が変わるたびにUIが自動的に更新されます。
React Hooksを使えば、関数コンポーネントでも状態管理が可能になります（例：useState、useEffect）。
Reactのエコシステム
(1) React Router
シングルページアプリケーション（SPA）で、複数の画面間の遷移を実現するためのルーティングライブラリ。
(2) Redux / Recoil / Context API
状態管理ライブラリとして、ReduxやRecoilを使うことで、大規模アプリでも状態管理が容易になります。
Context APIも、グローバルにデータを共有するための便利な方法です。
まとめ
Reactは、コンポーネント指向、仮想DOM、JSXといった特徴を活かし、フロントエンド開発を効率化する強力なライブラリです。多くの大規模プロジェクトでも採用されており、そのエコシステムの豊富さが、Reactの人気の一因となっています。
Reactの特徴まとめ:
コンポーネントの再利用性で開発がスムーズ。
Virtual DOMで高速なレンダリング。
JSXで直感的なコーディングが可能。
単方向データフローで状態管理が簡潔。
Reactを学ぶことで、フロントエンド開発のスキルを大幅に向上させ、さまざまなウェブアプリケーション開発に応用することができます。
最後までよんでいただきありがとうございます。
毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです！