CodeZine(コードジン)

特集ページ一覧

「Nuxt 3」の新機能を体験してみよう――環境作成からVue 3の新機能活用・Nuxt Bridgeの利用方法まで

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

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

 本連載では、Webページのユーザーインタフェース(UI)構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。初回となる今回は、Nuxt 3の内容と現状を説明するとともに、Nuxt 3のプロジェクトを生成して動作を確認します。また、前バージョン「Nuxt 2」のプロジェクトにNuxt 3の機能を導入する「Nuxt Bridge」の利用法を説明します。

目次

はじめに

 Nuxt.jsは、Webページのユーザーインタフェース(UI)を構築できるVue.jsとともに、さまざまな追加機能をまとめて提供するフレームワークです。Nuxt.jsの現在の安定版はバージョン2(Nuxt 2)ですが、次期バージョンとなる「Nuxt 3」が開発中で、記事執筆時点ではベータ版が提供されています。

Nuxt 3の公式ページ(https://v3.nuxtjs.org/)

図1 Nuxt 3の公式ページ

 本連載では、Nuxt 3の新機能を中心に、サンプルを交えてNuxt 3の活用方法を説明していきます。初回となる本記事では、Nuxt 3の主な変更点を説明するとともに、Nuxt 3のプロジェクトを生成して動作させ、簡単な実装を行います。また、従来のNuxt 2で作られたプロジェクトにNuxt 3の機能を導入する「Nuxt Bridge」を適用する方法も紹介します。

対象読者

  • Nuxt.jsでVue.jsの最新機能を使いたい方
  • 従来のNuxt.jsで作成したプロジェクトを利用している方
  • これを機会に最新のNuxt.jsの利用法を学びたい方

必要な環境

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

  • Windows 10 64bit版
    • Node.js 16.13.1 64bit版
    • Nuxt.js(Nuxt 3) 3.0.0(ベータ版)
    • Nuxt.js(Nuxt 2) 2.15.8
    • Microsoft Edge 96.0.1054.62

 サンプルコードはNuxt 3またはNuxt 2のCLIツールで生成したものです(詳細は後述)。サンプルコードを開発モードで実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。

Nuxt 3で新しくなるポイント

 まず、Nuxt 3の主な変更点について、以下で説明します。

Vue.jsがVue 3にアップデート

 Nuxt.jsでは、WebページのUI構築にVue.jsを利用します。Nuxt 2では標準でVue.jsのバージョン2(Vue 2)を利用していましたが、Nuxt 3ではVue.jsの最新版となるバージョン3(Vue 3)を利用します。

Vue 3の公式ページ(https://v3.vuejs.org/)

図2 Vue 3の公式ページ

 そのため、Nuxt 3では、コンポーネントの新しい記述方法であるComposition APIや、コンポーネント表示を遅延させるSuspenseといった、Vue 3の新機能を活用できます。Composition APIについては過去記事1、それ以外のVue 3新機能については過去記事2も参考にしてください。

TypeScript、ES Moduleへの対応

 TypeScriptは、JavaScriptでデータの型を利用できる拡張言語で、コンパイルしてJavaScriptにする、いわゆるAltJSの一つです。最近のJavaScriptフレームワークではTypeScriptの利用が広がっており、Vue.jsもVue 3自体がTypeScriptで開発されています。この流れを受けて、Nuxt 3でもTypeScriptが標準でサポートされます。あわせて、モジュールを作成・参照する際に、標準で定義されたECMAScript Module(ES Module)を利用するようになりました。

より高速に動作するバンドラーであるViteやサーバーエンジンのNitro

 実行時にJavaScriptコードをまとめるバンドラーには、従来利用されていたwebpackの他に、高速動作を特徴とするViteが選択できるようになりました。また、サーバーエンジンには、より高速・軽量で、Nuxt内部でのAPI作成にも対応したNitroを利用します。なお、Viteについてはこちらの過去記事も参照してください。

Nuxt 3の開発をサポートする新しいCLIツール

 Nuxt 2で利用されていた「create-nuxt-app」に代わり、Nuxt 3では「nuxi」CLIツールが提供されます。nuxiでは、Nuxt 3プロジェクトの新規作成や実行などが行えます。

Nuxt 2のプロジェクトでNuxt 3の新機能が利用できるNuxt Bridge

 Nuxt 3では多くの機能追加が行われ、従来のNuxt 2との差異が大きいです。そのため、Nuxt 2で作成されたプロジェクトを直接的にNuxt 3にアップグレードする代わりに、Nuxt 2のプロジェクトにNuxt 3の機能(の一部)を追加できる「Nuxt Bridge」が提供されます。Nuxt Bridgeを利用すると、Nuxt 2プロジェクトのコードを大幅に修正することなく、Nuxt 3の機能が利用できます。ただし、Nuxt Bridgeを適用したNuxt 2プロジェクトは、Nuxt 3のプロジェクトと完全に同一になるわけではない点に注意が必要です。公式ドキュメントでの比較(下図)では、例えばTypeScriptやCompositon API、Viteなどのサポートが一部限定的であることがわかります。

Nuxt 2、Nuxt Bridge、Nuxt 3の違い(公式ページ(https://v3.nuxtjs.org/getting-started/introduction#comparison)より)

図3 Nuxt 2、Nuxt Bridge、Nuxt 3の違い(公式ページより)


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

著者プロフィール

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

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

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

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5