nuxt3にmock service workerを導入する

nuxt

nuxt3の素振りついでに、最近よくzennなどで見るmock service workerを導入してみた。

mock service workerについては以下参照。 mswjs.io

nuxt3環境構築

npx nuxi init YOUR-PROJECT-NAME

mswをインストール

npm i -D msw

msw関連ファイル追加

./mocks/handlers.ts

import { rest } from "msw";

export const handlers = [
  rest.get("/users", (_, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        users: [
          {
            id: 1,
            name: "hogehoge",
          },
          {
            id: 2,
            name: "fugafuga",
          },
          {
            id: 3,
            name: "piyopiyo",
          },
        ],
      })
    );
  }),
];

./mocks/browser.ts

import { setupWorker } from "msw";
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);

Service Workerを生成

npx msw init public/ --save

多分、saveオプションはつけなくても問題ない。

./plugins/mock.client.ts

import { worker } from "@/mocks/browser";

export default defineNuxtPlugin(async () => {
  if (process.env.DEBUG) { // NODE_ENVのが適切かもしれない
    await worker.start({
      onUnhandledRequest: "bypass",
    });
  }
});

呼び出し側

<template>
  <div>
    <template v-if="pending"> <p>loading...</p></template>
    <template v-else-if="error">
      <p>{{ error }}</p></template
    >
    <template v-else>
      <ul>
        <li v-for="user in data.users">{{ user.id }}: {{ user.name }}</li>
      </ul>
    </template>
  </div>
</template>

<script setup lang="ts">
const { data, pending, error } = useFetch("/users", {
  server: false,
});
</script>

参考リポジトリ

作ってみた。

github.com

設定数少なく利用できて最高です。 nuxt2もほぼ変わらずこれで設定可能なはず。

ワイヤレス最高じゃん

other

パソコン周辺機器のワイヤレスな製品に関して、なんとなく食わず嫌いで有線製品ばっかり買ってたんだけど、妻に誕生日プレゼントとしてHHKB Professional HYBRID Type-Sを買ってくれと無茶振りのつもりで頼んだら買ってくれた。

到着後、早速自分のPCにBluetooth接続して使ってみたらコードを気にしなくていいし、USBポートは潰れないしで良い事ばっかじゃ〜〜〜〜ん！みたいな。QOL爆上がり〜〜〜〜〜↑↑！！！！！！みたいな体感できた。

翌日ぐらいにはマウスもBluetoothで使用できるもの買ってた。

すごい。

Manjaro Linuxをインストールしたら行うこと（旧）

Linux Desktop

一週間ぐらい使ってみて、特別不便に感じないので、常用する予定。
環境構築に関して、いろんなサイトに掲載されているけど、自分用に書いておきます。
気が向いたときに更新する。

ミラーサーバーの変更

sudo pacman-mirrors --fasttrack && sudo pacman -Syy

pacmanの出力のカラー化

これは気分。

sudo nano /etc/pacman.conf

Colorとコメントアウトされている箇所があるので、そこを修正。

- #Color
+ Color

リポジトリとソフトウェアのアップデート

sudo pacman -Syyu

日本語入力の設定

Fcitx、mozcのインストール

sudo pacman -S fcitx-im fcitx-mozc

~/.xprofileに追記

export LANG="ja_JP.UTF-8"
export XMODIFIERS="@im=fcitx"
export XMODIFIER="@im=fcitx"
export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export DefaultIMModule=fcitx

AURヘルパーのインストール

sudo pacman -S yay

ホームディレクトリ配下のディレクトリ名を英語表記に変更

必要なソフトのインストール

sudo pacman -S xdg-user-dirs-gtk

変更コマンド

LANG=C xdg-user-dirs-gtk-update

コマンド実行後、確認のポップアップが出てくるので、アップデートを実行する。

rebootコマンドなどで再起動を行う。

フォントのインストール

コード用

yay -S otf-source-han-code-jp

参考資料