概要
こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、サーバーサイドで取得した UserAgent をグローバル化させてサイト内で扱う方法を紹介します。
はじめに
本記事の内容は、2022 年 6 月時点のものになります。Nuxt3 のバージョンアップ等で正常に動作しなくなる可能性があります。また、今回紹介するものは一例であり最適な実装でない可能性があります。これらを予めご理解の上、参考にしていただけると幸いです。
実装方法
① Plugin を使用して、サーバーサイド側で UserAgent を取得する
まずは、Nuxt3 の Plugin を活用してサーバーサイド側で UserAgent を取得していきます。
Nuxt3 の Plugin は、ファイル名によって動作する環境を制御できるため、***.server.ts というファイル名にしてサーバーサイド側のみで動作するようにしています。（逆にクライアント側だけで動作してほしい場合は、***.client.ts というファイル名にします）
import { defineNuxtPlugin } from '#app';
export default defineNuxtPlugin((nuxtApp) => {
const context = nuxtApp.ssrContext;
const userAgent: string = context?.req?.headers['user-agent'] ?? '';
return {
provide: {
userAgent
}
};
});
Provide を呼び出す方法
<script setup lang="ts">
const { $userAgent } = useNuxtApp();
console.log($userAgent);
</script>
コードは特に特別な処理はしていないため、シンプルな構成になっています。nuxtApp 内にある ssrContext から UserAgent を取得して、取得結果を Provide に格納しています。Provide に格納することでアプリケーション全体でヘルパーとして呼び出すことができる状態になります。この状態でもグローバル化されていますが、この段階ではサーバーサイド側のデータのため、クライアント側で呼び出すことはできません。
② Provide に格納した UserAgent を Composition API でクライアント側でも利用できるようにする
① の段階でもグローバル化はできていますが、クライアント側でも使う場合はもう一手間掛ける必要があります。再利用性のあるロジックになるため、その手の処理に適切な Composition API を活用していきます。
import { UAParser } from 'ua-parser-js';
export type UserAgent = UAParser.IResult;
export const useUserAgent = (): UserAgent => {
const { $userAgent } = useNuxtApp();
const userAgent = useState('userAgent', () => $userAgent);
const parser = new UAParser(userAgent.value);
const result = parser.getResult();
return {
...result
};
};
具体的な使い方
<script setup lang="ts">
const { ua } = useUserAgent();
</script>
<template>
<div>{{ ua }}</div>
</template>
こちらも複雑な処理は存在していませんが、状態を管理する useState に格納させています。これによりクライアント側でも扱える且つアプリケーション全体で共通化できるようになりました。その後に UserAgent を扱いやすい形にするために、ua-parser-js を使用してフォーマットしています。
まとめ
今回は、サーバサイドで取得した UserAgent をグローバル化してアプリケーション全体で扱えるようにする方法をご紹介しました。本記事で紹介した内容が、少しでもお役に立てれば嬉しいです。現段階では、Nuxt3 のこのような事例が紹介されているケースが少ないので、今後も積極的に発信していければと思います。
本記事を最後まで読んで頂き、ありがとうございました。「こんな記事を書いてほしい！」などありましたらコメントいただけると幸いです。
関連記事
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion