📋

React VS Next.js / Vue.js VS Nuxt.js のルーティング比較

2024/03/20に公開

JavaScript

React.jsとVue.jsは、それぞれの魅力と機能性の高さにより、開発者コミュニティ内で高い評価を受けているフレームワークです。
しかしこれらのフレームワーク間での移行は、時にルーティングの違いにより、混乱やバグを招く場合があります。
Vue.jsに慣れ親しんだ開発者がReact.jsに触れた時、またはその逆の場合には、
ルーティングの構文やパラダイムの違いにより、時間を取られることがあります。

さらに、これらのフレームワークはそれぞれ、Vue.jsのためのNuxt.js、
React.jsのためのNext.jsという特化したフレームワークがあるため、
これらの間の移行でも同様にトラブルが発生する可能性があるかもしれません。

本記事では、フレームワーク間の移行作業や新規学習者が混乱ルーティングの実装で混乱することを防ぐために、
そして何より私自身の備忘録のために、
React.jsとNext.js、Vue.jsとNuxt.jsのルーティングの違いについての早見表をまとめたいと思います。

言葉の定義

Programmatic Navigation : コード内でページ遷移を行う方法。JavaScriptを使用して動的にルートを変更する。
Declarative Navigation : JSX内またはテンプレートの中で直接ページ遷移を指定する方法。

※ Vue RouterおよびReact Routerの公式ドキュメントにおける言葉の用法を参照に、本記事で用いる定義を設けました(参考)。

React.js VS Next.js

比較表

	React.js	Next.js
Programmatic Navigation	・`useNavigate()` hookを利用する・`react-router-dom`の `createXXXRouter`で設定が必要	`useRouter()` hookを利用する・`pages`ディレクトリにコンポーネントを定義
Declarative Navigation	`<Link>` from `react-router-dom`	`<Link>` from `next/link`

注意

※ クラスコンポーネントではなく、関数コンポーネントの中でreact hooksを使うことを前提としています。
react-router-dom はversion6以降を前提としています。
※ next.jsの場合、pagesディレクトリにコンポーネントを定義することを前提としています(Next.js v13以降はappディレクトリ)。
Programmatic Navigation / Declarative Navigation共に、代替となる方法がいくつか存在しますが、本記事ではその中でも一般的と思われる方法を記載しています。

例

React.js

import { useNavigate } from 'react-router-dom';

function Page() {
  // useNavigateフックを使ってnavigate関数を取得
  const navigate = useNavigate();

  // ホームページに遷移する関数
  function goToHome() {
    navigate('/');  // パスを指定して遷移
  }

  // ボタンクリックでgoToHomeを実行
  return <button onClick={goToHome}>Go to Home</button>;
}

Next.js

import { useRouter } from 'next/router';

function Page() {
  // useRouterフックを使ってrouterオブジェクトを取得
  const router = useRouter();

  // ホームページに遷移する関数
  function goToHome() {
    router.push('/');  // パスを指定して遷移。pushメソッドを呼び出すことに注意
  }

  // ボタンクリックでgoToHomeを実行
  return <button onClick={goToHome}>Go to Home</button>;
}

単なるrouterではなくrouter.pushを呼び出すことに注意してください。

React.js

import { Link } from 'react-router-dom';

function Page() {
  return (
    <nav>
      <Link to="/">Home</Link>
    </nav>
  );
}

Linkエレメントにて遷移先を指定するプロパティはtoであることにご注意ください。

Next.js

import Link from 'next/link';

function Page() {
  return (
    <nav>
      <Link href="/">Home</Link>
    </nav>
  );
}

Linkエレメントにて遷移先を指定するプロパティはhrefであることにご注意ください。

各種参考リンク

Vue.js VS Nuxt.js

	Vue.js	Nuxt.js
Programmatic Navigation	・`this.$router.push()` ・`router/index.js`内で設定	・`this.$router.push()` 　・`pages`ディレクトリにコンポーネントを定義
Declarative Navigation	`<router-link>`	`<NuxtLink>`

注意

※ Vueは2系を前提としております。Composition APIの仕様については別の記事をご参照ください(参考)。

例

コードとしてはほぼ同じですが、
Vue.jsの場合はrouter/index.js内で設定を行い、
Nuxt.jsの場合はpagesディレクトリにコンポーネントを定義することが必要です。

Vue.js

<template>
  <button @click="goToHome">
    Home
  </button>
</template>

<script>
  export default {
    methods: {
      goToHome() {
        this.$router.push('/');
      }
    }
  }
</script>

Nuxt.js

<template>
  <button @click="goToHome">
    Home
  </button>
</template>

<script>
  export default {
    methods: {
      goToHome() {
        this.$router.push('/');
      }
    }
  }
</script>

Vue.js

<template>
  <nav>
    <router-link to="/">Home</router-link>
  </nav>
</template>

<router-link> はVue Routerがプロジェクトに組み込まれていれば、import不要です。

Nuxt.js

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
  </nav>
</template>

<NuxtLink>もはNuxtに含まれているため、
<router-link>と同様に、他のコンポーネントと一緒にimportする必要はありません。
便利ですね！

各種参考リンク

結び

ルーティングはフロントエンド開発の核心的な部分です。
新しいフレームワークを学ぶ際に良いスタートダッシュを切るため、
もしくは様々な案件を経験する中で生じるフレームワークの違いによる混乱を避けるためにも、
本記事がだれかのために役立つことを願っています。

GitHubで編集を提案

React VS Next.js / Vue.js VS Nuxt.js のルーティング比較

言葉の定義

React.js VS Next.js

比較表

例

Programmatic Navigation

React.js

Next.js

Declarative Navigation

React.js

Next.js

各種参考リンク

Vue.js VS Nuxt.js

例

Programmatic Navigation

Vue.js

Nuxt.js

Declaration Navigation

Vue.js

Nuxt.js

各種参考リンク

結び

Discussion