SPA(シングルページアプリケーション)を簡単に作成できるjavascriptフレームワークVue.js。そのVue.jsを使ってSSR(サーバーサイドレンダリング)が実現できるNuxt.jsを初めて体験してみました！
今回は、Nuxt.jsのインストールやプロジェクトの作り方、ファイル構成、ルーティングの仕方などを紹介します。
Nuxt.jsはSSR以外にも使える？
Nuxt.jsはVue.jsで作成するWebアプリをSSRするだけのツールだと思っていました(笑)
しかし実際は、
- ES6・ES7のトランスパイル
- jsやcssファイルの整備
- cssプリプロセッサのサポート
- 開発環境提供(ライブリロード等)
などなど、SSR(サーバーサイドレンダリング)以外の便利な機能を提供するVue.jsベースのjavascriptフレームワークでした。
create nuxt appでプロジェクトを作成
SSR以外にもたくさん便利な機能があるNuxt.jsのプロジェクトは【create-nuxt-app】を使えば一瞬で作成できます。
まずは、create-nuxt-appコマンドを使用できるようにするために、以下のコマンドをターミナルで実行しましょう。
|
1 |
npm i -g create-nuxt-app |
これで、ローカルPCに【create-nuxt-app】コマンドがインストールされました。
その状態で、
|
1 |
create-nuxt-app プロジェクト名 |
を実行します。そうすると
プロジェクト名やプロジェクト概要など、使用するツールなどが対話式で聞かれますが、すべてEnterで大丈夫です！(ちゃんと設定すれば、axiosやESLintなどをプロジェクト作成時に設定できます)
上記コマンドで作成されたディレクトリに入り【npm run dev】コマンドを実行し、ブラウザからhttp://localhost:3000にアクセスしましょう。
この画面が表示されたら成功です！
ファイル構成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
. ├── README.md ├── assets ├── components ├── layouts ├── middleware ├── node_modules ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── plugins ├── static └── store |
- layouts
- pages
- components
の３つです。
今回は、ルーティングやリンク、Viewの描写だけで簡単なWebアプリを作成するため、上記3つのディレクトリを修正します。
基本的なルーティング
Vue.jsのVue-routerを使う場合、router.jsなどのルーティングファイルを作成して、パス(URL)とcomponentを指定して、ルーティングを作成します。
しかし、Nuxt.jsの場合は、pagesディレクトリ配下のファイル構成でルーティングを設定します。
例えば、newsページを「/news/」というURLで作成する場合、
|
1 2 3 4 5 |
pages ├── README.md ├── index.vue └── news └── index.vue |
このようなディレクトリ・ファイル構成にすることで自動でNuxtがルーティングを設定してくれます。
パラメーター付きのルーティング
newsページのルーティングは実装できました。次は、パラメーター付きでnews詳細ページを表示する方法を紹介します。
先程作成したnewsディレクトリ配下に「_id.vue」というファイルを作成します。その状態で、ブラウザから「/news/1」にアクセスすると、_id.vueファイルが描写されます。
|
1 2 3 4 5 6 |
pages ├── README.md ├── index.vue └── news ├── _id.vue └── index.vue |
また、パラメーターをファイル内で取得する方法はVue Routerと同じく「$route.params.id」で取得できます。
|
1 2 3 4 5 |
<template> <section class="news"> {{$route.params.id}} </section> </template> |
上記のように_id.vueファイルを作成して、「/news/10」にアクセスすれば、10とブラウザに表示されます。
ルーティングバリデーション
Nuxt.jsの場合、パラメーターつきルーティングをする際に、バリデーション設定をできます。
先程作成したnews詳細ページのルーティングの場合、もしidが数字じゃない場合エラーにしたいとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <section class="news"> {{$route.params.id}} </section> </template> <script> export default { validate (routeData) { return routeData.params.id.match(/^\d+$/); } } </script> |
このようにvalidateメソッドを使用して、条件を規定すれば、パラメータが不正の値だった場合、エラーページを表示することができます。
Nuxt.jsの場合は、Vue.jsのVue RouterのようにルーティングファイルでURLを規定するのではなく、ファイル構成でURL構成を作成していきます。
ルーティングルールをフレームワークの方で規定してくれるので、すべての人が同じように同じルールでプロダクトを作ることができます。
layoutsディレクトリ
pagesディレクトリは各ルーティングで読み込まれるファイル一覧でした。
一方、layoutsディレクトリは全ページで使用されるテンプレートファイルを規定するディレクトリです。
例えば、「/lauouts/default.vue」ファイルにヘッダーを追加した場合、
|
1 2 3 4 5 6 |
<template> <div> <header>ヘッダー</header> <nuxt/> </div> </template> |
全ページにヘッダーが追加されます。
また、ページによってlayoutsファイルを変更したい場合、
|
1 2 3 4 5 6 7 8 9 10 |
<template> <section> </section> </template> <script> export default { layout: 'news' } </script> |
といった形で、layoutsファイル名を指定すればページごとにlayoutsを変更できます。(この例の場合は、/layouts/news.vueがレイアウトとして使われます。)
componentsディレクトリ
componentsディレクトリは各ページやlayoutで使用されるパーツを格納するディレクトリです。
プロジェクトを作成した状態ですでにLogo.vueコンポーネントが作成されています。
様々なページで繰り返して使われる共通パーツをcomponentsディレクトリ内に配置してプロジェクトを作成していきます。
リンク(nuxt-link)
Nuxt.jsの場合、HTMLタグのaタグでリンク設定をしてしまうとSPAの遷移(必要なDOMのみを変更する)ではなく、すべてのリソースを再度通信して取得してしまいます。
しかし、「<nuxt-link to=”/news”>News</nuxt-link>」というように、nuxt-linkを使用すれば、変更されるDOMのみ再描写し通信量を節約し、ページ表示速度を向上させることができます。
Vue Routerのrouter-linkのように、Nuxt.jsのプロジェクトではnuxt-linkを使用するようにしましょう。
Vue.jsが使えればNuxt.jsも使える！
ルーティングの設定やリンクの設定の仕方などNuxt.js特有の記法を覚える必要はありますが、Vue.jsでWebアプリを作れる方ならばNuxt.jsはすぐに使えるようになるイメージでした。
Vue.jsはもう1年ぐらい使い、かなり使い方もわかってきたので、これからはNuxt.jsでプロジェクトを作成し、ブログで使い方を紹介していこうと思いますので、ぜひ、また遊びに来てください！
