Nuxt.jsのライフサイクルフックを丁寧に解説してみた。

2021 12/03

takabee

こんにちは。takabeeです。

今回はNuxt.jsのライフサイクルフックを丁寧に解説します。

Nuxt.jsはじめたばかりの方は、間違いなくといっていいほどライフサイクルフックでつまづくと思います。

初心者

Nuxt.jsで開発をしていたら、詰まった。。。
多分ライフサイクルフックを理解してないことに原因があるかも。

初心者あるあるですね。

図解しながら解説していきます。

この記事で分かること

・そもそもライフサイクルフックとは？
・各フックで何が行われているのか？
・各フックではどういったことを書けば良いのか？

ネコ大先生

この記事は【約10分】で読めるニャ。

そもそもNuxt.jsのライフサイクルフックとは？

ライフサイクルフックというのは、「Nuxt.jsがページを表示する手順」のことです。

ページ表示するまでにこういう手順を踏むから、それにあわせてイベントとか登録してねー、ていう感じです。

ライフサイクルフックの全体像はこんな感じ。

ライフサイクルフックの全体像

これはNuxt.js公式サイトに書いてあるライフサイクルフックを、より細かくわけたものです。

省略されているものもあったので、いくつか付け足してます。

takabee

なんのこっちゃって感じでも大丈夫です。

Nuxt.jsの各フックの特徴と適切なコーディングの仕方

・Nuxt.jsの各フックの概要
・どういう風にコーディングしていけば良いのか？

といったところを解説していきます。

serverMiddleware

serverMiddlewareはサーバーのみで実行されるフックです。

ここではサーバー固有の処理を書きます。

たとえばAPIサーバーを作ったりできます。

具体的なやり方はこちらの記事を参考に。

株式会社LIG

Nuxtに「serverMiddleware」を設定して、API サーバ的な動きをさせてみた | 株式会社LIG 株式会社LIGのフロントエンドエンジニア・ライダーが、 Vueアプリケーション作成用のフレームワーク「Nuxt」内にサーバ側固有の処理を持たせることができる「serverMiddlew...

APIとは何ぞや？という方にすごいザックリと解説すると、「データを返してくれるサーバー」のことです。

そのAPIサーバーをserverMiddlewareで作ることもできるってことですね。

使い方は処理を書いたファイルを、nuxt.config.jsファイルのserverMiddlewareに登録するだけです。

公式のサンプルはこんな感じ。

export default function (req, res, next) {
  // req は Node.js の HTTP リクエストオブジェクトです
  console.log(req.url)

  // res は Node.js の HTTP レスポンスオブジェクトです

  // next は 次のミドルウェアを呼び出すための関数です。
  // ミドルウェアがエンドポイントでない場合、関数の最後で next を呼び出すのを忘れないでください！
  next()
}

serverMiddleware: ['~/server-middleware/logger']

参考サイトはこちら。

serverMiddlewareとRouteMiddlewareの違いについても言及されています。

Nuxt

serverMiddleware プロパティサーバーサイドミドルウェアを定義します。

nuxtServerInit

こちらもサーバー側でのみ実行されるフックです。

ここではあらかじめ初期値を渡す操作を書いたり、ログイン認証したりするコードを書きます。

つまり「クライアントサイドに処理を渡す前にサーバーでやっておかなきゃ！」な処理を書くわけですね。

使い方はstore/index.jsにnuxtServerInitアクションを追加するだけ。

公式のサンプルはこんな感じ。

actions: {
　nuxtServerInit ({ commit }, { req }) {
　　if (req.session.user) {
　　　commit('user', req.session.user)
　　}
　}
}

ちなみにCookieに保存したデータを取り出したいときも、

const cookie = req.headers.cookie

と書けばかんたんに取り出せます。

参考サイトはこちら。

Nuxt

ストアディレクトリ store ディレクトリには Vuex ストアに関するファイルが含まれています。Vuex ストアは Nuxt に付属していてすぐに使えますが、デフォルトでは無効化されています。このデ...

RouteMiddleware

これはサーバー・クライアントどちらでも実行されるフックです。

サーバーで1回、クライアントではページ遷移のたびに呼ばれます。

名前どおりルーティング制御、つまり「認証されていないユーザーはこのページにはいかせないぞ！」的な処理も書けるわけです。

使い方はmiddlewareディレクトリの中にファイルを作成し、

①nuxt.config.js
②layout
③page

のどれかに登録するだけです。上の方が適用される優先順位が高いです。

公式のサンプルはこんな感じ。

export default function (context) {
　// userAgentプロパティをコンテキストに追加します
　context.userAgent = process.server
　? context.req.headers['user-agent']
　: navigator.userAgent
}

export default {
  //nuxt.config.jsでの登録
　router: {
　　middleware: 'sample'
　}
}

参考サイトはこちら。

Nuxt

ミドルウェアディレクトリ middleware ディレクトリには、アプリケーションミドルウェアが含まれています。ミドルウェアを使用すると、ページまたはページのグループ（レイアウト）をレンダリングす...

validate

これもサーバーではSSR時に1回、クライアントではページ遷移のたびに呼ばれます。

使いたいコンポーネント内で、validateメソッドを追加すれば良いだけです。

このvalidateでエラーが出たときは、自動的にエラーページが表示されます。

公式のサンプルはこんな感じ。

動的に変化するURLのチェックができたりするんですね。

export default {
　validate({ params }) {
　　// 数字でなければなりません。違ったら自動的にエラーページに遷移。
　　return /^\d+$/.test(params.id)
　}
}

参考サイトはこちら。

Nuxt

validate メソッド Nuxt では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます。

asyncData

SSR時にサーバーで1度、クライアントではページが読み込まれるたびに行われるメソッドです。

asyncDataメソッドは、APIなどからデータを取得し、ローカルデータに格納する時に使われます。

あとからfetchという似たようなメソッドが出てきますが、違いはfetchのセクションで説明します。

使い方は、使いたいコンポーネント内でasyncDataメソッドを追加するだけです。

公式のサンプルはこちら。

async asyncData({ $http }) {
  const mountains = await $http.$get('https://api.nuxtjs.dev/mountains')
  return { mountains }
}

参考サイトはこちら。

Nuxt

データの取得 Nuxt では、API からデータを取得の方法は 2 つあります。fetch または asyncData を使うことでできます。

beforeCreate

Vueインスタンスが初期化される時に呼び出されるフックです。

インスタンスが初期化されるが、データにはまだアクセスできません。

つまりthisを使って、

this.data = data;

みたいにローカルデータに、何か代入することはこの段階ではできません。

参考サイトはこちら。

あわせて読みたい

API — Vue.js Vue.js - The Progressive JavaScript Framework

created

こちらはVueインスタンスが初期化されたあと、データも初期化されたときに呼ばれます。

なのでここではじめて、

this.data = data;

のようにthisが使えます。

参考サイトはこちら。

あわせて読みたい

API — Vue.js Vue.js - The Progressive JavaScript Framework

fetch

サーバーではSSR時に1度、クライアントではページを遷移するたびに呼ばれるメソッドです。

fetchメソッドはAPIなどからデータを取得する時に使われます。

先ほどasyncDataという似たようなメソッドが出てきましたが、何が違うかというと、

・fetchでthisが使えるが、asyncDataでは使えない
・fetchはすべてのVueコンポーネント（.vueファイル）内で使えるが、asyncDataはページコンポーネント（pagesディレクトリ配下の.vueファイル）でしか使えない
・fetchではローカルデータを直接操作できるが、asyncDataはローカルデータとマージする

ということです。全く意味わかりませんね。

解説します。

fetchはcreatedの後に、asyncDataはcreatedの前に位置するフックでした。

createdのあとからローカルデータにアクセスできるということも先ほど解説しましたね。

ということは、fetchはローカルデータにアクセスでき、asyncDataはアクセスできません。

asyncDataではthisが使えない！

なのでasyncDataはAPIからデータをとってきて、それをローカルデータにマージ（統合）する、という手法をとっています。

たとえば以下のasyncDataとfetchのサンプルでは、同じようにAPIからデータをとってきて、それをローカルデータのtodosに入れています。

export default {
　async asyncData(context) {
　　const data = await context.$axios.$get(
　　`https://jsonplaceholder.typicode.com/todos`
　　)
　　// todosはローカルデータに定義されていなくてOK。
　　return { todos: data.Item }
　　// todosはローカルにマージされます。
　}
}

export default {
　data() {
　　return {
　　　todos: []
　　}
　},
　async fetch() {
　　const { data } = await axios.get(
　　`https://jsonplaceholder.typicode.com/todos`
　　)
　　// todosはローカルデータに定義されている必要あり。
　　this.todos = data
　}
}

fetchではしっかり、thisにアクセスしているのがわかりますね。

もともとtodosを定義している必要もあります。

これがasyncDataとfetchの主な違いです。

参考サイトはこちら。

Nuxt

Fetch フック fetch フックは、非同期にデータを取得するためのものです。ルートをレンダリングする際にはサーバーサイドで、遷移する際にはクライアントサイドで呼び出されます。

Nuxt

Understanding how fetch works in Nuxt 2.12 Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications.