Nuxt.jsは.jsという名前がついている通り、JavaScriptのフレームワークで、Vue.jsをベースとしたフレームワークです。基本的にはVue.jsと同じですが、Vue.jsで学んだ記法や設計をほとんどそのまま使用して開発ができ、尚且つ豊富な拡張機能を持っていて、上位互換のような存在のフレームワークです。Vue.jsに慣れてきたら、ぜひ使ってみましょう。
Nuxt.jsのメリットは?
Nuxt.jsのメリットは大きく分けて次の3つがあります。
- SSR(サーバーサイドレンダリング)のしやすさ
- ルーティング管理のしやすさ
- PWAモジュール対応
順に説明していきます
SSRのしやすさ
SSR(サーバーサイドレンダリング)とは本来、ウェブブラウザ上で実行されるJavaScriptコードをサーバーサイドで実行し、実行結果をHTMLとしてクライアントに返す仕組みのことです。通常のVue.jsで実装するSPA(シングルページアプリケーション)はページ遷移をなくし、一度ロードされれば、サクサクとコンテンツの切り替えることができます。しかし、SPAは初期表示に時間がかかり、処理が仮装DOMで行われるため、SEO対策的にあまり良く無いことが多いです。SSRはこうした問題を解決することができ、そのままVueの記法でコードを書くことができます。VueでもSSRを導入することはできますが、Nuxt.jsの方が圧倒的に導入しやすいので、SSRを実装するときはNuxt.jsを使ってみましょう。
ルーティング管理のしやすさ
二つ目のメリットはルーティング管理のしやすさです。Nuxt.jsではVue.jsのようにコンテンツのルーティングを設定する手間を省くことができ自動的にルーティングを行うことができます。実際のやり方はページの終盤で紹介するので実際にやってみましょう。
PWAモジュール対応
PWA(Progressive Web Apps)とはモバイル向けWEBサイトをスマートフォン向けのアプリのように提供することができる仕組みです。PWAはネイティブアプリと違って、インストールする必要はなく、かつ通知機能などを提供することができるので注目されています。Nuxt.jsではPWAを実装するモジュールに対応しているので、PWAを実装する際はNuxt.jsを選ぶべきだと思います。
Nuxt.jsへの移行
Vue-CLI環境でのNuxt.jsの設定(Vue-CLIについて詳しく知りたい方は「Vue-CLIのインストール」を参照してください。)
Vue-CLIのinit機能を利用して、Nuxt.jsの環境構築ができます。
$ npm i -g @vue/cli @vue/cli-init
バージョンを確認してみましょう。
$vue -v@vue/cli 4.1.1
バージョンが表示されたあとはvue initコマンドによってプロジェクトを作成することができます。
今回はNuxtのスターターテンプレート(nuxt-community/starter-template)を使って、my-nuxt-appプロジェクトを作成しましょう。
$vue init nuxt-community/starter-template my-nuxt-app ? Project name my-nuxt-app ? Project description Nuxt.js project ? Author
以上のように選択文がでますが全てEnterを押しましょう。
今回はパッケージマネージャーとしてyarnを導入しますが、npm installコマンドでnpmを導入しても構いません。
$cd my-nuxt-app $yarn $yarn dev
yarnを起動して http://localhost:3000/ にアクセスすると次のような画面が表示されます。
以上でインストール完了です。
Nuxtのディレクトリ構成
続いてNuxt.jsのディレクトリ構成を見てみたいと思います。
VScodeなどのテキストエディタでmy-nuxt-appを開いて見ると、ディレクトリ構成は次のようになっています。
my-nuxt-app// ├── README.md ├── assets ├── components ├── layouts ├── middleware ├── node_modules ├── nuxt.config.js ├── package.json ├── pages ├── plugins ├── static ├── store └── yarn.lock
README.mdファイル
README.mdファイルには、npmなどのパッケージマネージャーのインストール方法やコマンドが買いてあります。Nuxt.jsに限らず、どのwebフレームワークでもREADME.mdファイルはあるので、読んでおくといいでしょう。
assetsディレクトリ
assetsディレクトリで画像リソースや、CSSなどのJavaScript以外のリソースを管理します。
componentsディレクトリ
conmponentsディレクトリはVue.jsと同様にコンポーネントを管理するディレクトリです。Vue.jsで勉強したコンポーネントの使い方がほとんどそのまま使用することができます。現在のmy-nuxt-appにはAppLogo.vueのみが入っています。
pagesディレクトリ
index.vueが入っているディレクトリで、ルーティングに対応したコンポーネントを格納するディレクトリとなります。このディレクトリ内ではすべての .vue ファイルを読みこまれ、ルーティングが行われます。
まずindex.vueのテンプレートを次のように書き換えてみましょう。
(index.vue)
<template> <section class="container"> <div> <app-logo/> <h1 class="title"> 私のNuxtアプリ </h1> <h2 class="subtitle"> Nuxt.js project </h2> <div class="links"> <a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a> </div> </div> </section> </template>
上のように表示が変わっていると思います。Nuxt.jsではpagesディレクトリにあるファイルがファイル名そのままルーティングを作成してくれます。pages/index.vueはデフォルトでhttp://localhost:3000/にアクセスすると表示されます。pages/players/one.vueのようなディレクトリ構造すると、http://localhost:3000/players/oneのように自動的にルーティングが作成されます。pagesディレクトリ配下にplayersディレクトリを、その配下にone.vueファイルを作成し、http://localhost:3000/players/oneにアクセスしてルーティングが作成されることを確認してみましょう。
(one.vue)
<template> <h1>プレイヤー1 静的なルーティング</h1> </template>
続いて、Nuxt.jsの動的なルーティングを設定してみましょう。Nuxt.jsではvueコンポーネントファイルのファイル名の頭に_(アンダーバー)をつけると、動的なルーティングを作成することができます。先ほど作成したhttp://localhost:3000/players/oneのような静的なルーティングは動的なルーティングよりも優先されることに注意してください。実際にpages/players/_id.vueを作成し、確認してみましょう。
(pages/players/_id.vue)
<template> <h1>プレイヤーsomeone 動的なルーティング</h1> </template>
http://localhost:3000/players/2やhttp://localhost:3000/players/3にアクセスすると次のように表示されます。
http://localhost:3000/players/oneにアクセスすると、先ほど静的なルーティングで設定したので、先ほどと同じように次のような画面が表示されます。
pages/players/_id.vueを次のように書き換えると、アクセスしたidに応じて表示を変えることができます。
(pages/players/_id.vue)
<template> <h1>プレイヤー {{playerId}} 動的なルーティング</h1> </template> <script> export default { data(){ return {playerId:this.$route.params.id} } } </script>
同じようにhttp://localhost:3000/players/2やhttp://localhost:3000/players/3にアクセスすると次のように表示が変更されることがわかります。
scriptタグ内playerIdにvuerouterのidを代入するデータを関数として定義しています。vuerouterのidにはアクセスしたtwoやthreeなどが自動的に追加されているので、{{playerId}}(テンプレート構文)を使って表示すると、アクセスしたidの名前が表示されます
staticディレクトリ
staticディレクトリは静的なリソースを管理するディレクトリです。通常、faviconなどを配置します。staticディレクトリ配下のファイルは直接悪接することができます。例えば、/static/favicon.ico は http://localhost:3000/favicon.icoでアクセスすることができます
storeディレクトリ
storeディレクトリではVuexストアとそのモジュールと管理するディレクトリです。デフォルトでは無効になっていて、このディレクトリに index.jsファイルを作成するとストアが有効となり、Vuexストアを使用することができます。
この記事のまとめ
本記事ではNuxt.jsの特徴とメリット、そしてNuxt.jsプロジェクトのディレクトリ構成について勉強しました!最後に記事の要点をまとめてみましょう。
- Nuxt.jsはVue.jsを基本とした、拡張フレームワークである。
- Nuxt.jsにはSSR(サーバーサイドレンダリング)のしやすさ、ルーティング管理のしやすさ、PWAモジュール対応といったメリットがある
- Nuxt.jsのディレクトリ構成は大きく分けて、assets、components、pages、static、storeディレクトリに分けられていて、pagesディレクトリでルーティング管理を行う。
ぜひ、Vue.jsを勉強したあとは、Nuxt.jsを是非勉強して、活用してみましょう!!