Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

複数のページを切り替える、Nuxt.jsのルーティング機能を学ぼう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第3回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webページのユーザーインタフェース(UI)フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はVue.jsの基本的な利用方法を説明しました。今回は複数のページを切り替えるNuxt.jsのルーティング機能を解説します。

目次

はじめに

 Nuxt.jsは、Webページのユーザーインタフェース(UI)フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。

 UIフレームワークを利用したWebページでは、複数のページをURLに関連付けて切り替える「ルーティング」の機能が必要になります。Nuxt.jsでは、内部的にVue.js公式のルーティングライブラリー「Vue Router」を利用しつつ、より直感的にルーティングを実装できる機能を提供しています。

 本記事では、Nuxt.jsのルーティング機能を、サンプルを挙げて説明していきます。

対象読者

  • Nuxt.jsで複数ページを切り替えるWebページを作りたい方
  • Vue.jsのルーティングをよりシンプルに利用したい方
  • Webページの画面切り替えにアニメーション効果を入れたい方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版 
    • Node.js v10.16.3 64bit版
    • Nuxt.js 2.10.1
    • Vue.js 2.6.10
    • Microsoft Edge 44.18362.387.0

 サンプルコードは、Nuxt.jsのCLIツール(create-nuxt-app)で生成したプロジェクトを元に実装しています。CLIツールの利用法やプロジェクト構成などの詳細は、連載第1回の記事を参照してください。

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。

ルーティングの基礎

 Nuxt.jsの基本的なルーティングを、図1のサンプルで説明します。このサンプルでは、異なるURLが設定された3つのリンクをクリックすると、それぞれに対応するページを切り替えて表示します。

図1:基本的なルーティングのサンプル(p001-basic)
図1:基本的なルーティングのサンプル(p001-basic)

 Nuxt.jsでは、pagesフォルダー配下の*.vueファイルの配置が、そのまま各ページのパスになります。例えば、pages/Apple.vueのパスは「/Apple」、pages/Android/Samsung.vueのパスは「/Android/Samsung」となります。

図2:pagesフォルダー配下の配置と各ページのパス(p001-basic)
図2:pagesフォルダー配下の配置と各ページのパス(p001-basic)

 なお、別ページに遷移するリンクは、リスト1の通り<nuxt-link>タグで記述します。タグのto属性に、ページのパスを設定します。

[リスト1]別ページに遷移するリンクの記述(p001-basic/pages/index.vue)
<nuxt-link to="/Apple">Apple</nuxt-link>
<nuxt-link to="/Android/Samsung">Samsung</nuxt-link>
<nuxt-link to="/Android/SHARP">SHARP</nuxt-link>

[補足]内部的に生成されるVue Routerの設定ファイル

 Nuxt.jsでは、Vue.jsのルーティングライブラリー「Vue Router」を内部的に利用しています。Vue Routerでは開発者がルーティングの設定を記述しますが、Nuxt.jsでは*.vueファイルの配置からVue Routerの設定を自動的に生成するため、開発者は設定を記述せずにルーティングを利用できます。

 Vue Routerの詳細については、公式ページも参照してください。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5