運営者：そうすけ
愛媛出身の30代のブロガー兼ソフトウェアエンジニア。
主にフロント・バックの開発を行っています。
趣味はガジェットと植物。
Vueを勉強して業務でさわりはじめ、1年半が立ちます。
フロントエンドエンジニアとしてできることを増やしたかったのと、リプレイス案件に対応するためReactを勉強してみました。
Vueが理解できていると、フロントエンド全体の考え方やブラウザについての知識がついているので、Reactも勉強しやすかったです。
なのでVueが理解できていると、ReactでもVueでいう〇〇だよね～という感じで似ている部分も多く、理解のスピードも速いように感じました。
※間違っているところがあれば意見ください！！
使用した教材
私が使ったのは、React – The Complete GuideというUdemyのコースです。
この教材は、ただのコードの書き方だけでなく、Reactの思想や背景も丁寧に解説してくれます。
Vueの経験がある方であれば、「この部分はVueの〇〇に似ている」とすぐに理解できるのでおすすめ。
VueとReactで似ているところ
VueとReactはどちらもモダンなフロントエンドフレームワークで、コンポーネント指向の開発スタイルを採用しています。
これにより、小さな部品（コンポーネント）を組み合わせてアプリを作るという、全体的な構成は似ています。
記述が違うものの、概念的にほとんど同じ部分をまずは具体例を挙げながら共通点を見ていきます
1. 状態管理（refとuseState）
Vueではref、ReactではuseStateを使ってコンポーネントの状態を管理します。
どちらも「リアクティブな状態を持たせる」という考え方に基づいています。
ただし、Vueではrefオブジェクトの中の.valueにアクセスしますが、Reactでは配列の分割代入で状態とその更新関数を取得するという違いがあります。
例：カウンター機能
- Vueの場合 Vueでは、状態を
refでラップし、increment関数で直接値を更新します。
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
- Reactの場合 Reactでは、
useStateから得たsetCount関数を使って状態を更新します。
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
return Count: {count};
}
export default Counter;
2. ライフサイクル（onMountedとuseEffect、unMounted）
VueのonMountedとReactのuseEffectは、コンポーネントのライフサイクルに関わる処理を記述するためのものです。
たとえば、外部APIのデータ取得や、初期化処理などに使われます。
さらに、VueのonUnmountedに相当するReactの機能として、useEffect内で「クリーンアップ関数（戻り値の関数）」を使います。
例：マウントとアンマウント時の処理
- Vueの場合
onMountedでマウント時の処理を行い、onUnmountedでアンマウント時の処理を追加します。
import { onMounted, onUnmounted } from 'vue';
onMounted(() => {
console.log('コンポーネントがマウントされました！');
});
onUnmounted(() => {
console.log('コンポーネントがアンマウントされました！');
});- Reactの場合 Reactでは、
useEffectの戻り値にクリーンアップ関数を記述します。
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('コンポーネントがマウントされました！');
return () => {
console.log('コンポーネントがアンマウントされました！');
};
}, []);
return こんにちは！;
}
export default MyComponent;3. 状態の監視（watchとuseEffect）
Vueのwatchは特定の状態やプロパティの変更（監視したいref）を監視して、必要な処理を行います。
Reactでは、useEffectに依存配列（監視したいstate）を指定することで似たような監視を実現できます。
例：監視対象が変わるたびにログを出力
- Vueの場合
watchを使い、状態が変化したときの処理を記述します。
import { ref, watch } from 'vue';
const message = ref('Hello');
watch(message, (newValue, oldValue) => {
console.log(`変更前: ${oldValue}, 変更後: ${newValue}`);
});
- Reactの場合 Reactでは、
useEffectの依存配列に状態を渡します。
import { useState, useEffect } from 'react';
function WatchComponent() {
const [message, setMessage] = useState('Hello');
useEffect(() => {
console.log(`メッセージが変更されました: ${message}`);
}, [message]);
return (
setMessage(e.target.value)}
placeholder="メッセージを入力してください"
/>
);
}
export default WatchComponent;
4. グローバル状態管理（PiniaとRedux）
VueではPiniaが主流の状態管理ライブラリとして使われますが、ReactではReduxが広く採用されています。
どちらも複雑なアプリケーションで複数のコンポーネント間の状態を一元管理するのに便利です。
Piniaの特徴
- Vue 3用に設計されており、シンプルで直感的なAPIを提供
- TypeScriptとの統合が簡単
Reduxの特徴
- 状態管理のための厳密なルールを提供
- ミドルウェアを使って高度な拡張が可能
VueとReactで異なるところ
次に、VueとReactで異なる特徴を具体例とともに解説します。
1. 記述スタイル（HTMLライクとJSライク）
VueはHTMLに拡張的にJavaScriptを追加するスタイルですが、ReactはJavaScriptを中心に記述します。
VueはHTMLファイルに直書きのスクリプト、Reactはタグの内容を関数内に記述するのでJsまたはPHPに近い感じがします。
例：コンポーネントの記述
- Vueの場合
<template>
<button @click="handleClick">クリックしてください</button>
</template>
<script setup>
function handleClick() {
alert('クリックされました！');
}
</script>
- Reactの場合
function MyComponent() {
function handleClick() {
alert('クリックされました！');
}
return <button onClick={handleClick}>クリックしてください</button>;
}
export default MyComponent;
2. 状態更新の方法
Vueでは状態を直接更新しますが、Reactでは専用の関数を使用して状態を更新します。この違いは、Reactが「イミュータブル（不変）」なデータ管理を重視している点に起因します。
例：カウントを10に更新
- Vueの場合 状態を直接更新できます。
import { ref } from 'vue';
const count = ref(0);
function updateCount() {
count.value = 10;
}
- Reactの場合 更新専用の関数
setCountを使用します。
stateがプリミティブの場合
import { useState } from 'react';
function UpdateCount() {
const [count, setCount] = useState(0);
function updateCount() {
setCount(10);
}
return カウントを10に更新;
}
export default UpdateCount;
stateがオブジェクトの場合はプロパティに直接代入できないため、新しいオブジェクトを作って更新する必要があります。
import { useState } from 'react';
function banana() {
const [banana, setBanana] = useState(
{name:"banana",price:200}
);
function updatePrice() {
const newFruits = {...fruits}
newFruits.price = 400
setCount(newFruits);
}
return (
<div>{banana.name}:{banana:price}</div>
)
バナナの価格を更新;
}
export default UpdateCount;
3. 子から親へのデータ受け渡し
Vueではemitsで親コンポーネントにイベントを発火して値を渡します。一方、Reactでは親コンポーネントから関数を渡し、それを子コンポーネントで実行して値を渡します。
例：子コンポーネントから親にメッセージを送る
- Vueの場合 子コンポーネントで
$emitを使用して親の関数を明示的に発火し、その引数としてデータを送信します。
<!-- Parent.vue -->
<template>
<Child @send-message="handleMessage" />
<div>{{message}}<div/>
</template>
<script setup>
const message = ref("");
function handleMessage(msg) {
message.value = msg
}
</script>
<!-- Child.vue -->
<template>
<button @click="$emit('send-message', 'こんにちは！')">送信</button>
</template>
- Reactの場合 親から渡された更新用関数を子で呼び出して値を送信します。
function Parent() {
const [message,setMessage] = useState("");
function handleMessage(msg) {
console.log(`受信メッセージ: ${msg}`);
}
return (
<Child setMessage= {setMessage} />
<div>{message}</div>
);
}
function Child({ setMessage}) {
return <button onClick={() => setMessage('こんにちは！')}>送信</button>;
}
export default Parent;
感想
Vueの経験がある方にとって、Reactの学習はスムーズに進むと思いました。
Reactの方が難しいと言われるけど、そんなことないです！
どちらも難しいです！笑
Reactは大規模開発に向いていると言われますが、コンポーネントごとのデータの流れが単一なのことと、規約が結構はっきりしているので、他の開発者から見てもコードが理解しやすいと思いました。
特にReactの「関数型プログラミング」は独特で、縛りはあるものの、コードの構造化や再利用性は高いと感じましました。
逆に言うと、Reactの方が関数型プログラミングの思想が強く、良くも悪くも構造化を考えないといけないので、そこまで設計を考慮しないのであればＶｕｅでもいいと思いました。
ただ両者似ており、どっちも正直同じ設計思想で扱うことができます。
フロントエンドの本質的なスキルは、ライフサイクルを考えて描画したり、コンポーネントの設計をしっかり考えて切りだしたり、型定義したりと、共通しているなと感じました。
でもReact楽しい！
Vueが廃れそうなのはありそうですので、両方できる用勉強しておきます。。
コメント