ReactJSにおける関数コンポーネントとフックを使うべき理由
By hientd, at: 2024年9月16日17:43
Estimated Reading Time: __READING_TIME__ minutes
近年、React開発は関数コンポーネントとフックを中心に大きく変化しました関数コンポーネントとフックへと大きくシフト。もし、プロジェクトでまだクラスコンポーネントを使用しているのであれば、アプローチの見直しが必要な時期です。フックと組み合わせた関数コンポーネントは、コードをシンプルに、クリーンに、そして効率的にします。
この記事では、一貫した例を用いて関数コンポーネントとフックの利点を解説し、React開発プロセスをどのようにアップグレードできるかを示します。
関数コンポーネントとは？
関数コンポーネントは、画面に要素を表示するためにReactが使用するJSXを返すJavaScript関数です。クラスコンポーネントとは異なり、関数コンポーネントはよりシンプルで、ライフサイクルメソッドやthisキーワードのような不要なオーバーヘッドがありません。
2つのアプローチを簡単に比較してみましょう。
クラスコンポーネント：
class SimpleComponent extends React.Component {
render() {
return < div >Welcome to the Glinteco! < / div >;
}
}
関数コンポーネント：
const MyComponent = () => {
return < div >Welcome to the Glinteco!< / div >;
};
ご覧のように、関数コンポーネントはよりクリーンで、記述が容易です。これは、状態やライフサイクルイベントを管理する必要のないシンプルなコンポーネントに最適です。
関数コンポーネントを使用する理由
1. シンプルで読みやすいコード
関数コンポーネントへの切り替えの主な理由の1つはシンプルさです。関数コンポーネントはより簡潔で、thisやライフサイクルメソッドを管理する必要がありません。これにより、コードの追跡と保守が容易になります。
カウンターコンポーネントを作成したいとします。関数コンポーネントを使用した場合は次のようになります。
const Counter = () => {
return (
< div >
< p >You clicked 0 times
< button >Click me < / button >
< / div >
);
};
このコンポーネントは、クラスベースのバージョンよりも既に理解しやすく、まだロジックを追加していません。
2. ボイラープレートの削減
関数コンポーネントを使用すると、コンストラクタ、ライフサイクルメソッド、thisなどの不要なコードを記述する必要がなくなります。つまり、記述するコードが少なくなり、保守が容易になります。
クラスコンポーネントと関数コンポーネントを使用して、カウンターに機能を追加してみましょう。クラスベースのバージョンを以下に示します。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
< div >
< p >You clicked {this.state.count} times
< button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
< /button >
< / div >
);
}
}
フックを使用した関数バージョンと比較してみましょう。
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
< div >
< p >You clicked {count} times
< button onClick={() => setCount(count + 1)}>Click me
< / button >
< / div >
);
};
関数コンポーネントでは、ボイラープレートが少なくなり、useStateなどのフックにより状態ロジックを追跡しやすくなります。
フックの紹介：その強力な理由
Reactがフックを導入する前、関数コンポーネントは状態を管理したり、副作用を実行したりすることができませんでした。フックにより、関数コンポーネントはクラスコンポーネントと同じ機能を実行できるようになりました。ただし、より柔軟で再利用可能な方法です。
一般的な2つのフック、useStateとuseEffectを見てみましょう。
1. useStateを使用した状態の管理
上記の例では、useStateフックを使用してcount状態を管理しました。フックを使用すると、関数コンポーネント内で直接状態を管理できるため、クラスコンポーネントに切り替えることなく、状態のある動作を追加しやすくなります。
const [count, setCount] = useState(0)
useStateフックは、現在の状態（count）と、その状態を更新する関数（setCount）の2つの値を返します。このフックは、単一のコンポーネント内で必要な回数だけ使用できます。
2. useEffectを使用した副作用の処理
フックを使用すると、データの取得やDOM操作などの副作用を処理することもできます。これはuseEffectフックを使用して行われます。たとえば、countが変更されるたびにドキュメントのタイトルを更新してみましょう。
import { useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
< div >
< p >You clicked {count} times
< button onClick={() => setCount(count + 1)}>Click me < / button >
< / div >
);
};
この例では、countが変更されるたびにuseEffectがトリガーされ、ドキュメントのタイトルがそれに応じて更新されます。2番目の引数[count]により、効果はcountが更新された場合にのみ実行されます。
関数コンポーネントとフックを使用する利点
1. カスタムフックによる再利用可能なロジック
フックの最も強力な側面の1つは、ロジックをカプセル化して複数のコンポーネントで再利用できるカスタムフックを作成できることです。これにより、コードがよりモジュール化され、保守が容易になります。たとえば、タイマーを処理したり、APIからデータを取得したりするカスタムフックを作成できます。
2. テストが容易
関数コンポーネントはJavaScript関数であるため、テストが容易です。クラスメソッドを処理したり、thisを管理したりする必要はありません。コンポーネントの出力をテストし、フックの動作を確認するだけです。
3. パフォーマンスの向上
関数コンポーネントはクラスコンポーネントのようにライフサイクルメソッドを管理するオーバーヘッドがないため、パフォーマンスが向上する傾向があります。フックを使用すると、コンポーネントの更新方法とタイミングをより細かく制御できるため、不要なレンダリングが少なくなり、最適化が向上します。
4. 将来性のあるコード
Reactチームは、関数コンポーネントとフックをデフォルトのアプローチとして推進しています。クラスコンポーネントはまだサポートされていますが、フックはReactの未来を表しています。今すぐ採用することで、Reactの進化に合わせてコードを最新の状態に保ち、アップグレードを容易にすることができます。
結論
関数コンポーネントとフックは、React開発の未来です。これらはコードを簡素化し、状態と副作用の管理を容易にし、パフォーマンスと再利用性を向上させます。関数コンポーネントに切り替えることで、より保守可能なコードを作成するだけでなく、今後のReact機能にも対応できるアプリケーションを作成できます。
まだ行っていない場合は、クラスコンポーネントのリファクタリングを開始し、フックの力を活用する時です！
