Alt+矢印キーのブラウザバック横取りバグ
矢印キーでページ内ナビゲーション（前後の問題に移動など）を実装しているページが複数ある。これらのキーボードハンドラで preventDefault() を呼んでいたため、ブラウザ標準の Alt+← （戻る）/ Alt+→ （進む）まで潰されていた。
影響範囲
design-principles、diagram-types、tax-patterns、basic-english-850、cashflow-worksheet、consolidated-worksheet、cashflow-statement など、矢印キーハンドラを持つ全ページ。
修正内容
各ハンドラの先頭に修飾キーガードを追加した。
if (e.altKey || e.ctrlKey || e.metaKey) return
これで Alt+矢印はブラウザに素通しされる。Ctrl や Meta もガードしておくと、ブラウザのタブ切り替え等のショートカットとも干渉しない。
vitest によるリグレッションテスト
同じバグが今後追加されるページで再発しないように、テストを書いた。
設計方針
関数名に依存しない検出方式にした。handleKeydown のような特定の関数名を前提にすると、別名で書かれたハンドラを見逃す。代わりに <script> セクション内で以下の2条件が共存するファイルを対象にしている。
Arrow(Left|Right|Up|Down)にマッチする文字列があるpreventDefaultにマッチする文字列がある
該当ファイルそれぞれについて、.altKey のチェックが存在するかを検証する。
// keyboard-handler-guard.test.ts の核心部分
const hasArrowAndPreventDefault =
/Arrow(Left|Right|Up|Down)/.test(script) &&
/preventDefault/.test(script)
// 該当ファイルに altKey ガードがあるか
const hasAltGuard = /\.altKey/.test(script)
expect(hasAltGuard).toBe(true)
it.each で対象ファイルをパラメタライズしているので、新しいページが追加されても自動的にテスト対象になる。
Claude Code のフック設定（音声通知）
Claude Code の hooks 機能で、長いタスク完了時に音声通知を鳴らす設定を試した。
.claude/settings.local.json は Git 管理外（.gitignore 対象）なので、hooks の設定はマシンごとに入れる必要がある。現状、このプロジェクトでは hooks 設定はまだ入っていない。グローバル設定（~/.claude/settings.json）に入れるのが管理しやすそう。
モバイルアプリ開発の技術選定メモ
別記事（ネイティブ vs クロスプラットフォーム）に詳細を書いた。
要点だけまとめると:
- React Native ではなく Swift + Kotlin のネイティブ開発を選ぶ
- OS のメジャーアップデート直後に新 API が使える
- Swift と Kotlin は文法が似ているので移植コストが低い
- iOS を macOS で先に作り、Android への移植を Windows で行う流れ