daily-log
2026年1月18日の開発日記
VS CodeでCopilotのコミットメッセージ生成をショートカットで呼び出したいと思い調査したところ、既知のバグに遭遇。また、tax-assistantのCF Viewerに仕訳のチェックボックス機能を実装した際、Vue.js 3のSet型リアクティビティに関するハマりポイントがあった。
今日やったこと
1. VS CodeのCopilotコミットメッセージ生成ショートカット問題
ソース管理パネルにある「コミットメッセージの自動生成」ボタン（スパークルアイコン）をキーボードショートカットで呼び出したかった。毎回マウスクリックするのが面倒だったため。
主な成果:
Ctrl+K Gなどの競合しにくいショートカットパターンを調査github.copilot.git.generateCommitMessageにキーバインドを設定- 設定後、ボタンにホバーするとショートカットが表示されるようになった
- しかし、実際にショートカットを押しても動作しない
原因: VS CodeのGitHub Issue（#204301, #210346）で報告されている既知のバグ。VS Codeチームが「bug」ラベルを付け、再現確認済みのステータスにしている。修正時期は不明。
詳細: VS CodeのCopilotコミットメッセージ生成にショートカットが効かない問題【既知のバグ】
2. CF Viewer 仕訳チェックボックス機能の実装
キャッシュ・フロー計算書ビューアに、仕訳を個別に選択/解除できるチェックボックス機能を追加した。選択した仕訳だけを精算表に反映させることで、学習時に「この仕訳を入れたらどうなるか」を確認できるようになる。
主な成果:
- Vue.js 3 Composition APIでのチェックボックス機能実装
- IDベースの仕訳管理（
checkedEntryIdsをSetで管理） - 精算表との連動計算（
filteredEntriescomputed を使用） - 一括チェック/解除ボタンの追加
ハマりポイント:
Vue.js 3でSetをrefで管理する場合、set.add() や set.delete() を呼んでもリアクティビティが発動しない。新しいSetを作成してrefに再代入するパターンが必要。
// NG: 変更が検知されない
checkedEntryIds.value.delete(entryId);
// OK: 再代入で検知される
const next = new Set(checkedEntryIds.value);
next.delete(entryId);
checkedEntryIds.value = next;
詳細: Vue.js 3でSet型のリアクティビティを確保する方法【CF Viewer チェックボックス機能】
今日の学び
- VS Codeの拡張機能コマンドはキーバインドが効かないケースがある - Issue報告があるか確認してから深追いする
- Vue.js 3のSetリアクティビティは再代入パターンで解決 -
reactive()を使う方法もあるが、refと統一した方がシンプル - 競合しにくいショートカットパターン:
Ctrl+K X形式（コードシーケンス）かCtrl+Shift+Alt+X形式（3修飾キー）