ReactとVueどっちを学ぶ？初心者のためのフレームワーク選択ガイド

みなさん、JavaScriptを学び始めて「次はフレームワークに挑戦したい！」と思っていませんか？

「ReactとVueってよく聞くけど、どっちがいいの？」 「初心者にはどちらが向いているの？」 「就職に有利なのはどっち？」

こんな疑問を抱えている方も多いでしょう。

この記事では、ReactとVueを徹底比較します。 初心者のあなたがどちらを選ぶべきか、具体的にお伝えしますね。 学習のしやすさから将来性まで、分かりやすく解説します。

読み終わる頃には、あなたにピッタリのフレームワークが見つかるはずです。

ReactとVueって何が違うの？

まずは基本的な違いを理解しましょう。 どちらも素晴らしいフレームワークですが、特徴が大きく異なります。

Reactの基本的な特徴

Reactは、Facebookが作ったJavaScriptライブラリです。 世界中の大企業で使われています。

Reactの特徴はこちら

• コンポーネントを組み合わせてアプリを作る
• 仮想DOMで高速に動作する
• 自由度が高いが選択肢が多い
• 大規模なプロジェクトに向いている

実際のReactコードを見てみましょう。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h2>カウンター</h2>
      <p>現在の値: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        増加
      </button>
      <button onClick={() => setCount(count - 1)}>
        減少
      </button>
    </div>
  );
}

export default Counter;

このコードは、数字をカウントするシンプルなコンポーネントです。

まず、必要なものをインポートしています。

import React, { useState } from 'react';

useStateは、データの変更を管理するReactの機能です。 これを使うことで、ボタンを押したときに数字が変わります。

次に、データの管理部分を見てみましょう。

const [count, setCount] = useState(0);

countが現在の数字、setCountが数字を変更する関数です。 最初の値として0を設定しています。

ボタンをクリックしたときの処理はこうなります。

<button onClick={() => setCount(count + 1)}>
  増加
</button>

クリックすると、count + 1の結果でcountを更新します。 これで数字が1つ増えるんですね。

Reactの良いところ

• 大手企業で広く使われている
• 求人数が圧倒的に多い
• 高年収が期待できる
• React Nativeでスマホアプリも作れる

Reactの大変なところ

• 最初の学習が少し難しい
• 設定やツール選びが複雑
• 覚えることが多い

Vueの基本的な特徴

Vueは、学びやすさを重視して作られたフレームワークです。 日本でも人気が高まっています。

Vueの特徴はこちら

• HTMLに近い書き方ができる
• 段階的に導入しやすい
• 公式ツールが充実している
• 中小規模のプロジェクトに最適

実際のVueコードを見てみましょう。

<template>
  <div>
    <h2>カウンター</h2>
    <p>現在の値: {{ count }}</p>
    <button @click="increment">増加</button>
    <button @click="decrement">減少</button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};
</script>

<style scoped>
button {
  margin: 0 5px;
  padding: 5px 10px;
}
</style>

同じカウンターをVueで作ったものです。 HTMLに近い書き方で、とても読みやすいですよね。

まず、見た目の部分（テンプレート）から。

<template>
  <div>
    <h2>カウンター</h2>
    <p>現在の値: {{ count }}</p>
    <button @click="increment">増加</button>
  </div>
</template>

{{ count }}でデータを表示します。 @click="increment"でクリック時の処理を指定します。

データの管理はこちら。

<script>
export default {
  data() {
    return {
      count: 0
    };
  }
};
</script>

data()の中で使用するデータを定義します。 シンプルで分かりやすいですね。

ボタンがクリックされたときの処理はこちら。

methods: {
  increment() {
    this.count++;
  }
}

this.count++で数字を1つ増やします。 JavaScriptの基本的な書き方そのままです。

Vueの良いところ

• 学習しやすい
• HTMLの知識が活かせる
• 日本語の情報が豊富
• 設定が簡単

Vueの大変なところ

• Reactより求人数が少ない
• 大規模開発の事例が少ない

簡単にまとめると、こんな感じです。 Reactは強力だけど複雑、Vueは優しくて分かりやすい。 どちらも優秀なので、目標に合わせて選ぶことが大切ですね。

学習のしやすさを比較してみよう

初心者にとって一番気になるのが、どちらが学びやすいかですよね。 詳しく比較してみましょう。

学習にかかる時間

基本的なアプリが作れるようになるまでの目安時間です。

Vueの方が明らかに学習しやすいですね。

React学習で困ること

Reactを学ぶとき、初心者がよく困るポイントがあります。

よくある困りポイント

• JSXという独特な書き方に慣れない
• Hookという概念が理解しにくい
• ツールの設定が複雑すぎる
• エラーメッセージが分からない

実際のReactコードで、初心者が混乱しやすい部分を見てみましょう。

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');
  
  const addTodo = useCallback(() => {
    setTodos(prev => [...prev, { id: Date.now(), text: inputValue }]);
    setInputValue('');
  }, [inputValue]);
  
  return (
    <div>
      <input 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>追加</button>
      {todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </div>
  );
}

このコードは、ToDoリストを作るものです。 でも、初心者には理解が難しい要素がたくさんありますね。

まず、状態管理の部分。

const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');

これは「配列の分割代入」という書き方です。 JavaScript ES6の知識が必要になります。

次に、この部分。

const addTodo = useCallback(() => {
  setTodos(prev => [...prev, { id: Date.now(), text: inputValue }]);
}, [inputValue]);

useCallback、アロー関数、スプレッド演算子... 一度に覚えることが多すぎますよね。

Vue学習で理解しやすいポイント

一方、Vueは初心者に優しい設計になっています。

理解しやすいポイント

• HTMLとほぼ同じ書き方
• データとメソッドが分かれている
• エラーメッセージが親切
• 公式ツールで簡単にプロジェクト作成

同じToDoリストをVueで作ってみましょう。

<template>
  <div>
    <input v-model="inputValue" />
    <button @click="addTodo">追加</button>
    <div v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      inputValue: ''
    };
  },
  methods: {
    addTodo() {
      this.todos.push({
        id: Date.now(),
        text: this.inputValue
      });
      this.inputValue = '';
    }
  }
};
</script>

同じ機能なのに、こんなに分かりやすくなりました。

テンプレート部分を見てみましょう。

<input v-model="inputValue" />
<button @click="addTodo">追加</button>

v-modelで入力値とデータを連動させます。 @clickでクリック時の処理を指定します。 HTMLを知っていれば、すぐに理解できますね。

データの定義も直感的です。

data() {
  return {
    todos: [],
    inputValue: ''
  };
}

使いたいデータをdata()に書くだけ。 シンプルで分かりやすいですよね。

メソッドの定義も簡単。

methods: {
  addTodo() {
    this.todos.push({
      id: Date.now(),
      text: this.inputValue
    });
    this.inputValue = '';
  }
}

普通のJavaScriptの書き方とほぼ同じです。 this.todos.push()でデータを追加するだけ。

学習リソースの充実度

勉強するときの教材の豊富さも重要ですね。

React学習リソース

• 公式ドキュメントが詳しい
• オンライン教材が豊富
• 書籍もたくさんある
• YouTube動画も多数

Vue学習リソース

• 公式ガイドが超分かりやすい
• 日本語ドキュメントの質が高い
• 段階的な学習コースがある
• コミュニティサポートが手厚い

特にVueの公式ガイドは、初心者への配慮が素晴らしいです。 段階的に学べるように工夫されているんです。

このように、学習のしやすさではVueが圧倒的に有利です。 特にHTMLとCSSの知識があれば、Vueはスムーズに学べるでしょう。

就職・転職での需要を比較

技術を学ぶとき、就職や転職での需要は気になりますよね。 現実的な市場価値を詳しく見てみましょう。

求人数の現実

2025年現在の求人市場を調べてみました。

数字を見ると、Reactの圧勝ですね。

React求人の特徴

• スタートアップから大企業まで幅広い
• 新規プロジェクトでよく選ばれる
• React Nativeができると更に有利
• 上級エンジニアの需要が特に高い

Vue求人の特徴

• 中小企業での採用が中心
• 既存システムの改善案件
• 自社サービス開発での採用
• 初心者〜中級者の需要が多い

実際に採用している企業

どんな企業が使っているか見てみましょう。

Reactを使っている有名企業

• Facebook（開発元）
• Netflix
• Instagram
• Uber
• メルカリ
• リクルート
• サイバーエージェント

Vueを使っている有名企業

• Adobe
• BMW
• GitLab
• Laravel Nova
• LINE（一部のプロジェクト）
• DMM.com
• クックパッド（一部のプロジェクト）

企業規模別の採用傾向をまとめてみました。

const adoptionTrends = {
  startup: {
    react: "高い - 開発速度と拡張性を重視",
    vue: "中程度 - 学習コストの低さを重視"
  },
  
  mediumCompany: {
    react: "高い - エンジニア採用の観点から",
    vue: "高い - 開発効率と保守性を重視"
  },
  
  largeCompany: {
    react: "非常に高い - 大規模開発に適している",
    vue: "中程度 - 特定のプロジェクトで採用"
  }
};

大企業ほどReact採用率が高いのが分かりますね。

キャリアパスの違い

それぞれを学んだ場合の将来的な道筋を考えてみましょう。

Reactエンジニアのキャリア例

const reactCareerPath = {
  junior: {
    skills: ["React基礎", "JavaScript ES6+", "CSS"],
    salary: "300-450万円",
    opportunities: "多数のエントリーレベル求人"
  },
  
  mid: {
    skills: ["React Hooks", "Redux/Zustand", "TypeScript"],
    salary: "450-650万円", 
    opportunities: "幅広い企業での開発ポジション"
  },
  
  senior: {
    skills: ["アーキテクチャ設計", "Next.js", "React Native"],
    salary: "650-1000万円",
    opportunities: "テックリード、シニアエンジニア"
  },
  
  expert: {
    skills: ["技術選定", "チーム管理", "パフォーマンス最適化"],
    salary: "1000万円以上",
    opportunities: "CTO、フリーランス、コンサルタント"
  }
};

これは一般的なReactエンジニアの成長パターンです。

初心者レベルでは基本的なReactとJavaScriptを学びます。 中級者になるとHooksやTypeScriptを習得。 上級者ではアーキテクチャ設計ができるようになります。

Vueエンジニアのキャリア例

const vueCareerPath = {
  junior: {
    skills: ["Vue基礎", "JavaScript", "HTML/CSS"],
    salary: "280-400万円",
    opportunities: "中小企業、自社サービス開発"
  },
  
  mid: {
    skills: ["Vuex/Pinia", "Vue Router", "Composition API"],
    salary: "400-600万円",
    opportunities: "自社サービス、受託開発"
  },
  
  senior: {
    skills: ["Nuxt.js", "TypeScript", "フルスタック開発"],
    salary: "600-800万円",
    opportunities: "リードエンジニア、フルスタック"
  },
  
  expert: {
    skills: ["技術選定", "Vue.js生態系", "チーム管理"],
    salary: "800万円以上",
    opportunities: "専門性を活かしたポジション"
  }
};

Vueエンジニアの特徴は、フルスタック指向が強いことです。

初心者から始めやすく、段階的にスキルアップできます。 ただし、最高年収はReactより低めになりがちです。

転職活動での実際の状況

現実的な転職活動を考えてみましょう。

React学習者の転職活動

• 求人数が多いので選択肢が豊富
• 大手企業への挑戦チャンスが多い
• 海外転職も視野に入る
• ただし競合も多いので差別化が重要

Vue学習者の転職活動

• 求人数は少ないが競合も少ない
• 中小企業で重宝される存在になれる
• 学習コストの低さをアピールできる
• ReactとのW学習で差別化可能

このように、就職・転職市場ではReactが圧倒的に有利です。 特に大手企業や高年収を目指すなら、Reactの習得がおすすめですね。

プロジェクト規模に応じた使い分け

ReactとVueは、それぞれ得意なプロジェクト規模があります。 具体的にどんな場面で使われるか見てみましょう。

小規模プロジェクトでの比較

個人開発や小さなWebサイトでの使いやすさを比較します。

小規模プロジェクトでのVueの優位性

簡単なブログサイトを作る例を見てみましょう。

<template>
  <div class="blog-post">
    <h2>{{ post.title }}</h2>
    <p class="meta">{{ formatDate(post.date) }}</p>
    <div class="content" v-html="post.content"></div>
    <div class="tags">
      <span v-for="tag in post.tags" :key="tag" class="tag">
        {{ tag }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['post'],
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleDateString('ja-JP');
    }
  }
};
</script>

<style scoped>
.blog-post {
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.tag {
  background: #f0f0f0;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}
</style>

このコードは、ブログ記事を表示するコンポーネントです。 1つのファイルにテンプレート、ロジック、スタイルがまとまっています。

テンプレート部分を見てみましょう。

<h2>{{ post.title }}</h2>
<p class="meta">{{ formatDate(post.date) }}</p>

{{ post.title }}で記事タイトルを表示。 formatDate(post.date)で日付を整形しています。 HTMLと同じような書き方で、とても直感的ですね。

繰り返し処理も簡単です。

<span v-for="tag in post.tags" :key="tag" class="tag">
  {{ tag }}
</span>

v-forでタグの一覧を表示しています。 JavaScriptのforループと似ているので理解しやすいです。

小規模プロジェクトでのReactの記述

同じブログサイトをReactで作ってみましょう。

import React from 'react';
import styled from 'styled-components';

const BlogPostContainer = styled.div`
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
`;

const Tag = styled.span`
  background: #f0f0f0;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
`;

function BlogPost({ post }) {
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString('ja-JP');
  };
  
  return (
    <BlogPostContainer>
      <h2>{post.title}</h2>
      <p className="meta">{formatDate(post.date)}</p>
      <div 
        className="content" 
        dangerouslySetInnerHTML={{ __html: post.content }}
      />
      <div className="tags">
        {post.tags.map(tag => (
          <Tag key={tag}>{tag}</Tag>
        ))}
      </div>
    </BlogPostContainer>
  );
}

export default BlogPost;

同じ機能ですが、Reactの方が複雑になっています。

まず、スタイルの定義。

const BlogPostContainer = styled.div`
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
`;

styled-componentsという外部ライブラリを使っています。 小規模プロジェクトには少し重装備かもしれませんね。

繰り返し処理の部分。

{post.tags.map(tag => (
  <Tag key={tag}>{tag}</Tag>
))}

JavaScriptのmapメソッドを使っています。 配列操作の知識が必要になります。

小規模プロジェクトでの比較結果

小規模プロジェクトでは、Vueが圧倒的に有利ですね。

中規模プロジェクトでの比較

企業でのチーム開発レベルでの比較を見てみましょう。

中規模プロジェクトでの状態管理

ユーザー管理機能を例に、状態管理を比較してみます。

まず、Vue + Piniaでの状態管理。

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    currentUser: null,
    loading: false
  }),
  
  getters: {
    activeUsers: (state) => state.users.filter(user => user.active),
    userCount: (state) => state.users.length
  },
  
  actions: {
    async fetchUsers() {
      this.loading = true;
      try {
        const response = await api.getUsers();
        this.users = response.data;
      } catch (error) {
        console.error('Failed to fetch users:', error);
      } finally {
        this.loading = false;
      }
    },
    
    setCurrentUser(user) {
      this.currentUser = user;
    }
  }
});

この状態管理ストアは、ユーザー情報を管理しています。

stateでデータを定義。

state: () => ({
  users: [],
  currentUser: null,
  loading: false
})

使用するデータを分かりやすく定義しています。

gettersで計算済みの値を取得。

getters: {
  activeUsers: (state) => state.users.filter(user => user.active)
}

アクティブなユーザーだけを抽出する処理です。

actionsで非同期処理を定義。

async fetchUsers() {
  this.loading = true;
  try {
    const response = await api.getUsers();
    this.users = response.data;
  } finally {
    this.loading = false;
  }
}

APIからユーザーデータを取得する処理です。 エラーハンドリングも含まれています。

次に、React + Zustandでの状態管理。

import { create } from 'zustand';

const useUserStore = create((set, get) => ({
  users: [],
  currentUser: null,
  loading: false,
  
  fetchUsers: async () => {
    set({ loading: true });
    try {
      const response = await api.getUsers();
      set({ users: response.data, loading: false });
    } catch (error) {
      console.error('Failed to fetch users:', error);
      set({ loading: false });
    }
  },
  
  setCurrentUser: (user) => set({ currentUser: user }),
  
  get activeUsers() {
    return get().users.filter(user => user.active);
  },
  
  get userCount() {
    return get().users.length;
  }
}));

Reactの状態管理も分かりやすくなっています。

状態の更新はset関数を使います。

set({ loading: true });

計算済み値はgetterで定義。

get activeUsers() {
  return get().users.filter(user => user.active);
}

どちらも機能的には同じですが、書き方が異なります。

大規模プロジェクトでの比較

エンタープライズレベルでの開発を比較してみましょう。

大規模プロジェクトでのReactの優位性

複雑なECサイトを例に見てみます。

// Reactの企業レベルアーキテクチャ例
// src/
//   components/           # 再利用可能コンポーネント
//     ui/                # UIプリミティブ
//     forms/             # フォームコンポーネント
//     layout/            # レイアウトコンポーネント
//   pages/               # ページコンポーネント
//   hooks/               # カスタムHooks
//   services/            # API通信
//   store/               # 状態管理
//   utils/               # ユーティリティ
//   types/               # TypeScript型定義

// カスタムHookによる再利用可能なロジック
function useApiData(endpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await api.get(endpoint);
        setData(response.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
  }, [endpoint]);
  
  return { data, loading, error };
}

このカスタムHookは、API通信の共通ロジックを抽出しています。

データ取得のロジックを見てみましょう。

const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

データ、ローディング状態、エラー状態を管理しています。

実際のAPI呼び出し処理。

const fetchData = async () => {
  setLoading(true);
  try {
    const response = await api.get(endpoint);
    setData(response.data);
  } catch (err) {
    setError(err);
  } finally {
    setLoading(false);
  }
};

エラーハンドリングとローディング管理が含まれています。 このHookを使えば、どのコンポーネントでも同じパターンでAPI通信ができます。

大規模プロジェクトでの特徴比較

適用場面の判断基準

プロジェクトに最適なフレームワークを選ぶ基準をまとめます。

Vueを選ぶべき場面

const vueUseCases = {
  projectTypes: [
    "個人ブログ・ポートフォリオサイト",
    "中小企業のコーポレートサイト",
    "社内管理システム",
    "プロトタイプ開発",
    "既存サイトの部分的なモダン化"
  ],
  
  teamCharacteristics: [
    "HTMLメインのデザイナー・マークアップエンジニア",
    "JavaScript初心者が多い",
    "短期間での開発が求められる",
    "保守性を重視する"
  ],
  
  projectConstraints: [
    "開発予算が限られている",
    "学習コストを抑えたい",
    "シンプルな機能で十分",
    "デザイナーとの協業が多い"
  ]
};

Reactを選ぶべき場面

const reactUseCases = {
  projectTypes: [
    "大規模Webアプリケーション",
    "SPA（Single Page Application）",
    "モバイルアプリ（React Native）",
    "複雑な状態管理が必要なアプリ",
    "リアルタイム機能があるアプリ"
  ],
  
  teamCharacteristics: [
    "経験豊富なJavaScriptエンジニア",
    "大規模開発の経験がある",
    "継続的な学習ができる環境",
    "パフォーマンスを重視する"
  ],
  
  projectConstraints: [
    "長期間の保守・拡張予定",
    "多数のエンジニアでの開発",
    "高いパフォーマンスが要求される",
    "最新技術の導入が期待される"
  ]
};

このように、プロジェクトの規模や要件によって最適な選択が変わります。 あなたが作りたいアプリの種類を考えて、フレームワークを選んでくださいね。

効率的な学習ロードマップ

どちらを選んでも、計画的に学習することが大切です。 それぞれの効率的な学習順序をご紹介しますね。

React学習の進め方

Reactを効果的に習得するための段階的なプランです。

Phase 1: 基礎準備（2-4週間）

まずは、Reactを学ぶ前に必要な知識を固めましょう。

// 必要な前提知識の確認
const prerequisites = {
  javascript: [
    "ES6+ 構文（アロー関数、分割代入、スプレッド演算子）",
    "非同期処理（Promise、async/await）",
    "配列メソッド（map, filter, reduce）",
    "オブジェクトの操作"
  ],
  
  tools: [
    "Node.js とnpm/yarn",
    "モダンなテキストエディタ（VS Code推奨）",
    "ブラウザの開発者ツール",
    "Git の基本操作"
  ]
};

JavaScript ES6+の復習例を見てみましょう。

const users = [
  { id: 1, name: "田中", age: 25 },
  { id: 2, name: "佐藤", age: 30 },
  { id: 3, name: "鈴木", age: 22 }
];

// 関数型プログラミングの基礎
const adultUsers = users
  .filter(user => user.age >= 25)
  .map(user => ({ ...user, category: "成人" }));

この例では、配列操作の基本を確認しています。

filterで条件に合うユーザーを抽出。

.filter(user => user.age >= 25)

25歳以上のユーザーだけを選んでいます。

mapで新しいプロパティを追加。

.map(user => ({ ...user, category: "成人" }))

スプレッド演算子...userで既存データをコピーし、categoryを追加しています。

非同期処理の理解も重要です。

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('データ取得エラー:', error);
  }
}

async/awaitでAPI通信を行っています。 エラーハンドリングも含まれていますね。

Phase 2: React基礎（4-6週間）

いよいよReactの基本を学んでいきます。

Week 1-2では、コンポーネントとJSXから始めます。

function Welcome({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="田中" />
      <Welcome name="佐藤" />
    </div>
  );
}

この例では、再利用可能なコンポーネントを作っています。

Welcomeコンポーネントの定義。

function Welcome({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

{ name }でpropsを受け取り、JSXで表示しています。

Week 3-4では、StateとEvent handlingを学びます。

function Counter() {
  const [count, setCount] = useState(0);
  
  const handleIncrement = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleIncrement}>増加</button>
    </div>
  );
}

状態管理の基本パターンです。

状態の定義。

const [count, setCount] = useState(0);

useStateで状態変数とその更新関数を取得します。

イベントハンドラの定義。

const handleIncrement = () => {
  setCount(count + 1);
};

ボタンがクリックされたときの処理を定義しています。

Week 5-6では、Effect Hookとライフサイクルを学びます。

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      try {
        const userData = await fetchUserData(userId);
        setUser(userData);
      } catch (error) {
        console.error('ユーザーデータの取得に失敗:', error);
      } finally {
        setLoading(false);
      }
    }
    
    fetchUser();
  }, [userId]);
  
  if (loading) return <div>読み込み中...</div>;
  if (!user) return <div>ユーザーが見つかりません</div>;
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>年齢: {user.age}歳</p>
    </div>
  );
}

この例では、副作用（API通信）を管理しています。

useEffectの使い方。

useEffect(() => {
  // 副作用の処理
}, [userId]);

第二引数[userId]で、userIdが変わったときだけ実行されます。

ローディング状態の管理。

if (loading) return <div>読み込み中...</div>;
if (!user) return <div>ユーザーが見つかりません</div>;

条件分岐で適切なUIを表示しています。

Phase 3: 中級レベル（6-8週間）

基礎ができたら、より実践的なパターンを学びます。

カスタムHookの作成。

function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }
    
    fetchData();
  }, [url]);
  
  return { data, loading, error };
}

このカスタムHookは、API通信の共通パターンを抽出しています。

再利用可能なロジックとして、どのコンポーネントでも使えます。

Vue学習の進め方

Vueの効率的な学習プランをご紹介します。

Phase 1: 基礎準備（1-2週間）

Vueは前提知識がReactより少なくて済みます。

// Vue学習に必要な前提知識
const vuePrerequisites = {
  html_css: [
    "HTMLの基本タグ",
    "CSSセレクタとプロパティ",
    "レスポンシブデザインの基礎",
    "Flexbox、Grid Layout"
  ],
  
  javascript: [
    "変数、関数、オブジェクト",
    "配列操作の基礎",
    "イベント処理",
    "基本的な非同期処理"
  ]
};

JavaScriptの基礎復習例。

const todoList = {
  items: ['買い物', '掃除', '勉強'],
  
  addItem(item) {
    this.items.push(item);
  },
  
  removeItem(index) {
    this.items.splice(index, 1);
  },
  
  getActiveItems() {
    return this.items.filter(item => item !== '');
  }
};

オブジェクトのメソッド定義と配列操作が分かれば十分です。

Phase 2: Vue基礎（3-4週間）

Week 1では、テンプレート記法とデータバインディングを学びます。

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
    <input v-model="inputText" placeholder="テキストを入力">
    <p>入力内容: {{ inputText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js学習',
      message: 'テンプレート記法を学習中',
      inputText: ''
    };
  }
};
</script>

このコードでは、データバインディングの基本を学べます。

データの表示。

<h2>{{ title }}</h2>
<p>{{ message }}</p>

{{ }}でデータを画面に表示しています。

双方向バインディング。

<input v-model="inputText" placeholder="テキストを入力">
<p>入力内容: {{ inputText }}</p>

v-modelで入力値とデータを同期させています。 入力すると即座に下の文字が変わりますね。

Week 2-3では、ディレクティブとイベント処理を学びます。

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input 
          type="checkbox" 
          v-model="todo.completed"
          @change="updateTodo(todo)"
        >
        <span :class="{ completed: todo.completed }">
          {{ todo.text }}
        </span>
        <button @click="removeTodo(todo.id)">削除</button>
      </li>
    </ul>
    
    <form @submit.prevent="addTodo">
      <input v-model="newTodoText" placeholder="新しいタスク">
      <button type="submit">追加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: '買い物', completed: false },
        { id: 2, text: '掃除', completed: true }
      ],
      newTodoText: ''
    };
  },
  
  methods: {
    addTodo() {
      if (this.newTodoText.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodoText,
          completed: false
        });
        this.newTodoText = '';
      }
    },
    
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    },
    
    updateTodo(todo) {
      console.log('Todo updated:', todo);
    }
  }
};
</script>

<style scoped>
.completed {
  text-decoration: line-through;
  color: #999;
}
</style>

このToDoアプリで、Vueの主要機能を学べます。

繰り返し処理。

<li v-for="todo in todos" :key="todo.id">

v-forで配列の要素を繰り返し表示しています。

イベント処理。

<button @click="removeTodo(todo.id)">削除</button>

@clickでクリックイベントを処理しています。

条件付きクラス。

<span :class="{ completed: todo.completed }">

完了したタスクにはcompletedクラスを付けています。

共通の学習ポイント

どちらのフレームワークでも大切なことがあります。

実践プロジェクトの重要性

理論だけでなく、実際にアプリを作ることが重要です。

// 段階的なプロジェクト例
const learningProjects = {
  beginner: [
    "TodoListアプリ",
    "電卓アプリ", 
    "天気予報アプリ",
    "簡単なブログ"
  ],
  
  intermediate: [
    "ユーザー認証機能付きアプリ",
    "ECサイト（簡易版）",
    "チャットアプリ",
    "ダッシュボードアプリ"
  ],
  
  advanced: [
    "リアルタイム機能付きアプリ",
    "PWA（Progressive Web App）",
    "マルチページアプリケーション",
    "エンタープライズレベルアプリ"
  ]
};

このような順序で少しずつ難しいプロジェクトに挑戦してください。

最初は簡単なToDoアプリから始めて、徐々に機能を追加していくのがおすすめです。 実際にアプリを完成させることで、確実にスキルが身につきますよ。

大切なのは、理論学習と実践プロジェクトのバランスを保つことです。 本を読むだけでなく、手を動かして覚えていきましょう。

結論：あなたにピッタリの選択は？

ここまでの比較を踏まえて、最終的な選択の指針をお伝えしますね。 あなたの状況と目標に合わせて判断してください。

Reactを選ぶべき人の特徴

以下の条件に多く当てはまるなら、Reactがおすすめです。

キャリア重視派

• 大手企業で働きたい
• 高年収を目指している（600万円以上）
• 海外転職も視野に入れている
• 将来的にフリーランスも考えている
• React Nativeでスマホアプリも作りたい

学習環境が整っている人

• JavaScriptの基礎がしっかりしている
• ES6+の機能を理解している
• 学習に十分な時間を確保できる（週10時間以上）
• 複雑な概念を学ぶことに抵抗がない
• 英語の技術情報も読める

取り組みたいプロジェクト

• 大規模Webアプリケーション
• 複雑な状態管理が必要なアプリ
• 高いパフォーマンスが要求される
• 長期間の保守・拡張予定
• チーム開発での経験を積みたい

Reactが適している開発例を見てみましょう。

function ECommerceApp() {
  // 複雑な状態管理
  const [products, setProducts] = useState([]);
  const [cart, setCart] = useState([]);
  const [user, setUser] = useState(null);
  const [orders, setOrders] = useState([]);
  
  // 高度なHook活用
  const filteredProducts = useMemo(() => {
    return products.filter(product => 
      product.category === selectedCategory &&
      product.price >= minPrice &&
      product.price <= maxPrice
    );
  }, [products, selectedCategory, minPrice, maxPrice]);
  
  return (
    <Router>
      <Routes>
        <Route path="/" element={<ProductList />} />
        <Route path="/cart" element={<ShoppingCart />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route path="/orders" element={<OrderHistory />} />
      </Routes>
    </Router>
  );
}

このようなECサイトレベルの複雑なアプリケーションでは、Reactの力が発揮されます。

Vueを選ぶべき人の特徴

以下の条件に当てはまるなら、Vueがおすすめです。

効率重視派

• 早く実用的なアプリを作りたい
• 中小企業や自社サービス開発に興味がある
• デザイナーとの協業が多い
• 学習コストを抑えたい
• フリーランスでの活動を考えている

学習環境

• HTML/CSSの経験が豊富
• JavaScriptは基礎レベル
• 学習時間に制限がある（週5時間程度）
• 段階的な学習を好む
• 日本語の学習リソースを重視する

取り組みたいプロジェクト

• 中小規模のWebアプリケーション
• 既存サイトの段階的なモダン化
• プロトタイプやMVP開発
• シンプルで保守しやすいアプリ

Vueが適している開発例を見てみましょう。

<template>
  <div class="company-website">
    <Header :navigation="navigation" />
    
    <main>
      <HeroSection :content="heroContent" />
      
      <ServicesSection>
        <ServiceCard 
          v-for="service in services"
          :key="service.id"
          :service="service"
          @contact-request="handleContactRequest"
        />
      </ServicesSection>
      
      <ContactForm 
        v-if="showContactForm"
        @form-submitted="handleFormSubmission"
      />
    </main>
    
    <Footer :links="footerLinks" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      navigation: [
        { name: 'ホーム', path: '/' },
        { name: 'サービス', path: '/services' },
        { name: 'お問い合わせ', path: '/contact' }
      ],
      services: [],
      showContactForm: false
    };
  },
  
  async created() {
    this.services = await this.fetchServices();
  },
  
  methods: {
    async fetchServices() {
      const response = await fetch('/api/services');
      return response.json();
    },
    
    handleContactRequest(service) {
      this.selectedService = service;
      this.showContactForm = true;
    }
  }
};
</script>

このような企業サイトレベルでは、Vueの分かりやすさが活かされます。

迷った場合の判断方法

どちらを選ぶか迷ったときは、この質問に答えてみてください。

キャリア重視度チェック

1. 転職・就職での選択肢の多さを重視しますか？

   • はい → React +5点
   • いいえ → Vue +2点

2. 高年収を目指していますか？

   • はい → React +4点
   • いいえ → Vue +3点

3. 大手企業での勤務を希望しますか？

   • はい → React +5点
   • いいえ → Vue +2点

4. 海外での就職も視野に入れていますか？

   • はい → React +5点
   • いいえ → Vue +1点

学習スタイルチェック

1. 学習時間を十分確保できますか？（週10時間以上）

   • はい → React +4点
   • いいえ → Vue +2点

2. 複雑な概念の習得に抵抗がありませんか？

   • はい → React +5点
   • いいえ → Vue +2点

3. JavaScriptの知識に自信がありますか？

   • はい → React +4点
   • いいえ → Vue +1点

4. 早く実用的なアプリを作りたいですか？

   • はい → Vue +5点
   • いいえ → React +2点

点数を計算して、高い方があなたに向いているフレームワークです。

最終的なおすすめ

初心者の多くにおすすめ：Vue.js

• 学習コストが低く、早く成果を実感できる
• HTML/CSSの知識を活かせる
• 日本語リソースが充実している
• 段階的にスキルアップ可能

キャリア重視の場合：React

• 就職・転職での圧倒的な有利さ
• 高年収の可能性
• 大規模開発での経験
• 将来的な発展性

理想的な学習戦略

実は、多くの現場で両方のフレームワークが使われています。 可能であれば、この順序での学習がおすすめです。

1. Vue.jsで基礎を固める（2-3ヶ月）

   • フロントエンド開発の基本を学ぶ
   • コンポーネント思考に慣れる
   • 実際のアプリを完成させる

2. 実際のプロジェクトを完成させる（1ヶ月）

   • ポートフォリオを作成
   • 実務レベルの経験を積む

3. Reactの学習に移行（2-3ヶ月）

   • Vueで学んだ概念を活かす
   • より高度なパターンを習得

4. 両方のスキルでキャリアを広げる

   • 求人の選択肢を最大化
   • 市場価値の高いエンジニアを目指す

このアプローチなら、効率的にスキルアップできます。 まずはVueで成功体験を積んで、その後Reactで市場価値を高める戦略ですね。

最終的には、あなたの目標と状況に最も適した選択をしてください。 どちらを選んでも、継続的な学習と実践が成功の鍵です。

ぜひ、フロントエンド開発の世界を楽しんでくださいね！