はじめに
今回、私が参画している案件でVueからReactへの移行プロジェクトが始まりました。
Vueに慣れていたため、最初特に苦戦しました。
現在開発のトレンド的にVue.jsからReactへの移行を検討している現場は多くあるかと思います。
Reactを理解するには様々クリアすべきポイントはありますが、
まずは、両フレームワーク間の類似点と違いを理解することが重要と考えました。
本記事では、VueとReactで「同じような役割をの機能」に着目し、VueとReactを比較しながらポイントを整理しています。
ご参考になれば幸いです。
useMemoとComputed 〜同じような役割をの機能〜
ReactのuseMemoとVueのComputed。
不必要な計算を避ける役割で使われるそれぞれのプロパティ。
seMemoとは
Reactの useMemo は、計算コストが高い関数の戻り値をメモ化するためのフックです。
これにより、依存する値が変更されない限り、メモ化された値を再利用することができ、不必要な計算を避けることが可能です。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);この例では、a や b が変わった場合のみ computeExpensiveValue 関数が呼ばれ、結果が再計算されます。
Computedとは
Vueの computed は、リアクティブなデータに基づいて自動的に再計算されるプロパティです。
これは、依存するデータが変更された場合にのみ再評価され、その値は再計算された後にキャッシュされます。
computed: { computedValue() { return this.a + this.b; } }この例では、a または b の値が変更されると computedValue が再計算されます。
このようにReactとVueで同じような使い方をするものがあります。
厳密には異なる部分がありますが、ここではあくまでも最初のイメージを掴むきっかけとして、
共通する部分について着目していきます。
同じような役割をの機能
| 機能 | React | Vue | 説明 |
|---|---|---|---|
| コンポーネントの使用 | コンポーネント | コンポーネント | UIの再利用可能な部分を構築するための基本的な単位。 |
| リアクティブデータと状態管理 | useState | data, reactive | コンポーネントの状態を管理し、データが変更されるとUIが更新される。 |
| コンテキストとグローバル状態管理 | useContext, Context API | provide, inject | 親コンポーネントから子コンポーネントへデータを渡す方法。 |
| メモ化された値 | useMemo | computed | 依存データが変更された場合にのみ再計算される値。 |
| メモ化されたコールバック | useCallback | watchEffect | イベントハンドラやコールバックをメモ化する。 |
| サイドエフェクトの管理 | useEffect | watch, watchEffect | データ変更に応じた副作用（非同期処理含む）の管理。 |
| 条件付きレンダリング | {condition && <Component />} | v-if | 条件に基づいたコンポーネントのレンダリング制御。 |
| リストレンダリング | map() を使用 | v-for | 配列データを基にしたリストのレンダリング。 |
| イベントハンドリング | onClick, onChange | @click, @change | ユーザーイベントへの応答を設定する。 |
| 属性とプロップス | props | props, :attribute | 親コンポーネントから子コンポーネントへのデータ受け渡し。 |
| フォームとデータバインディング | useState を用いた手動バインディング | v-model | フォーム入力とデータの同期を行う。 |
おわり
VueからReactへの移行を経て、そもそもの根本的な設計が異なることに気づきました。
それぞれのフレームワークの文化と設計哲学を理解することも成功の鍵だと気付かされました。
すでに理解しているものに照らし合わせて、同じ点と異なる点に着目して理解を深め、
ある程度理解度が深まってくると、新しい着眼点で理解を深めるのもオススメ。
この記事少しでも学習の参考になれば幸いです。