キー割り当て

最初 F13 キーに割り当てたら、 Apple 純正メモや ChatGPT など一部のアプリで、キーを押しっぱなしにするとビープ音が鳴り続ける現象があった。

REMAP で Ro (International 1) を割り当て、 VoiceOS の設定で割り当てたら解消した。

Unknown と表示されるが正常に動作する。

音声入力の文章

音声入力は文章が冗長になりやすい。最近のものはフィラーを取り除いてくれるが、それ以外にも手入力では出にくい余分な表現が増える。 AI チャットにならそのまま送れば良いが、日記やブログ、メッセンジャーで使う場合は入力後に削りたくなる。 AI に整形させてもいいが毎回は面倒。

VoiceOS の指示モードで「要約して」と最初に指示してから話すとわりといい感じになる。

以下は「これから話す内容を簡潔に要約して。要約前の文も出力すること」で始めた結果。

これから話す内容を簡潔に要約して要約前の文も出力することMacやPCではVoiceOSやAquaOSで精度の高い音声入力をすることができるようになったけどスマホというかiOSは標準を使っていて他にもアプリがあるようなのでそれも気になるただモバイルでの音声入力はAndroidのデフォルトのディクテーションがかなり優秀らしいので気になる

MacやPCではVoiceOSやAquaOSで高精度な音声入力が可能だが、iOSは標準機能のみで他のアプリも気になる。一方、Androidのデフォルトディクテーションは非常に優秀と聞く。

• AquaOS となっているのは誤認識ではなく単なる言い間違い

要約して、だけだとあまりに短くなりすぎる気もするが、しばらく試してみたい。

VoiceOS の設定にカスタムプロンプトというものがある。ここに設定して常に有効にすればいいと考えたが、これはアプリごとに設定するもので、全体に適用するのは今のところできないようだ。

招待コード: https://voiceos.com/r?code=f7e38407

ChatGPT の音声入力

ChatGPT の音声入力も使える。

AquaVoice を使った時は、音声入力ツールに追加でお金を出すのはどうかなと思い、結局やめてしまった。

ChatGPT は既に契約しているし、 Mac のアプリであればショートカットキーで呼び出せるし、とりあえずこれ使えばいいか…という。

create-next-app コマンドで作成する。

パッケージマネージャに pnpm を使用。選択肢は全てデフォルト。

$ pnpx create-next-app@latest --use-pnpm example-nextjs

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No

.node-version ファイルを作成する:

# .node-version を作成
$ node -v > .node-version

# もしくは major version のみ記載する場合
$ node -p 'process.versions.node.split(".")[0]' > .node-version

依存パッケージを追加

パッケージをいくつか追加する。

• i18n ライブラリである next-intl
• Tailwind CSS とあわせてよく使われる tailwind-variants
• ESLint と Prettier 関連
  • eslint-plugin-tailwindcss は 2025-04-20 時点で Tailwind CSS v4 に対応していないため除外

2025-11-16 追記: Tailwind CSS v4 サポートを謳う eslint-plugin-better-tailwindcss を追加

# dependencies
$ pnpm add tailwind-variants next-intl

# devDependencies
$ pnpm add -D \
    prettier \
    eslint-config-prettier \
    @trivago/prettier-plugin-sort-imports \
    prettier-plugin-classnames \
    prettier-plugin-merge \
    prettier-plugin-tailwindcss \
    eslint-plugin-better-tailwindcss

ESLint 設定

prettier と TypeScript の未使用変数に関する設定を追加。

+// @ts-check
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";
 import { defineConfig, globalIgnores } from "eslint/config";

 const eslintConfig = defineConfig([
   ...nextVitals,
@@ -13,6 +16,30 @@ const eslintConfig = defineConfig([
     "build/**",
     "next-env.d.ts",
   ]),
+  eslintConfigPrettier,
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_" },
+      ],
+    },
+  },
+  {
+    plugins: {
+      "better-tailwindcss": eslintPluginBetterTailwindcss,
+    },
+    settings: {
+      "better-tailwindcss": {
+        entryPoint: "app/globals.css",
+      },
+    },
+    rules: {
+      ...eslintPluginBetterTailwindcss.configs["recommended-warn"].rules,
+      "better-tailwindcss/enforce-consistent-line-wrapping": "off",
+      "better-tailwindcss/enforce-consistent-class-order": "off",
+    },
+  },
 ]);

 export default eslintConfig;

2025-11-16 追記: 設定について

• no-unused-vars はエラーでなく warn レベルになるようにする
  • コーディング中にエディタ上でエラーが即座に報告されるのが煩わしいため
  • warn レベルの問題を CI で検出する想定
• eslint-plugin-better-tailwindcss
  • entryPoint で create-next-app で作られるグローバル CSS ファイルを指定
  • recommended ルールを warn レベルで取り込む
  • 改行と順序のルールは off にし、 Prettier に任せる

Prettier 設定

import のソート、 Tailwind CSS のクラス名のソートと改行を行うプラグインを有効化。

.prettierrc を作成:

{
  "plugins": [
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-merge"
  ],
  "importOrder": ["<THIRD_PARTY_MODULES>", "^@/", "^[./]"],
  "tailwindFunctions": ["tv"],
  "customFunctions": ["tv"]
}

なお tailwindFunctions は prettier-plugin-tailwindcss の設定で、 customFunctions は prettier-plugin-classnames の設定。

2025-11-16 追記: prettier-plugin-classnames 関連の変更

• 以前は "endingPosition": "absolute-with-indent" を指定していたが v0.8.0 以降で不要になった: https://github.com/ony3000/prettier-plugin-classnames?tab=readme-ov-file#ending-position
• "experimentalOptimization": true オプションは削除された: https://github.com/ony3000/prettier-plugin-classnames/pull/98

ignore リストに pnpm の lockfile を入れておく。

$ echo pnpm-lock.yaml >> .prettierignore

package.json のスクリプト定義に "format": "prettier --write ." を追加し、コマンド実行してフォーマットを適用しておく。

$ pnpm run format

next-intl 設定

ドキュメントの通り設定する。 以下は locale-based routing と呼ばれる https://example.com/ja のようにパスに言語コードが入る設定。

App Router setup with i18n routing – Internationalization (i18n) for Next.js

• messages/ja.json と messages/en.json を作成
• next.config.ts を変更
• i18n/navigation.ts を作成
• i18n/request.ts を作成
• middleware.ts を作成
• i18n/routing.ts を作成
• app/layout.tsx を app/[locale]/layout.tsx に移動、修正
• app/page.tsx を app/[locale]/page.tsx に移動、修正

追加で TypeScript 型定義の設定を行う。

TypeScript augmentation – Internationalization (i18n) for Next.js

global.d.ts を作成:

import { routing } from "@/i18n/routing";
import messages from "@/messages/ja.json";

declare module "next-intl" {
  interface AppConfig {
    Locale: (typeof routing.locales)[number];
    Messages: typeof messages;
  }
}

開発サーバを起動し、ブラウザで http://localhost:3000 を開く。

http://localhost:3000/ja にリダイレクトされてページが表示されれば OK。

Apple の AirPods Pro は第1・第2世代があるが、それぞれマイナーアップデートが行われている。

ケースのスピーカーについて

音楽再生などはできず、以下の機能を持つ。

• Apple の「探す」でスピーカーを鳴らす
• Qi または MagSafe 充電の開始時にスピーカーが鳴る
  • これにより Qi 充電で置き場所が悪く充電できていないトラブルが減った。初期モデルは LED での判別のみだったのに比べて気付きやすい。

第2世代のマイナーアップデートでイヤホンは何が変わったのか

ケースは USB Type-C 端子に変わり、耐水性能が向上。

一方イヤホンは地味な変更。耐水性能が向上したのと、機能的には今のところ Apple Vision Pro のロスレスオーディオ対応くらい。

参考

• 新型AirPodsにはなぜスピーカーがついているのか？ | ギズモード・ジャパン
• Apple、AirPods Pro（第2世代）をUSB-C充電にアップグレード - Apple (日本)
• ASCII.jp：Vision ProとAirPods Proの低遅延ロスレス接続、これはいったい何なのか？ (1/2)
• ASCII.jp：【レビュー】新AirPods Pro、USB-C対応で変わること・変わらないこと (1/4)
• AirPods Pro、AirPods 3、AirPods 4（両モデル）の耐汗・耐水性能について - Apple サポート (日本)

pnpm completion fish > ~/.config/fish/completions/pnpm.fish

Command line tab-completion | pnpm

最近まで知らずに設定していなかった。 内容は執筆時点では以下のようになっていて、将来変更された時にコマンド再実行が必要になるかもしれない。

###-begin-pnpm-completion-###
function _pnpm_completion
  set cmd (commandline -o)
  set cursor (commandline -C)
  set words (count $cmd)

  set completions (eval env DEBUG=\"" \"" COMP_CWORD=\""$words\"" COMP_LINE=\""$cmd \"" COMP_POINT=\""$cursor\"" SHELL=fish pnpm completion-server -- $cmd)

  if [ "$completions" = "__tabtab_complete_files__" ]
    set -l matches (commandline -ct)*
    if [ -n "$matches" ]
      __fish_complete_path (commandline -ct)
    end
  else
    for completion in $completions
      echo -e $completion
    end
  end
end

complete -f -d 'pnpm' -c pnpm -a "(_pnpm_completion)"
###-end-pnpm-completion-###

2024-09-25 Updated: eslint flat config に対応

Vite で TypeScript の React プロジェクトを作る手順のメモです。

Tailwind や Redux など常に必要なわけではないライブラリも含まれるのでご注意ください。

プロジェクト作成

以前は Create React App というツールが使われていましたが、現在ではメンテナンスされていないようです。

• Create React App は役割を終えました
• Vite にたどり着くまで（Webpack 以降のモジュールバンドラー振り返り）

公式 には Next.js や Remix が推奨されていますが、フレームワークを使わずに始めたい場合は Vite がよく使われるようです。

• はじめに | Vite

テンプレートに react-ts を指定して作成します。

pnpm create vite@latest --template react-ts <app-name>

.node-version ファイルを作成しておきます。

# .node-version を作成
node -v > .node-version
# もしくは major version のみ記載する場合
node -p 'process.versions.node.split(".")[0]' > .node-version

Prettier

Install · Prettier

コードフォーマッターです。テンプレートのスタイルに合わせて singleQuote と semi を設定します。

pnpm install -D prettier eslint-config-prettier

echo '{
  "singleQuote": true,
  "semi": false
}' > .prettierrc

echo pnpm-lock.yaml > .prettierignore

eslint.config.js に追加:

@@ -3,6 +3,7 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'

 export default tseslint.config(
   { ignores: ['dist'] },
@@ -25,4 +26,5 @@ export default tseslint.config(
       ],
     },
   },
+  eslintConfigPrettier,
 )

package.json の scripts にコマンドを追加:

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "react": "^18.2.0",

フォーマットを適用します。

❯ pnpm run format

@trivago/prettier-plugin-sort-imports

https://github.com/trivago/prettier-plugin-sort-imports

import をソートするプラグインです。

pnpm install -D @trivago/prettier-plugin-sort-imports

.pretterrc を修正:

@@ -1,4 +1,6 @@
 {
   "singleQuote": true,
-  "semi": false
+  "semi": false,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"]
 }

ESLint の追加設定

テンプレートの ESLint の設定はいくつかの recommended 設定が最初から有効ですが、 @typescript-eslint/recommended-type-checked も追加します。

optional: @ts-check をオンにする

eslint.config.js の先頭に @ts-check を追加します。

@@ -1,3 +1,4 @@
+// @ts-check
 import js from '@eslint/js'
 import eslintConfigPrettier from 'eslint-config-prettier'
 import reactHooks from 'eslint-plugin-react-hooks'

ただし、これを執筆している時点 (2024-09-25) では @ts-check を追加すると react-hooks と rules の箇所でコンパイルエラーが表示されます。 以下のいずれかの対応を選択することになります。

• @ts-check を追加しない
  • エラーを検出できなくなるが、気にしないという判断。
  • 追加しなくても、無効な設定を書いてしまった場合は ESLint がエラーを出すので気付ける。
  • 追加しなくとも、 tseslint.config() の効果 でエディタの TypeScript 補完は効く。
• 追加した上で、エラーを無視する
  • VSCode などエディタ上でエラーになるだけで、ビルドなどは問題ない。したがってエラーが出る状態にしておき、単に無視する。
  • 将来的にプラグイン側で対応されたら解消するはず。

@typescript-eslint/recommended-type-checked をオンにする

通常の @typescript-eslint/recommended のルールに加え、 TypeScript の型情報を使う設定です。 no-floating-promises などのルールが含まれます。

eslint.config.js を修正:

@@ -9,7 +9,10 @@ import tseslint from 'typescript-eslint'
 export default tseslint.config(
   { ignores: ['dist'] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+    ],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,

parserOptions.project を追加

以下のエラーが起きるようになります。

Oops! Something went wrong! :(

ESLint: 9.11.1

Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Parser: typescript-eslint/parser
Occurred while linting (snip)/src/main.tsx
# snip
 ELIFECYCLE  Command failed with exit code 2.

eslint.config.js に以下の設定を追加すると解消します。

export default tseslint.config(
  { ignores: ["dist"] },
  {
    /* snip */
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        // languageOptions の子として追加
        project: ["./tsconfig.app.json", "./tsconfig.node.json"],
      },
    },
    /* snip */
  },
  eslintConfigPrettier
);

tsconfig の noUnused… をオフ + ESLint の @typescript-eslint/no-unused-vars を warn に

noUnusedLocals と noUnusedParameters を無効にし、 ESLint の @typescript-eslint/no-unused-vars を warn にします。

tsconfig.app.json:

@@ -16,8 +16,8 @@

     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]

eslint.config.js:

export default tseslint.config(
  { ignores: ["dist"] },
  {
    /* snip */
    rules: {
      /* snip */
      "@typescript-eslint/no-unused-vars": "warn", // rules の子として追加
    },
  },
  eslintConfigPrettier
);

この設定は tsconfig と ESLint で重複するため ESLint に任せることにします。また新しい変数を書いたそばからエラーになるのは邪魔に感じるため、個人的には error でなく warn にしたい。

@typescript-eslint/no-unused-vars は recommended 設定だと error に設定されているため、 warn に変更しています。この場合 CI で warn を許さないようにチェックするとよいでしょう。

例: CI では error レベルにし、かつ _ 始まりの変数は許容する設定

const isCI = process.env.CI;

export default tseslint.config(
  { ignores: ["dist"] },
  {
    /* snip */
    rules: {
      /* snip */
      "@typescript-eslint/no-unused-vars": [
        isCI ? "error" : "warn",
        {
          argsIgnorePattern: "_",
          varsIgnorePattern: "^_+$",
        },
      ],
    },
  },
  eslintConfigPrettier
);

tsconfig の compileOptions noUncheckedIndexedAccess を有効にする

noUncheckedIndexedAccess | TypeScript 入門『サバイバル TypeScript』

"strict": true で有効にならないオプションですが、配列を安全に扱うのに有用なので設定しておきます。

@@ -18,7 +18,8 @@
     "strict": true,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true
   },
   "include": ["src"]
 }

Tailwind CSS

Install Tailwind CSS with Vite - Tailwind CSS

CSS フレームワークです。

pnpm install -D tailwindcss postcss autoprefixer

# 設定ファイルは TypeScript を選択
pnpx tailwindcss init --ts --postcss

tailwind.config.ts を修正:

 import type { Config } from 'tailwindcss'

 export default {
-  content: [],
+  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {},
   },
   plugins: [],
 } satisfies Config

index.css を修正:

@tailwind base;
@tailwind components;
@tailwind utilities;

tsconfig.node.json に tailwind ファイルを含める

この状態で lint を実行すると以下のエラーが発生します。

pnpm run lint
#(snip)
<snip>/tailwind.config.ts
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/tailwind.config.ts` using `parserOptions.project`:
- <snip>/tsconfig.json
- <snip>/tsconfig.node.json

tsconfig.node.json の include に tailwind.config.ts を追加すると解消します。

@@ -7,5 +7,5 @@
     "allowSyntheticDefaultImports": true,
     "strict": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "tailwind.config.ts"]
 }

prettier-plugin-tailwindcss

Editor Setup - Tailwind CSS https://github.com/tailwindlabs/prettier-plugin-tailwindcss

className をソートする Tailwind 公式の Prettier プラグインです。

pnpm install -D prettier-plugin-tailwindcss

.prettierrc を修正:

@@ -1,6 +1,9 @@
 {
   "singleQuote": true,
   "semi": false,
-  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
   "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"]
 }

clsx

https://github.com/lukeed/clsx

クラス名を結合する関数を提供するライブラリで、条件付きでクラスを切り替えたりする場合に使います。 同種のツールでより高機能な tailwind-merge が存在しますが、今回は clsx を選択。

• https://github.com/dcastil/tailwind-merge

pnpm install clsx

.pretterrc を修正:

   "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
-  "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"]
+  "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
+  "tailwindFunctions": ["clsx"]
 }

prettier-plugin-classnames

長いクラス名を改行する Prettier プラグインです。詳細は prettier-plugin-classnames でクラス名を改行する | okiyama.dev を参照。

pnpm install -D prettier-plugin-classnames prettier-plugin-merge

.prettierrc を修正:

@@ -3,8 +3,11 @@
   "semi": false,
   "plugins": [
     "@trivago/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss"
+    "prettier-plugin-tailwindcss",
+    "prettier-plugin-classnames",
+    "prettier-plugin-merge"
   ],
   "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
-  "tailwindFunctions": ["clsx"]
+  "tailwindFunctions": ["clsx"],
+  "endingPosition": "absolute-with-indent"
 }

eslint-plugin-tailwindcss

eslint-plugin-tailwindcss - npm

ESLint プラグインです。 Tailwind のクラス名以外を検出などのルールがあります。

pnpm install -D eslint-plugin-tailwindcss

eslint.config.js を修正:

// import 追加
import tailwind from "eslint-plugin-tailwindcss";

/* snip */

export default tseslint.config(
  { ignores: ["dist"] },
  ...tailwind.configs["flat/recommended"], // 追加
  {
    /* snip */
    rules: {
      /* snip */
      "tailwindcss/classnames-order": "off", // rule 追加
    },
  },
  eslintConfigPrettier
);

rules で tailwindcss/classnames-order を off にしているのは、クラス名のソートは prettier-plugin-tailwindcss に任せるためです。

Redux Toolkit, react-redux

Installation | Redux

ステート管理ライブラリです。 Redux Toolkit が出てから以前にもまして重量級の雰囲気ですが、 Toolkit の流儀に従っておけばボイラープレートも少なくシンプルに書けるようになっています。

redux は @reduxjs/toolkit の依存に含まれているため個別にインストールする必要はなく、このふたつだけでよいです。

pnpm install @reduxjs/toolkit react-redux

src/redux/store.ts を作成:

import { configureStore } from "@reduxjs/toolkit";

export const rootReducer = {};

export const setupStore = () => {
  const store = configureStore({
    reducer: rootReducer,
  });
  // TODO: hot reloading の設定
  return store;
};

type AppStore = ReturnType<typeof setupStore>;
export type AppState = ReturnType<AppStore["getState"]>;
export type AppDispatch = AppStore["dispatch"];

src/redux/hooks.ts を作成:

import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, AppState } from "./store";

export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<AppState>();

src/main.tsx を修正:

@@ -2,9 +2,15 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import { Provider } from 'react-redux'
+import { setupStore } from './redux/store.ts'
+
+const store = setupStore()

 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
 )

課題: Redux のホットリロード

ホットリロードの設定方法が書かれていますが、 Vite だとうまく動作しませんでした。

Configuring Your Store | Redux

このように設定してみたのですが、ファイル保存時にページ全体がリロードされてしまう。未解決です。

// rootReducer を ./reducers.ts に移動したうえで以下を追加
if (import.meta.env.DEV && import.meta.hot) {
  import.meta.hot.accept("./reducers", async () =>
    store.replaceReducer((await import("./reducers")).rootReducer)
  );
}

関連するかもしれない Discussion: https://github.com/reduxjs/redux-toolkit/discussions/4281

React Router

Tutorial v6.22.3 | React Router

ルーターライブラリです。この例は React Router ですが、今新しく始めるなら TanStack Router もよいかもしれません。

pnpm install react-router-dom

main.tsx を修正:

 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import App from './App.tsx'
 import './index.css'
 import { setupStore } from './redux/store.ts'

 const store = setupStore()

+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+  },
+])
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <RouterProvider router={router} />
     </Provider>
   </React.StrictMode>,
 )

Vitest

Getting Started | Guide | Vitest

テストフレームワークです。 DOM ライブラリである happy-dom もインストールします。

pnpm install -D vitest happy-dom

package.json の scripts にコマンドを追加:

@@ -8,7 +8,8 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "test": "vitest"
   },
   "dependencies": {
     "clsx": "^2.1.1",

vitest.config.ts を作成:

import { defineConfig, mergeConfig } from "vitest/config";
import viteConfig from "./vite.config";

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      globals: true,
      environment: "happy-dom",
    },
  })
);

globals: true の設定で describe, test などをインポートせずに使えるようになります。この設定を使う場合は tsconfig の設定も必要です。

tsconfig.app.json を修正:

@@ -19,7 +19,10 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true
+    "noUncheckedIndexedAccess": true,
+
+    /* Vitest */
+    "types": ["vitest/globals"]
   },
   "include": ["src"]
 }

また、このファイルも tsconfig.node.json の include に追加しておきます。

@@ -7,5 +7,5 @@
     "allowSyntheticDefaultImports": true,
     "strict": true
   },
-  "include": ["vite.config.ts", "tailwind.config.ts"]
+  "include": ["vite.config.ts", "vitest.config.ts", "tailwind.config.ts"]
 }

React Testing Library, user-event, jest-dom

• React Testing Library | Testing Library
• Installation | Testing Library
• jest-dom | Testing Library

テストコードでの DOM 要素の取得やアサーションに使うライブラリです。

pnpm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

vitest-setup.ts を追加:

import "@testing-library/jest-dom/vitest";

vitest.config.ts を修正:

@@ -7,6 +7,7 @@ export default mergeConfig(
     test: {
       globals: true,
       environment: 'happy-dom',
+      setupFiles: ['./vitest-setup.ts'],
     },
   }),
 )

tsconfig.node.json を修正:

@@ -18,5 +18,10 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["vite.config.ts", "vitest.config.ts", "tailwind.config.ts"]
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "vitest-setup.ts",
+    "tailwind.config.ts"
+  ]
 }

テストコード

以下のようにテストします。

src/App.test.tsx:

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { App } from "./App";

const user = userEvent.setup();

it("App", async () => {
  render(<App />);
  await user.click(screen.getByText("count is 0"));
  await waitFor(() => {
    screen.getByText("count is 1");
  });
});

MSW

Mock Service Worker - API mocking library for browser and Node.js

テストで HTTP API, GraphQL API をモック化するのに使います。 React Testing Library のドキュメント でも推奨されていました。

pnpm install -D msw@latest

src/__mocks__/server.ts を作成:

import { http, HttpResponse } from "msw";
import { setupServer } from "msw/node";

export const server = setupServer(
  http.get("https://example.com/greeting", () => {
    return HttpResponse.json({ greeting: "hello there" });
  })
);

src/setupTests.ts を作成:

import { server } from "./__mocks__/server";

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

vitest-setup.ts に追記:

@@ -1 +1,6 @@
 import '@testing-library/jest-dom/vitest'
+import { server } from './src/__mocks__/server'
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())

以下のようにテストします。

import { HttpResponse, http } from "msw";
import { server } from "../__mocks__/server";

it("api success", async () => {
  const res = await fetch("https://example.com/greeting");
  expect(await res.json()).toStrictEqual({ greeting: "hello there" });
});

it("api error", async () => {
  server.use(
    http.get("https://example.com/greeting", () => {
      return new HttpResponse(null, { status: 500 });
    })
  );
  const res = await fetch("https://example.com/greeting");
  expect(res.status).toBe(500);
});

ライブラリのインストール

happy-dom だと通らなくなるテストがいくつかありました。 screen.getByRole などの取得ができないなどがあり、今回は jsdom で進めることにしました。

yarn add -D vitest jsdom

package.json の scripts を変更しておきます。

     "start": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "jest",
-    "test-coverage": "jest --coverage --watchAll=false",
+    "test": "vitest",
+    "test-coverage": "vitest --coverage",
     "compile": "tsc",
     "lint": "eslint src/**/*.ts src/**/*.tsx --quiet && prettier --check .",
     "verify-code": "yarn compile && yarn lint",

設定

vitest.config.ts を作成:

import { defineConfig, mergeConfig } from "vitest/config";
import viteConfig from "./vite.config";

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      globals: true,
      environment: "jsdom",
    },
  })
);

globals: true を設定すると、テストコードで describe, it, vi などを import せず使えるようになります。これらの型定義を使えるようにするため tsconfig にも設定が必要です。

tsconfig.json を修正:

     "strict": true,
     //"noUnusedLocals": true,
     //"noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* Vitest */
+    "types": ["vitest/globals"]
   },
   "include": ["src", "graphql/codegen.ts"],
   "references": [{ "path": "./tsconfig.node.json" }],

また、 vitest.config.ts が型チェックに含まれるようにします。

tsconfig.node.json を修正:

     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", ".eslintrc.cjs"]
+  "include": ["vite.config.ts", "vitest.config.ts", ".eslintrc.cjs"]
 }

testPathIgnorePatterns を exclude に移行

Jest 使用時は以下のように testPathIgnorePatterns を正規表現で指定して、ファイル名が _ で始まるファイルを除外していました。

{
  "testPathIgnorePatterns": ["__tests__/_(.)+.ts(x)?$"]
}

Vitest の exclude は glob pattern を指定します。また defaultExclude を含めるようにします。

-import { defineConfig, mergeConfig } from 'vitest/config';
+import { defineConfig, mergeConfig, defaultExclude } from 'vitest/config';
 import viteConfig from './vite.config';

 export default mergeConfig(
   viteConfig,
   defineConfig({
     test: {
       globals: true,
+      exclude: [...defaultExclude, '**/__tests__/_*.ts', '**/__tests__/_*.tsx'],

テストエラー対応

エラー Invalid Chai property: toHaveTextContent

toHaveTextContent の呼び出しでエラーになりいました。 これは @testing-library/jest-dom の提供するメソッドです。 setupTests.ts に import を追加し、このファイルをロードするよう設定します。

src/setupTests.ts を作成:

import "@testing-library/jest-dom";

vitest.test.config を修正:

     test: {
       globals: true,
       exclude: [...defaultExclude, '**/__tests__/_*.ts', '**/__tests__/_*.tsx'],
       environment: 'happy-dom',
+      setupFiles: ['./src/setupTests.ts'],
     },
   }),
 );

クラス名が scoped のものになっていてセレクタで取れずアサーション失敗

このアプリケーションでは module css (scss) を使用しています。 Jest で実行していた際は元のクラス名で render されていたのが、 scoped なクラス名になっていました。

-      <div class="Info" >
+      <div class="_Info_78db8b" >

これをテストで expect(container.querySelector(".Info")).toHavTextContent(...) としていて、取得できずエラーになりました。

Jest を使っていた時は identity-obj-proxy を使ってこの問題に対処していました。 Vitest では以下の設定で対処できます。

       globals: true,
       exclude: [...defaultExclude, '**/__tests__/_*.ts', '**/__tests__/_*.tsx'],
       environment: 'jsdom',
       setupFiles: ['./src/setupTests.ts'],
+      css: {
+        modules: {
+          classNameStrategy: 'non-scoped',
+        },
+      },
     },
   }),
 );

• Configuring Vitest | Vitest

jest-global-setup.cjs を移行

jest-global-setup.cjs で dotenv のロードなどをしていたので移行します。 TypeScript ファイルに変更し、 vitest.config.ts でこのファイルをロードするようにします。

       globals: true,
       exclude: [...defaultExclude, '**/__tests__/_*.ts', '**/__tests__/_*.tsx'],
       environment: 'jsdom',
       setupFiles: ['./src/setupTests.ts'],
+      globalSetup: ['./src/vitestGlobalSetup.ts'],
       css: {
         modules: {
           classNameStrategy: 'non-scoped',

expected “spy” to not be called at all, but actually been called 1 times

特定のケースでモックのアサーションが失敗していました。

AssertionError: expected "spy" to not be called at all, but actually been called 1 times

Received:
  1st spy call:
    Array []

Number of calls: 1

モックのリセットをしていないことが原因でした。

vitest.config.ts を修正:

      globalSetup: ['./src/vitestGlobalSetup.ts'],
      css: {
        modules: {
           classNameStrategy: 'non-scoped',
         },
       },
+      mockReset: true,
    },
  }),
);

Vitest テスト実行がハングアップする問題

テストがハングアップする問題が起きました。具体的には、コマンドを実行して特定のテストで止まり、そのまま応答がなくなるもののプロセスは動き続けています。

setupTests.ts にモックを追加していたのですが、この定義方法に問題がありました。

vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
});

useTranslation の戻り値のプロパティ t がコード内で useCallback の依存配列に含まれているとハングアップが発生します。この定義方法だと t が毎回新しい関数オブジェクトになるため、 useCallback が無限ループのような状態になっていたものと思われます。

以下のように t をトップレベルの変数に変更すると解消しました。

const t = (key: string) => key;
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t,
  }),
});

ちなみに vi.mock はファイル上部に移動されます (巻き上げ)。変数定義を vi.mock よりも前にしたい場合 vi.hoisted を使います。

const t =  vi.hoisted((key: string) => key);
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t,
  }),
});

• ESM の mock 巻き上げ問題と Vitest の vi.hoisted について

テストコード修正

jest 関数を置換していきます。

• jest.fn => vi.fn
• jest.mock => vi.mock
• jest.requireActual => await vi.importActual
• jest.spyOn => vi.spyOn

vi.importActual

vi.importActual は Promise を返すため以下のような変更が必要でした。

@@ -33,8 +33,8 @@ import {
 const mockedNavigate = vi.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
   useNavigate: () => mockedNavigate,
 }));

requireActual で複数行にわたるものがなかったため正規表現で一括置換できました。 (ただし外側の関数に async をつけるのは手動)

• pattern: jest\.requireActual\('(.*?)'\)
• replace: (await vi.importActual('$1'))

spyOn, mockImplementation

mockImplementation に何も渡していないコードがあり、 jest ではこの場合元の処理が使われます。つまりアサーションでコール回数を数えるためだけのために spyOn を使っているということです。

今回は単に削除で対応できました。

-  const mocked = vi.spyOn(MyClass, 'method').mockImplementation();
+  const mocked = vi.spyOn(MyClass, 'method');

型エラー vi.fn<void, []>()

-vi.fn<void, []>()
+vi.fn<[], []>()

close timed out after 10000ms

テスト実行の終了後にこのメッセージが表示されて、プロセスが終了しない状態になりました。

close timed out after 10000ms Failed to terminate worker while running <snip>.test.tsx. See https://vitest.dev/guide/common-errors.html#failed-to-terminate-worker for troubleshooting. Tests closed successfully but something prevents Vite server from exiting You can try to identify the cause by enabling “hanging-process” reporter. See https://vitest.dev/config/#reporters

ドキュメントの通り vitest.config.ts に pool: 'forks' を設定して解消しました。

      css: {
        modules: {
          classNameStrategy: 'non-scoped',
        },
      },
      mockReset: true,
+     pool: 'forks',
    },

• Common Errors | Guide | Vitest

移行完了

最後に Jest で使っていた設定ファイル、パッケージを削除して完了です。

rm babel.config.json
yarn remove babel-preset-vite identity-obj-proxy

ここまでの修正でほぼ全てのテストが通るようになりました。

Jest を使っていた頃と比べると、テストの実行速度が上がっておよそ半分の時間で実行できるようになりました。 Node v18 から v20 へのアップデートでさらに半分になり、当初の 4 倍速くなりました。

ライブラリのインストール

yarn add -D vite @vitejs/plugin-react

index.html をルートフォルダに移動

Vite ではここに置く必要があるようです。

また public/ ディレクトリにあるファイルへは / でアクセスできるので、以下のような変更をします。

- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="https://okiyama.dev/favicon.ico" />

import path を ~/ で絶対参照できるようにする

vite.config.ts で alias を設定します。

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: "~",
        replacement: path.resolve(__dirname, "./src"),
      },
    ],
  },
});

エラー: sass の import ~@

この状態で起動してブラウザで表示すると以下のエラーが発生しました。

[plugin:vite:css] [sass] Can't find stylesheet to import.
  ╷
6 │ @import '~@progress/kendo-theme-default/scss/core/_index.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/index.scss 6:9  root stylesheet

Error: Can’t find stylesheet to import. · Issue #5764 · vitejs/vite · GitHub

vitest.config.ts の alias に以下を追加して解消しました。

      {
        find: /^~@progress\/kendo-theme-default/,
        replacement: '@progress/kendo-theme-default',
      },

エラー: sass の import ~/

起動時に以下のエラーが表示されました。

[plugin:vite:css] [sass] ENOENT: no such file or directory, open '<snip>/src/themes/mixin'
  ╷
1 │ @import '~/src/themes/mixin';
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵

scss ファイルにある import を以下のように修正して解消しました。

-@import '~/src/themes/mixin';
+@import '~/themes/mixin';

エラー: process is not defined

ブラウザ画面が何も表示されなくなり、 devtools の console にエラーが出力されていました:

Uncaught ReferenceError: process is not defined
    at index.ts:2:24

Vite では環境変数の扱いが異なるためです。以下の変更で解消しました。

• process.env を import.meta.env に変更
• 環境変数の prefix を REACT_APP_ から VITE_ に変更
• react-app-env.d.ts を vite-app-env.d.ts にリネーム＆修正

エラー: require is not defined

一部で require を使っていた箇所があったためエラーになりました。

Uncaught ReferenceError: require is not defined

require を全て import に置き換えて解消しました。なお moment のロケールを条件付きで require していた処理があり、以下のように置き換えました。

+import 'moment/locale/ja';
+import moment from 'moment';

+moment.locale('en');
 if (i18n.language.startsWith('ja')) {
-  require('moment/locale/ja');
+  moment.locale('ja');
 }

• Vite だと require() が使えないよ〜

Uncaught TypeError: moment.duration(…).format is not a function

ここまでの変更で yarn start で起動してブラウザで動作することを確認できました。

しかし、 devtools の console に以下のエラーが出ています。

Uncaught TypeError: moment.duration(...).format is not a function
    at setDuration (index.tsx:39:37)
    at setTime (index.tsx:42:53)
    at index.tsx:46:42

src/index.tsx に以下を追加して解消しました。 ESM になった影響と思われます。

import momentDurationFormatSetup from "moment-duration-format";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
momentDurationFormatSetup(moment as any);

なお Moment.js 自体が現在は非推奨とされているようです。今回のアプリケーションでは date-fns へと段階的に移行しています。

We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done.

https://momentjs.com/docs/#/-project-status/

ESLint エラー: require() of ES Module .eslintrc.js from node_modules/@eslint/eslintrc/dist/eslintrc.cjs not supported.

公式サイトに以下の説明がありました。 .eslintrc.cjs にリネームして解消しました。

JavaScript (ESM) - use .eslintrc.cjs when running ESLint in JavaScript packages that specify "type":"module" in their package.json. Note that ESLint does not support ESM configuration at this time.

Configuration Files - ESLint - Pluggable JavaScript Linter

global is not defined

特定の処理で global is not defined というエラーが発生することがありました。 Webpack ではこの変数がデフォルトで含まれていましたが、 Vite では設定をすることで含まれるようになります。

vite.config.ts を修正:

@@ -20,4 +20,7 @@ export default defineConfig({
       },
     ],
   },
+  define: {
+    global: 'window',
+  },
 });

• vite import dragula error: global is not defined · Issue #2778 · vitejs/vite · GitHub

TypeError: Cannot read properties of undefined

class 構文を使っている処理で TypeError: Cannot read properties of undefined が発生することがありました。

TS のコンパイラオプションで useDefineForClassFields というものがあり、Vite+React のテンプレート が true だったためそれに倣って設定していましたが、これにより class のトランスパイル結果が変わってエラーになっていました。

tsconfig.json を修正:

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.paths.json",
   "compilerOptions": {
     "target": "ES2020",
-    "useDefineForClassFields": true,
+    "useDefineForClassFields": false,
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,

最近の React では class 構文はほとんど使わなくなっていますが、今回のアプリケーションでは一部にレガシーなコードベースが残っており、その中で以前のトランスパイル結果に依存している箇所があったようです。

• 特徴 | Vite
• TypeScript v3.7.2 変更点 #TypeScript - Qiita

デプロイ関連のエラー

ここまでの変更でローカルでは問題なく動作するようになりました。次にデプロイ周りで起きた問題を記載します。

CI デプロイジョブがエラー: The user-provided path ./build does not exist

ビルド結果の出力先ディレクトリ名が Vite のデフォルトは dist になっています。今までは build だったので、デプロイコマンドを変更しました。

Cloudflare の最適化で JS ファイルが壊れる

デプロイはできたものの、アクセスしても何も表示されません。 devtools の console には以下のように出力されていました。

index-SKSNfXQs.js:3
Uncaught SyntaxError: Invalid or unexpected token (at index-SKSNfXQs.js:3:8090)

881 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

エラーの発生箇所を見ると、 minify されたコードですが 1.toString という箇所でエラーになっていました。

...Lot=Math.random(),Rot=jot(1.toString),OA=function(e){return"Symbol(...
                             ^^^^^^^^^^

原因は Cloudflare の最適化機能である minify によって JavaScript ファイルが変わってしまっていたためでした。

• “Auto Minify” breaks javascript syntax

このアプリケーションは AWS S3 でホストして Cloudflare で配信する構成になっています。 Cloudflare の設定で minify をオフにすることで解消しました。¹

元のコード
Rot=jot(1 .toString) のスペースが除去されて
Rot=jot(1.toString) になって SyntaxError が起きていたようです。

これは esbuild によるビルド特有のようで、 Vite はビルドに esbuild を使用しているためこれが起きるようになりました。

• Cloudflare Auto Minify breaks esbuild minified JS
• Cloudflare Minification breaks esbuild’s “1 .toString” · Issue #3116 · evanw/esbuild · GitHub

そもそもビルド時に minify しているので Cloudflare 側でさらに minify する意味はなかったわけですが、たまたまオンにしてしまっていました。

ところで 1 .toString というコードは何を意味するのでしょうか。 minify された結果なのではっきりとはわかりませんが、 Number.prototype.toString を関数として取り出しているように見えます。書き方としては (1).toString と等価で、 1 .toString の方が 1 文字節約できるため esbuild がこのような出力をしているのだと思われます。

• What happened inside of (1).toString() and 1.toString() in Javascript

Browserslist を Vite で使用するための設定

Vite では browserslist を使うのに設定が必要です。

• Browserslist support · vitejs vite · Discussion #6849

yarn add -D browserslist-to-esbuild

vite.config.ts に以下を追加:

 export default defineConfig({
   plugins: [react()],
+  build: {
+    target:
+      process.env.NODE_ENV === 'production' &&
+      browserslistToEsbuild(['>0.2%', 'not dead', 'not op_mini all']),
+  },

設定変更: ie11 を削除

上記の設定では既に削除されていますが、 ie11 があると Maximum call stack size というエラーが発生するため削除しました。 (既に Internet Explorer はサポート対象外だったのですが、 Browserslist 設定に残ってしまっていた)

エラーログ:

✓ 5956 modules transformed.
✓ built in 6m 29s
error during build:
RangeError: Maximum call stack size exceeded
    at String.substring (<anonymous>)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:109:21)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:112:30)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:112:30)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:112:30)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:112:30)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:112:30)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:112:30)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:112:30)
    at replaceClose (file:///<snip>/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:112:30)

Jest 関連の移行

のちに Vitest へと移行するのですが、まずは Jest のまま動かすことにしました。

Jest をインストールしてみたがうまく動かない

インストールして多少の設定をしてみましたが、うまく動きませんでした。

yarn add -D jest @types/jest

テスト実行するとエラー:

ReferenceError: Jest: Got error running globalSetup - <snip>/jest-global-setup.js, reason: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '<snip>/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///<snip>/jest-global-setup.js:3:1
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

→ jest-global-setup.cjs にリネーム。ファイル内容も変更が必要で、 require を import に置き換えました。

この状態でテスト実行すると走り始めるようになりましたが、すべてのテストケースが以下のエラーになります。

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

このアプローチは諦めて、 eject して必要な設定をしていくことにしました。

eject 実行時のエラー

eject コマンドを実行したところエラーになりました。

❯ yarn run eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

✔ Are you sure you want to eject? This action is permanent. … yes
Ejecting...

Out of the box, Create React App only supports overriding these Jest options:

  • clearMocks
  • collectCoverageFrom
  • coveragePathIgnorePatterns
  • coverageReporters
  • coverageThreshold
  • displayName
  • extraGlobals
  • globalSetup
  • globalTeardown
  • moduleNameMapper
  • resetMocks
  • resetModules
  • restoreMocks
  • snapshotSerializers
  • testMatch
  • transform
  • transformIgnorePatterns
  • watchPathIgnorePatterns.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • testPathIgnorePatterns
  • collectCoverage

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

Jest の config から testPathIgnorePatterns と collectCoverage を削除して再実行すると eject できました。

eject した設定から必要なものを残す

その後はこちらの記事の Jest の CRA 依存を外す に書いてあるとおり修正を行い、正常にテスト実行ができるようになりました。内容そのままなので詳細は記事に譲ります。

• create-react-app から Vite への移行

Vitest 移行

まずは Jest 環境を維持したまま移行したのですが、その後 Vitest に移行しました。次の記事を参照してください。

• Jest から Vitest への移行

<div className="transform bg-red-500 text-center text-xl text-red-900 duration-500 ease-in hover:bg-blue-500 hover:text-blue-900">
  ...
</div>

改行を入れることで多少改善するが、 Prettier にやって欲しいところ。

<div
  className="transform bg-red-500 text-center text-xl text-red-900
    duration-500 ease-in hover:bg-blue-500 hover:text-blue-900"
>
  ...
</div>

公式の Prettier プラグインでも検討はされているが実装されていない¹。

非公式であるが prettier-plugin-classnames というプラグインがクラス名を改行する機能を提供している。 (Discussion のコメント より)

prettier-plugin-classnames - npm

公式のプラグインと併用するには prettier-plugin-merge も必要。

prettier-plugin-merge - npm

pnpm install -D prettier-plugin-classnames prettier-plugin-merge

.prettierrc:

 {
   "singleQuote": true,
   "semi": false,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": [
+    "prettier-plugin-tailwindcss",
+    "prettier-plugin-classnames",
+    "prettier-plugin-merge"
+  ],
+  "endingPosition": "absolute-with-indent",
   "tailwindFunctions": ["clsx"]
 }

https://github.com/rokiyama/example-vite-react-app/blob/507b5f91df552016413fa53217f8f6d27c861c47/.prettierrc

endingPosition は改行位置を決めるもの。 relative, absolute, absolute-with-indent のいずれかを設定する。 デフォルトは relative であるが、 absolute-with-indent が自然な挙動に思えたので設定。

基本的に Migrating to Modern Redux という公式のガイドの通り。 比較的スムーズに移行できたポイントとして、古い書き方と現代的な書き方を共存したまま進めることができるのが大きかった。

Many users are working on older Redux codebases that have been around since before these “modern Redux” patterns existed. Migrating those codebases to today’s recommended modern Redux patterns will result in codebases that are much smaller and easier to maintain.

The good news is that you can migrate your code to modern Redux incrementally, piece by piece, with old and new Redux code coexisting and working together!

https://redux.js.org/usage/migrating-to-modern-redux#overview

移行作業の概要

大まかな流れは以下の通り:

1. redux, react-redux のバージョン最新化と @reduxjs/toolkit のインストール
2. createStore から configureStore への移行
3. connect から Hooks API への移行
4. action, actionCreator, reducer の構成から createSlice または RTK Query への移行

1, 2 は npm の依存関係とアプリケーションの初期化プロセスの変更で、主に一箇所を書き換えるだけの変更。 3, 4 は機能ごとに書き換えの作業が必要だった。

すべての機能を移行できたわけではなく、 3, 4 の変更は段階的に進めていてレガシーな部分も残っている。 移行が終わったコンポーネントはテストも書きやすくなったが、古い構成の Redux コードに依存しているコンポーネントはテストコードも以前のままである。

ユニットテストについては Enzyme から React Testing Library と MSW の導入も必要だった。

その他の公式ドキュメント

• Writing Tests | Redux
  • ユニットテストで preloadedState を渡せる configureStore の書き方
• Usage With TypeScript | Redux
  • Define Typed Hooks に Hooks API にアプリケーション固有の useAppSelector, useAppDispatcher 型を作る例
• Tutorials Overview | Redux Toolkit
  • Redux とは別のリポジトリに Redux Toolkit のドキュメントがある。 createSlice や RTK Query の詳しい使い方はこちらを参照
• Writing Reducers with Immer | Redux Toolkit
  • reducer に渡されるステートが Immer のオブジェクトになっている

もともと Google Domains で購入したドメイン名でしたが、 Google Domains のサービス終了がアナウンスされ Squarespace に移管される予定になっていました。

Squarespace への Google Domains のドメイン登録の譲渡について - Google Domains ヘルプ

そのまま Squarespace に移行しても構わなかったのですが、ホスティングを Vercel で行っている関係でドメインの管理も同じサービスに任せることにしました。

以下の手順で移管を行いました。

• Google Domains
  • ドメインのロックを解除
  • 認証コードを取得
• Vercel
  • クレジットカードを登録しておく (設定画面 → Payment method)
  • Domains から Transfer In よりドメイン名と認証コードを入力
  • 元のレジストラの確認待ちと、カスタム DNS ゾーンの設定移行を促すダイアログが表示される
    • 今回はゾーンの設定は不要なので、移行が完了するまで待つ
• Google Domains
  • 移管の承認・キャンセルのメールが届くので、リンクから承認する
• Vercel
  • ドメイン移管完了のメールが届く

今回は Google Domains から承認確認のメールが届くまで 10 分程度、 Vercel から移管完了のメールが届くまで 1 時間程度かかりました。

参考

• Google Domains から別の登録事業者に移管する - Google Domains ヘルプ
• Transferring Domains to Another Team or Project

• expo install --check で TypeScript のバージョンを上げたら、 eslint が動かなくなった
• @typescript-eslint/eslint-plugin を v6 に上げる必要があるが @react-native/eslint-config が v5 系に依存しているためアップデートできない
• TypeScript のバージョンを 5.0.x に落としたら ESLint が実行できるようになった

expo install –check とは

Expo CLI に用意されている expo install --check は、バージョンを検証・修正するコマンドです。

https://docs.expo.dev/more/expo-cli/#version-validation

ローカルで実行すると対話式で修正でき、 CI ではチェック結果に応じてエラーになります。

最近、 Expo SDK のアップデートに合わせて実行したところ、 TypeScript のバージョンが上がりました。

❯ npx expo install --check
Some dependencies are incompatible with the installed expo version:
  typescript@5.0.4 - expected version: ^5.1.3
Your project may not work correctly until you install the correct versions of the packages.
Fix with: npx expo install --fix
✔ Fix dependencies? … yes
› Installing 1 SDK 49.0.0 compatible native module using npm
> npm install

# snip

changed 1 package, and audited 1600 packages in 9s

(実際には SDK アップデートと同時に行ったため、もっとログがありました。上記は後日再実行した際のログです)

上記の通り TypeScript のバージョンが上がりましたが、これにより ESLint が動かなくなりました。

❯ npm run lint

> eslint ./src

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.1.0

YOUR TYPESCRIPT VERSION: 5.2.2

Please only submit bug reports when using the officially supported version.

確認すると、 @typescript-eslint/eslint-plugin のバージョンが古く、最新の v6 系ではなく v5 系を使っていました。

v6 系にアップデートしようとしましたが、 @react-native-community/eslint-config@3.2.0 が v5 系に依存しておりアップデートできません。そもそもこのパッケージ自体が古く、 React Native 0.72 で名称が変更されています。

https://reactnative.dev/blog/2023/06/21/0.72-metro-package-exports-symlinks#package-renames

• OLD: @react-native-community/eslint-config
• NEW: @react-native/eslint-config

というわけで @react-native/eslint-config の最新をインストールしましたが、こちらも v5 系に依存していました。リポジトリを見たところ以下のようになっています。

ディレクトリ名が異なる理由は不明ですが、パッケージ名は一致しています。 npm.js によると 0.72.2 が最新で、 0.73.0 は nightly となっています。いずれにせよ、どちらも @typescript-eslint/eslint-plugin の v5 系に依存しています。

依存関係を無視して @typescript-eslint/eslint-plugin を最新化することも考えられますが、今回は手っ取り早く対応するため TypeScript のバージョンを下げます。 ESLint のエラーメッセージによると <5.1.0 が必要なので、 v5.0.x 系にします。

❯ npm install -D typescript@~5.0.0

changed 1 package, and audited 1600 packages in 2s

ESLint が実行できるようになりました。

❯ npm run lint

> expo-chat-command-gpt@1.0.0 lint
> eslint ./src

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

実際のコミット

https://github.com/rokiyama/gpt-prompter-frontend/commit/2c877c25f13ac8de4bc38d1139bc8591b6ca65cd

• しばらく Go に触れていなかった
• 最近 Xcode 15 beta 6 をインストールした
• VSCode で Go のプロジェクトを開くと gopls のエラーが出た
• issue のコメント に従って gopls を一度削除して Homebrew で入れ直したら解消した

VSCode で Go のプロジェクトを開くとエラーが２つ通知されました。

The gopls server failed to initialize.

gopls client: couldn't create connection to server.

コマンドラインで gopls を実行してみるとエラーでした。

❯ gopls version
R PAKAYAH LI LETTER PHAfish: Job 1, 'gopls version' terminated by signal SIGSEGV (Address boundary error)

Issue が上がっていました。

Language server fails to start · Issue #2909 · golang/vscode-go · GitHub

runtime: gopls -v crashes immediately when linked with Xcode 15 beta · Issue #61190 · golang/go · GitHub

一度 Go modules でインストールされたバイナリを削除して、 Homebrew のバージョンをインストールし直すと解消するようです。

# 削除
❯ rm ~/go/bin/gopls

# Homebrew でインストール
❯ brew install gopls
# (snip)

==> Fetching gopls
==> Downloading https://ghcr.io/v2/homebrew/core/gopls/manifests/0.13.2
######################################################################################################################################################### 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/gopls/blobs/sha256:a70553eebb2218b4062c6b452eb7a5168e33224eaa396e847c45abb1825fbf5e
######################################################################################################################################################### 100.0%
==> Pouring gopls--0.13.2.arm64_ventura.bottle.tar.gz
🍺  /opt/homebrew/Cellar/gopls/0.13.2: 5 files, 25.9MB

# 正常になった
❯ gopls version
golang.org/x/tools/gopls v0.13.2
    golang.org/x/tools/gopls@(devel)

この後、 VSCode で Reload Window を実行すると正常になりました。

それぞれがどのような機能のパッケージなのか調べてみました。

eslint-config-prettier: Prettier と競合する ESLint ルールを無効にする

https://github.com/prettier/eslint-config-prettier

ESLint には、不具合の原因となるコードを検出するためのルールのほか、フォーマットに関するルールも存在します。 Prettier を使っている場合、フォーマットのルールは不要なだけでなく、 Prettier の設定とコンフリクトする場合もあります。

eslint-config-prettier はそのようなルールを無効にします。

eslint-plugin-prettier: ESLint 実行時に Prettier によるフォーマットを実行する

https://github.com/prettier/eslint-plugin-prettier

eslint-plugin-prettier は ESLint 実行時に Prettier によるフォーマットを実行する ESLint プラグインです。フォーマットが適用されていないファイルを検出する機能もあります。

Prettier が登場した当初は、エディタとの統合はまだ存在していませんでした。一方で ESLint (などの Linter ツール) は以前から存在していたため、多くのエディタがサポートしていました。このような時代に、 ESLint 経由で実行できる eslint-plugin-prettier は有用だったようです。

しかし現在は多くのエディタが Prettier をサポートしています。そして、 ESLint のプラグインとして Prettier を実行することにはデメリットがあり (不要な警告が出る・パフォーマンスが悪いなど) 、現在では eslint-plugin-prettier を使う理由はありません。

ESLint 設定の extends に plugin:prettier/recommended を書くとどうなるのか

README によると、これ一つで eslint-config-prettier と eslint-plugin-prettier の両方が有効になります。以下のように展開されます。

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

現在は eslint-config-prettier だけを有効にすればよいので、 Prettier 関連で eslintrc に必要な設定はこれだけです。

{
  "extends": ["prettier"]
}

なお、以前は prettier/react や prettier/vue のような他のプラグインと共存するための設定も存在したようですが、 eslint-config-prettier の 8.0.0 から不要になったようです。

CI で ESLint と同時に Prettier のチェックも実行する

CI で ESLint を実行しているなら、 prettier --check コマンドも同時に実行するとよいかもしれません。フォーマットが適用されていないファイルを検出できます。

例として CI で npm run lint を実行している場合、以下のように設定します。

{
  "scripts": {
    "lint": "eslint ./src && prettier --check ."
  }
}

参考文献

• Integrating with Linters · Prettier
• いつのまにか eslint-plugin-prettier が推奨されないものになってた | K note.dev
• eslint と prettier を併用する時の設定 - すな.dev

https://apps.apple.com/jp/app/ai-prompt-editor/id6448696132

モバイルで OpenAI API の GPT を使うためのアプリです。テンプレートを穴埋め形式で入力することで、モバイルでも長文のプロンプトを作成しやすくします。

システム構成は以下のようになっています。

フロントエンドは TypeScript で書かれていて、 Expo を使った React Native アプリになっています。

バックエンドは Go 言語で、 AWS Lambda で動いています。 OpenAI API は Server Sent Events に対応しているので、それをアプリに WebSocket で送ります。

Vercel はテンプレート文言を JSON ファイルとしてホストするために使用しています。

デプロイは、アプリについては手動 (ローカルマシンから EAS Build をトリガー) で、バックエンドについては GitHub Actions で CDK を実行しています。

リポジトリ:

• https://github.com/rokiyama/gpt-prompter-frontend
• https://github.com/rokiyama/gpt-prompter-backend
• https://github.com/rokiyama/gpt-chat-misc

Expo での開発について

アプリで使用しているライブラリのうち主なものは以下の通りです。

• Expo / React Native
• Redux Toolkit
• Tailwind CSS / tailwind-rn
• Gifted Chat

Expo を使うことで、ビルド環境をローカルに用意することなく開発からストア公開まで行うことができました。

Expo はライブラリや CLI ツールをはじめとした統合的なエコシステムになっていて、プロジェクトの生成を行う create-expo-app のほか、以下のようなアプリ・サービスを提供しています。

Expo Go

開発中のプレビューは Expo Go というモバイルアプリを使用します。このアプリは開発用のクライアントで、 npm run start で起動したローカルのサーバに接続してアプリを動かせます。

flowchart LR
  subgraph PC
    node[Expo dev server]

    subgraph Simulator
      expoGoS[Expo Go]
    end
  end

  subgraph Phone
    expoGo[Expo Go]
  end

  expoGo --> node
  expoGoS --> node

このアプリはよくできていて、普通の React アプリを Web ブラウザでプレビューしながら開発するのとそんなに変わらない体験です。 Expo Go を使っている限りは、 JS のライブラリ関連でエラーに悩まされることはありますが、ネイティブ関連のビルドエラーとは無縁です。

シミュレータだけでなく実機でも動作し、 Expo ユーザとしてログインしていれば LAN 内の自分のサーバを自動で見つけてくれるなど、非常に便利です。

ただし Expo Go でできることは用意された Expo SDK の範囲でできることに限られ、それを逸脱する実装をしたい場合はカスタムのネイティブコードを含めてビルドする必要があります。このような場合の対応方法も用意されており、 Development builds という自分専用にカスタムされた Expo Go アプリのようなものをビルドする方法があります。

今回のアプリではカスタムビルドが必要になることはなかったのですが、一度試したところ後述の EAS Build を使えば特に難しいところもなくカスタムビルドを行うことができました。

Expo Application Services (EAS)

Expo 社が提供するクラウドサービスです。このサービスにネイティブアプリのビルドと、 App Store 申請に必要な証明書の管理などを任せることができ、ストア公開まで比較的簡単にできました。

https://expo.dev/eas

一部、 Apple のサイトで手動による設定が必要なところもありますが、ドキュメントに従っていれば特に大きなトラブルもなく進められました。

無料で使い始めることができ、無料枠だとビルド回数が制限される、キューの待ちが発生する、インスタンスの性能も低いなどの制限があるようです。今回の開発では無料枠のまま使えていますが、頻繁にアップデートしたいなどの場合は有料プランが必要になりそうです。

https://expo.dev/pricing

ちょっと困ったのは、アプリバージョンとビルド番号の管理です。既に提出済みのビルド番号を再提出しようとするとエラーになるので、番号をインクリメントしてからビルドをトリガーする必要があるのですが、エラーになるのはビルドが完了した後の Apple に提出するタイミングです。なので、インクリメントを忘れるともう一度ビルドからやり直す必要が生じます。運用でカバーする方法を考えたいところです。

参考にしたもの

Udemy の講座が参考になりました。

• https://www.udemy.com/course/react-native-expo-firebase/
• https://www.udemy.com/course/react-native-first-step/

meishi2 という自作キーボード初心者向けのキットで実施しました。

インストール・セットアップ

macOS の場合、 Homebrew でインストールします。

brew install qmk/qmk/qmk

インストール後にセットアップコマンドを実行します。

qmk setup

セットアップ中に 公式リポジトリ の git clone が行われます。事前に任意の場所に clone しておき、そのパスを指定することもできます。

qmk setup -H ~/ghq/github.com/qmk/qmk_firmware

ファイル作成

QMK のリポジトリ qmk_firmware のディレクトリに移動します。このリポジトリの keyboards/ ディレクトリに、様々なキーボードのキーマップ設定が収められているようです。

meishi2 の場合は以下のディレクトリです。

keyboards/biacco42/meishi2/keymaps/

以下のコマンドを実行すると、このディレクトリにある default をコピーして、新たなディレクトリが作成されます。

qmk new-keymap -kb biacco42/meishi2

実行すると、名前の入力を求めるプロンプトになります。

Keymap Name:

適当に my_meishi2 と名付けることにして、プロンプトに入力して enter を入力します。すると、次のように表示されます。

Ψ my_meishi2 keymap directory created in: /Users/okiyama/ghq/github.com/qmk/qmk_firmware/keyboards/biacco42/meishi2/keymaps/my_meishi2
Ψ Compile a firmware with your new keymap by typing:

        qmk compile -kb biacco42/meishi2 -km my_meishi2

メッセージの通り、 my_meishi2 という名前のディレクトリが作成されます。作成されたファイルを編集し、任意のキーマップに変更します。

コンパイル・書き込み

以下のコマンドを実行すると、指定したキーマップでファームウェアがコンパイルされます。

qmk compile -kb biacco42/meishi2 -km my_meishi2

コンパイルのログが表示されます。以下は成功時のログです。

Ψ Compiling keymap with gmake --jobs=1 biacco42/meishi2:my_meishi2


QMK Firmware 0.19.12
Making biacco42/meishi2 with keymap my_meishi2

avr-gcc (Homebrew AVR GCC 8.5.0) 8.5.0
Copyright (C) 2018 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Size before:
   text    data     bss     dec     hex filename
      0   20354       0   20354    4f82 biacco42_meishi2_my_meishi2.hex

Compiling: quantum/keymap_introspection.c                                                           [OK]
Compiling: quantum/command.c                                                                        [OK]
Linking: .build/biacco42_meishi2_my_meishi2.elf                                                     [OK]
Creating load file for flashing: .build/biacco42_meishi2_my_meishi2.hex                             [OK]
Copying biacco42_meishi2_my_meishi2.hex to qmk_firmware folder                                      [OK]
Checking file size of biacco42_meishi2_my_meishi2.hex                                               [OK]
 * The firmware size is fine - 20354/28672 (70%, 8318 bytes free)

コンパイルに成功したので、キーボードに書き込みます。以下のコマンドを実行します。

qmk flash -kb biacco42/meishi2 -km my_meishi2

実行すると (このとき再びコンパイルが行われるようです)、以下のようにキーボードのリセット待ち状態になります。

Ψ Compiling keymap with gmake --jobs=1 biacco42/meishi2:my_meishi2:flash
# snip
 * The firmware size is fine - 20354/28672 (70%, 8318 bytes free)
Flashing for bootloader: caterina
Waiting for USB serial port - reset your controller now (Ctrl+C to cancel)......

ここでまだキーボードを接続していなければ接続し、リセットスイッチを押します。するとキーボードが認識され、書き込みが行われる様子がログで流れます。

Device /dev/tty.usbmodem101 has appeared; assuming it is the controller.
Waiting for /dev/tty.usbmodem101 to become writable.

Connecting to programmer: .
Found programmer: Id = "CATERIN"; type = S
    Software Version = 1.0; No Hardware Version given.
Programmer supports auto addr increment.
Programmer supports buffered memory access with buffersize=128 bytes.

Programmer supports the following devices:
    Device code: 0x44

avrdude: AVR device initialized and ready to accept instructions

Reading | ################################################## | 100% 0.00s

avrdude: Device signature = 0x1e9587 (probably m32u4)
avrdude: NOTE: "flash" memory has been specified, an erase cycle will be performed
         To disable this feature, specify the -D option.
avrdude: erasing chip
avrdude: reading input file ".build/biacco42_meishi2_my_meishi2.hex"
avrdude: input file .build/biacco42_meishi2_my_meishi2.hex auto detected as Intel Hex
avrdude: writing flash (20354 bytes):

Writing | ################################################## | 100% 1.57s

avrdude: 20354 bytes of flash written
avrdude: verifying flash memory against .build/biacco42_meishi2_my_meishi2.hex:
avrdude: input file .build/biacco42_meishi2_my_meishi2.hex auto detected as Intel Hex

Reading | ################################################## | 100% 0.17s

avrdude: 20354 bytes of flash verified

avrdude done.  Thank you.

上記のように avrdude done と表示されれば完了で、キーボードとして使える状態になります。

補足

QMK Firmware を使ったファームウェア書き込みは最も基本的な方法の一つですが、他にもいくつかツールがあり、 2023 年現在は Remap が人気のようです。

Bitbucket の PR を開いて URL が変に長いときに、アイコンをクリックすると短い URL に置き換わるという拡張です。

ソースコード: https://github.com/rokiyama/bitbucket-canonical-url

概要

Bitbucket の PR を使っていると URL が妙に長くなることがあります。

# 長い
https://bitbucket.org/foo/%7B840d6a13-5d55-4c1a-a86b-3372c3ceeef1%7D/pull-requests/123/branch-name#comment-123456789

↓

# 短くできる
https://bitbucket.org/foo/bar/pull-requests/123#comment-123456789

UUID のようなものが埋め込まれていて、リポジトリ名が判別できません。無駄にブランチ名も入っています。 どうやら JIRA から PR に飛んだ時などに発生するようです。

この拡張をインストールしてツールバーのアイコンをクリックすると、短い URL に書き換えられます。

Bitbucket と JIRA を併用していて、かつ URL の見映えを気にする人がターゲットユーザーでしょうか。

クリックしたら書き換える方式にした理由

Amazon URL Shortener という拡張があり、これを参考に開発を始めました。

最初はこれと同様、ページを開いた瞬間に URL を書き換えるようにしたかったのですが、 PR 内でコメントにジャンプしたりした際にも URL が長くなる現象が起きることがあったため、 任意のタイミングで短縮処理が行えるようにしています。

background.ts と content.ts

クリック時に行う処理は background.ts で行っており、これは service worker として動作します。

また URL が https://bitbucket.org/foo/%7B840d6a13-5d55-4c1a-a86b-3372c3ceeef1%7D/pull-requests/... のような場合、リポジトリ名をどこかから取ってくる必要があり、これは DOM から取得する必要がありました。

DOM の取得は service worker では行えず、 content scripts で行う必要があります。 この処理は content.ts で行っています。

それぞれのファイルの役割は マニフェスト で指定するようになっています。

ストアでの公開

開発者登録料として $5 支払いました。一度払えばそれ以降の支払いは不要なようです。

11/19(土) に審査を申請して、 11/21(月) に公開されました。 Eメールで通知などはしてくれないようで、いつの間にか公開されていたという感じでした。

今後の課題

• バージョン管理
• GitHub Actions でテスト、リリース

参考にした記事

拡張の作り方はこちらの記事と、この筆者の方の作られた拡張を参考にさせていただきました。

• Chrome拡張をつくるチュートリアル
• Amazon URL Shortener - Chrome ウェブストア

こちらも参考にさせていただきました。ストア公開の手順までが簡潔にまとめられていてわかりやすかったです。

• Chrome拡張をVite+TypeScript+Reactで作る

こちらは開発に必要な概念が詳しく説明されていて参考になりました。内容はマニフェスト V2 に基づいていますが、基本的な考え方は V3 でも大きくは変わらないようです。

• Chrome Extension の作り方 (その1: 3つの世界) - Qiita

bind-key -T copy-mode-vi Enter send-keys -X copy-pipe

プラグイン tmux-yank を使用している場合は以下を設定します。

set -g @yank_action 'copy-pipe'

tmux 3.3a, tmux-yank 2.3.0 で確認しました。

キーバインドを確認する

コマンド tmux list-key で、現在のキーバインドが確認できます。

# デフォルト状態の tmux キーバインド一覧
❯ tmux -f /dev/null list-key | rg 'copy-pipe'
bind-key    -T copy-mode    C-k                  send-keys -X copy-pipe-end-of-line-and-cancel
bind-key    -T copy-mode    C-w                  send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode    MouseDragEnd1Pane    send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode    DoubleClick1Pane     select-pane \; send-keys -X select-word \; run-shell -d 0.3 \; send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode    TripleClick1Pane     select-pane \; send-keys -X select-line \; run-shell -d 0.3 \; send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode    M-w                  send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode-vi C-j                  send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode-vi Enter                send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode-vi D                    send-keys -X copy-pipe-end-of-line-and-cancel
bind-key    -T copy-mode-vi MouseDragEnd1Pane    send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode-vi DoubleClick1Pane     select-pane \; send-keys -X select-word \; run-shell -d 0.3 \; send-keys -X copy-pipe-and-cancel
bind-key    -T copy-mode-vi TripleClick1Pane     select-pane \; send-keys -X select-line \; run-shell -d 0.3 \; send-keys -X copy-pipe-and-cancel
bind-key    -T root         DoubleClick1Pane     select-pane -t = \; if-shell -F "#{||:#{pane_in_mode},#{mouse_any_flag}}" { send-keys -M } { copy-mode -H ; send-keys -X select-word ; run-shell -d 0.3 ; send-keys -X copy-pipe-and-cancel }
bind-key    -T root         TripleClick1Pane     select-pane -t = \; if-shell -F "#{||:#{pane_in_mode},#{mouse_any_flag}}" { send-keys -M } { copy-mode -H ; send-keys -X select-line ; run-shell -d 0.3 ; send-keys -X copy-pipe-and-cancel }

vi モードのデフォルトでは Enter にコピー機能が割り当てられていて、コマンドは copy-pipe-and-cancel となっています。 キーバインドを上書きして copy-pipe に変更すれば、コピーモードから抜けないようになります。

プラグイン tmux-yank について

コピー機能は OS 特有の対応が必要な場合があります。

現在は不要になりましたが、 tmux 2.6 以前は macOS では reattach-to-user-namespace が必要で、 これを使うようなキーバインドを設定する必要がありました。 Linux では xsel や xclip を使う、 WSL では clip.exe を使うなど OS によって異なります。

tmux-yank はこの問題にまとめて対処するプラグインです。 インストールすると、使用している環境に合わせたコマンドでいくつかのキーバインドが追加されます。

このプラグインにも copy-pipe に変更する方法が用意されていて、記事冒頭に記載の方法で変更できます。

参考にした記事

• tmux 3.0でコピーモードの設定を行う - りんごとバナナとエンジニア

frozen だが deprecated とは書かれていない

2016 年の時点で「このパッケージはフリーズし、今後修正や機能追加はしない」と宣言されています。

ドキュメントには以下のように書かれていて

The testing/quick package is frozen and is not accepting new features.

https://pkg.go.dev/testing/quick

ソースの blame を見ると 2016/10 のコミットで追加されたようです。関連 issue は golang/go#15557 です。

その後 2017 年に出された 機能追加プロポーザルの issue を読むと、 サードパーティのライブラリの利用が示唆されるなど、開発の方針がわかります。

比較のため他のパッケージを見ると、 2020 年に廃止となった x/lint は deprecated and frozen と書かれています¹。

サードパーティのライブラリはどんなものがある？

testing/quick のようなランダム値によるテスト手法は Property based testing と呼ばれています。

golang で Property based testing の実践をサポートするライブラリとしては leanovate/gopter と flyingmutant/rapid が有名なようです。

参考記事

• gopterを使ってGoでProperty Based Testingする - Qiita
• Goにproperty based testingを布教したい - These Walls

参照: https://nodejs.org/dist/latest-v16.x/docs/api/cli.html

node コマンドのオプション

使うオプションは基本的にこの 3 つです。おおむね -p と -r でなんとかなりそうです。

• -e, --eval "script” … スクリプトを実行
• -p, --print "script" … スクリプトを実行し、結果を標準出力に渡す
• -r, --require module … モジュールをロード

例: 標準入力を文字列置換する

標準入力を受け取り、先頭の空白を除き、標準出力に渡す例です。

cat FILE.txt | node -r fs -p 'fs.readFileSync(0, "utf-8").replaceAll(/^\s+/gm, "")'

標準入力だけでなく、ファイル名も指定できます。

node -r fs -p 'fs.readFileSync("FILE.txt", "utf-8").replaceAll(/^\s+/gm, "")'

ポイントは以下の通りです。

• -r fs … 標準入力を読むのに fs モジュールを使います。
• fs.readFileSync(0, "utf-8") … 第一引数に 0 を渡すと標準入力を読むことができます¹。第二引数に encoding を指定すると string が得られます (指定しないと Buffer 型になります)。
• replaceAll に正規表現を指定する場合は g フラグが必須です²。
• 正規表現フラグ m で各行にマッチするようになります。ここでは ^\s+ を各行の行頭にマッチさせるため指定しています³。

注意: オプションの順序

• node -r fs -p "script" OK
• node -p "script" -r fs OK
• node -p -r fs "script" これは失敗します。 "script" が -p オプションの引数であるためだと思われます。

これを使って、上から順に「現在地取得」→「一致するテキスト」→「if」と並べ、条件は「任意の値」にする。

以下は、現在地が特定の住所ならば Sesame を実行、そうでなければ確認ダイアログを出すという例。

条件の「任意の値」とは not empty という意味らしい。擬似コードで表すとこのようなイメージ:

position = getPosition()
matched = position.find("東京都千代田区千代田1-1")
if (matched != "")
// 以下略

• Cmd + Option + G … タブグループ化 / タブグループ解除
• Cmd + T … タブを右隣に開く
  • 本来の「新規タブ」と異なり、現在タブがグループの場合はグループにタブが追加される。
• Cmd + Option + T … 本来の「新規タブ」

macOS では、システム設定でキーボードショートカットを任意のメニュー項目に割り当てることができる。以下のように設定することで上記の操作が実現可能¹。

タブグループとは関係ないが、このスクショでは以下の設定もある。

• Cmd + D … タブ複製
• Cmd + Option + D … ブックマークする
• All Applications: ウィンドウ最小化をデフォルトの Cmd + M から Cmd + Option + M に変更

Windows の場合、このようなカスタマイズは のどか や AutoHotKey のようなツールで実現できると思われる。 (未検証)

環境変数を追加する。

set -Ux COLORTERM 1

もしこれで直らなければシェルを再起動するか、以下 2 つのグローバル変数を消去する。

set -e __fish_ls_command
set -e __fish_ls_color_opt

あるいは athityakumar/colorls をインストールするとそちらが使われるようになる。

また、試していないが coreutils をインストールすることでも解消すると思われる。

補足

type ls で確認するとわかるが、 fish では ls コマンドは標準の関数でラップされており、 カラー化するオプションを追加してくれている。

https://github.com/fish-shell/fish-shell/blob/c16e30931b44628bccf2abc3082ddeb53e08971e/share/functions/ls.fish#L20-L47

分岐を見ると、特定の条件を満たした場合¹はカラー化オプションを決定するために

• ls --color=auto (GNU 系で有効)
• ls -G (macOS, BSD 系で有効)
• ls --color
• ls -F

の順で試行し、エラーにならなければそのオプションを採用するようだ。

しかし macOS Monterey でコマンドを実行してみると、 ls --color=auto はエラーにならないしカラーにもならない。

macOS Monterey の ls --color=auto は、 stdout が tty でありかつ COLORTERM 環境変数が設定されている場合のみカラー表示を行うためだ²。

つまり環境変数 COLORTERM を定義しておけばカラー表示されるようになる。値はなんでも良いようだ。

さらに補足

ls --color=auto は以前の macOS ではエラーになっていた。 (おそらく Big Sur まで？)

❯ ls --color=auto
ls: illegal option -- -
usage: ls [-@ABCFGHLOPRSTUWabcdefghiklmnopqrstuwx1%] [file ...]

このため以前までは、前述のラッパー関数の判定で ls -G が実際に実行されるコマンドになっていた。

man を見るとこのような違いがある。 BSD の実装から独自実装に変わったのだろうか。これについては検索しても情報が見つけられなかった。

Big Sur:

LS(1)                     BSD General Commands Manual                    LS(1)

NAME
     ls -- list directory contents

SYNOPSIS
     ls [-ABCFGHLOPRSTUW@abcdefghiklmnopqrstuwx1%] [file ...]

... (略)

BSD                              May 19, 2002                              BSD

Monterey:

LS(1)                            General Commands Manual                            LS(1)

NAME
     ls – list directory contents

SYNOPSIS
     ls [-@ABCFGHILOPRSTUWabcdefghiklmnopqrstuvwxy1%,] [--color=when] [-D format]
        [file ...]

... (略)

macOS 12.0                           August 31, 2020                           macOS 12.0

追記: Big Sur は Intel Mac で、 Monterey は M1 Mac で使用していた。

例えば git status で変更のあるファイルを一覧し、特定のファイルだけをコミットしたいとする。

git status -sb
# ## master...origin/master
#  M dotconfig/karabiner/karabiner.json
#  M init.sh
# ?? dotconfig/flutter/

いくつか変更があるが init.sh だけをコミットしたい。 git diff で差分確認してから git add を行う。

git diff init.sh
# diff --git a/init.sh b/init.sh
# (snip)

git add init.sh

ここで git add を入力してから Alt + ↑ を押すと init.sh が補完される。 (もう一度押すと diff に変わる)

この例だとファイル名が短いのであまりメリットはないが、長いパスを指定する時などに便利。

セットアップの手順に flutter doctor --android-licenses で正しく出力されることを確認する項目があるが、ここでエラーが発生した。

❯ flutter doctor --android-licenses
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
        ... 5 more

Android Studio で設定を行うと解消した。

• Android Studio で設定を開き Android SDK を選択
• SDK Tools タブを選択
• Android SDK Command-line tools をチェックし Apply を実行

参考: https://stackoverflow.com/questions/61993738/flutter-doctor-android-licenses-gives-a-java-error/66363044

エミュレータの選択でエラー

Chrome でのデバッグはできるが、デバイスから Create Android emulator を選ぶと No device definitions are available というエラーが発生するが、そもそも create する必要はない。

リストに既に Pixel_3a というエミュレータがあり、それを使えば良い。

セキュリティソフトのファイアウォール機能を切っておかないと emulator が動作しない

セキュリティソフトの種類にもよるが、自分の環境ではオフにする必要があった。

flutter_driver を追加した際に incompatible エラーが発生する

ERR : Because every version of flutter_driver from sdk depends on args 1.6.0 and flutter_launcher_icons 0.9.0 depends on args 2.0.0, flutter_driver from sdk is incompatible with flutter_launcher_icons 0.9.0.
And because no versions of flutter_launcher_icons match >0.9.0 <0.10.0, flutter_driver from sdk is incompatible with flutter_launcher_icons ^0.9.0.
So, because hello_world depends on both flutter_launcher_icons ^0.9.0 and flutter_driver any from sdk, version solving failed.

pubspec.yaml で flutter_launcher_icons を古いバージョンに変更して解消した。

- flutter_launcher_icons: ^0.9.0
+ flutter_launcher_icons: ^0.8.1

参考: https://github.com/fluttercommunity/flutter_launcher_icons/issues/241

エラー Unexpected text 'late' が発生する

Unexpected text 'late'.
Try removing the text.dart(unexpected_token)

dart sdk のバージョンが古いことが原因。 late キーワードは dart 2.12.0 以降で使える。 pubspec.yaml でバージョン指定を変更すれば良い。

 environment:
-  sdk: ">=2.7.0 <3.0.0"
+  sdk: ">=2.12.0 <3.0.0"

参考: https://stackoverflow.com/questions/67113942/dart-unexpected-text-late

これを行うと以下のエラーが出るようになるが、これは null-safe ではないコードが残っているため。

エラー:

The non-nullable local variable 'driver' must be assigned before it can be used.
Try giving it an initializer expression, or ensure that it's assigned on every execution path.dart(not_assigned_potentially_non_nullable_local_variable)

以下のように、宣言時に初期化していないメンバー変数がある場合に発生する。これは late を追加すると解消する。

-    FlutterDriver driver;
+    late FlutterDriver driver;

https://github.com/tmux-plugins/tpm

tpm の導入後、 .tmux.conf に使いたいプラグインを記述して prefix + I を押すとプラグインをインストール・ロードしてくれる。

プラグインのリストもあり、いくつかインストールしてみた。

https://github.com/tmux-plugins/list

私の設定ファイルは GitHub に置いてある。

tmux-sensible, tmux-yank

自分は .tmux.conf をほとんどカスタムしておらず、基本的な設定とクリップボード連携の設定をしていたくらいだったが、プラグインを導入することでその記述すら不要になった。

tmux-sensible はいくつかの基本的な設定に、多くのユーザにとって快適になるようなデフォルト値を提供してくれる (ユーザが変更している場合はそれを上書きしないよう配慮されている) 。

https://github.com/tmux-plugins/tmux-sensible

tmux-yank はクリップボード連携の設定をしてくれる。

https://github.com/tmux-plugins/tmux-yank

tmux-prefix-highlight

ステータスラインに #{prefix_highlight} と記述すると prefix キーの状態が表示されるようになる。

https://github.com/tmux-plugins/tmux-prefix-highlight

tmux-urlview

現在の画面から URL を探し、ブラウザで開くプラグイン。 prefix + u で URL リストが開き、選ぶとブラウザが立ち上がる。

https://github.com/tmux-plugins/tmux-urlview

extrakto

現在の画面から単語を探し、コマンドラインにペーストできるプラグイン。 prefix + Tab で単語リストのポップアップが開き、リストから fzf で絞り込んで選択する。

mac で使う場合は最新の bash を入れておく必要がある。

https://github.com/laktak/extrakto

vim プラグイン: tmuxline.vim

tmux ではなく vim プラグインだが、実行すると vim のステータスラインを元に tmux のステータスライン設定を生成してくれる。

https://github.com/edkolev/tmuxline.vim

プラグインにより用意されるキーバインド

以上のプラグインが用意してくれるキーバインドをリストしておく。

• tpm
  • prefix + I
    • Installs new plugins from GitHub or any other git repository
    • Refreshes TMUX environment
  • prefix + U … updates plugin(s)
  • prefix + M-u … remove/uninstall plugins not on the plugin list
• urlview
  • prefix + u … listing all urls on bottom pane
• extrakto
  • prefix + Tab … start extrakto

プラグインが有効にならない場合は

プラグインをインストールしたのに有効にならない時は、エラーになっていないかを確認する。

プラグインファイルは実行ファイルになっており、以下のように実行するとエラーメッセージを確認できる。

❯ ~/.tmux/plugins/extrakto/extrakto.tmux
/Users/p563/.tmux/plugins/extrakto/extrakto.tmux: line 10: ${extrakto_key,,}: bad substitution

上記のエラーは mac の古い bash を使っているために発生しているエラーで、 homebrew で bash をインストールすると解消する

参考

tmux プラグインの仕組みについてはこちらの記事が参考になった。

tmuxを使いこなす / プラグイン開発で機能を拡張 | DevelopersIO

• j, k で選択
• l, h でツリーの開閉
• l でファイルオープン
• Space でファイルプレビュー (これは標準機能かも)

ある時これが使えなくなったので調べたところ、以下の二つを設定することで解消した。

• "workbench.list.keyboardNavigation": "simple"
• "workbench.list.automaticKeyboardNavigation": false

参考: Navigation in the explorer pane vim way (j , k) doesn’t work after window reload

各設定の意味は以下の通り。

workbench.list.keyboardNavigation

Controls the keyboard navigation style for lists and trees in the workbench. Can be simple, highlight and filter.

• simple: Simple keyboard navigation focuses elements which match the keyboard input. Matching is done only on prefixes.
• highlight: Highlight keyboard navigation highlights elements which match the keyboard input. Further up and down navigation will traverse only the highlighted elements.
• filter: Filter keyboard navigation will filter out and hide all the elements which do not match the keyboard input.

workbench.list.automaticKeyboardNavigation

Controls whether keyboard navigation in lists and trees is automatically triggered simply by typing. If set to false, keyboard navigation is only triggered when executing the list.toggleKeyboardNavigation command, for which you can assign a keyboard shortcut.

https://code.visualstudio.com/docs/getstarted/settings

https://store.google.com/jp/product/nest_wifi

スマホのアプリが良く、セットアップがとても簡単だった。 Google Home アプリまたは Google Wifi アプリから設定するのだが、最初に繋ぐときはアプリが勝手にやってくれるため SSID などの入力は必要ない (Bluetooth あるいはスマホを Wifi AP にして接続するらしい)。

電源の抜き差しを何度か行った際にインターネット接続がなかなか復帰しないことがあったが、それ以外は特に問題なく使えている。 LAN 側の Ethernet ポートが一個しかない点は少し不便。

つまづいたのが、 2.4GHz と 5GHz が同じ SSID なので 2.4GHz のみ対応のスマート照明に 5GHz で繋がっているスマホから接続できず、セットアップを行えないという問題。なお照明は +Style というメーカーの製品 である。

2.4GHz と 5GHz の SSID を分けるのは Nest Wifi ではできないらしい。スマホが 2.4GHz だけに繋がれば良いのだが、今持っているものはそのように設定できない。 2.4GHz のみ対応の古い Fire HD タブレットがあったが、これは Amazon のカスタム OS が入っており +Style のアプリを入れるのがやや面倒だ。

+Style のアプリにはスマホを一時的に Wifi AP にしてセットアップする互換モードという方式が用意されている。今回はこれを使うことでうまくいったが、このような機能がない製品の場合はいくつか対応手段がある。

1. 2.4GHz のみ対応の古いスマホを買う
2. 2.4GHz で接続される程度に家から離れてからセットアップする
3. Nest Wifi を停止した状態でスマホを Wifi AP にし、 Nest Wifi で使う SSID/WPA キーと同じものにしてデバイスを接続・セットアップする

2 の家から離れるというのは、 5GHz は遠くまで届かないが 2.4GHz は低周波で遠くまで届く特性があり、両方の周波数に対応しているスマホは 5GHz に優先して接続するが、ルーターから離れて電波が減衰すると 2.4GHz にフォールバックするのでその状態で IoT デバイスのセットアップをする、ということらしい。

参考: How do force Google Wifi to 2.4 Ghz only? - Google Nest Community

• dirh 履歴を表示
• cdh 履歴を素早く操作するためのプロンプトを表示
• prevd 履歴を戻る。 Alt+← に対応
• nextd 履歴を進む。 Alt+→ に対応

Introduction — fish-shell 3.2.1 documentation

実際によく使うのは履歴を戻る Alt+← と、 cdh<Space><Tab> で補完候補から戻り先を選ぶというもの。

補足: pushd について

どのシェルにもあるビルトインコマンドとして pushd, popd があり、履歴を残して cd するコマンドである。 pushd <path/to/dir> で現在のパスがスタックに積まれた上で移動し、 popd でスタックからパスが取り出されてそこに移動する。

zsh では AUTO_PUSHD を設定すると cd した時に自動でパスがスタックに積まれるようになる。

置換前

// $ cat config.json
{
  "TargetCapacity": 1,
  "Type": "request",
  "TagSpecifications": [
    {
      "ResourceType": "spot-fleet-request",
      "Tags": [
        {
          "Key": "Name",
          "Value": "$EC2_INSTANCE_NAME"
        }
      ]
    }
  ],
  // ...
}

環境変数を設定し、テキストを envsubst に渡すと置換される。

// $ export EC2_INSTANCE_NAME=my-instance
// $ cat config.json | envsubst
{
  "TargetCapacity": 1,
  "Type": "request",
  "TagSpecifications": [
    {
      "ResourceType": "spot-fleet-request",
      "Tags": [
        {
          "Key": "Name",
          "Value": "my-instance"
        }
      ]
    }
  ],
  // ...
}

GNU gettext というパッケージに含まれており、割と多くのディストリで標準で使えるようだ。

以前は sed で置換するとか、 JSON ファイルなら jq でセットするなどしていたが、単純な処理ならこちらの方が簡単だ。

The primary feature is the Transform option, which transform proto.Message types into a Message map that is suitable for cmp to introspect upon. All other options in this package must be used in conjunction with Transform.

before

	if diff := cmp.Diff(want, got); diff != "" {
		t.Errorf("mismatch (-want +got):\n%s", diff)
	}

after

	if diff := cmp.Diff(want, got, protocmp.Transform()); diff != "" {
		t.Errorf("mismatch (-want +got):\n%s", diff)
	}

サンプルコードは https://pkg.go.dev/github.com/google/go-cmp/cmp?tab=doc#example-Diff-Testing を参照。

プロジェクト作成

参考: https://create-react-app.dev/docs/getting-started#creating-a-typescript-app

npx create-react-app myapp --template typescript

prettier 追加

prettier と eslint の設定を追加する。

yarn add -D eslint-config-prettier eslint-plugin-prettier prettier

eslint-config-prettier は、一部ルールが prettier と eslint で重複するため、片方をオフにするためのパッケージ。

eslintConfig 修正

元の react-app に prettier/recommended を追加。

デフォルト値が https://prettier.io/docs/en/options.html に記載されているので、変更したいものは設定する。

   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "plugin:prettier/recommended"
+    ]
+  },
+  "prettier": {
+    "trailingComma": "all",
+    "semi": false,
+    "singleQuote": true,
+    "jsxSingleQuote": true
   },

script 追加

lint (書式チェック) と format (書式修正) を追加する。

-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src --color",
+    "format": "prettier --write ./src"

brew ではインストールしないこと。 (参照: nvm/README.md at master · nvm-sh/nvm )

git clone https://github.com/nvm-sh/nvm.git .nvm

nvm で node をインストールする

nvm install node && nvm alias default node

yarn は brew install で入れる npm で入れる

#brew install yarn --ignore-dependencies

npm i -g yarn

fish shell の場合

FabioAntunes/fish-nvm: nvm wrapper for fish-shell をインストールする。

2 回ある。

1. reactive variables が変更され、ロードが始まったタイミング
   • result.loading === true になる。
2. ロードが終わったタイミング
   • result.loading === false になる。

apollo 結果がキャッシュされている時に、リアクティブなプロパティを変更しても反映されない

fetchPolicy を変更すると動作する。

• fetchPolicy: "cache-and-network" … OK
• fetchPolicy: "network-only" … OK
• fetchPolicy: "cache-first" … NG

fetchPolicy のデフォルト値は cache-first である。 (参考: apollo-client/watchQueryOptions.ts at 7a2067e33f748372aa6342ef0a097679e3239d29 · apollographql/apollo-client )

参考: Reactive Variables with ‘cache-first’ not working in new version · Issue #138 · vuejs/vue-apollo