はじめに
VS Code拡張「Japanese Input for Claude Code」のv1.7.2をリリースしました。
今回の更新で、macOSユーザーが設定保存時に必ずクラッシュするという重大バグを修正。さらにv1.7.0/v1.7.1で追加された機能も含め、3バージョン分の改善内容をまとめてご紹介します。
📦 更新内容サマリー
| バージョン | リリース日 | 主な変更 |
|---|---|---|
| v1.7.2 | 2025-12-25 | 🐛 macOS設定保存クラッシュ修正 |
| v1.7.1 | 2025-12-24 | ✨ Guardrails Import/Export機能 |
| v1.7.0 | 2025-12-24 | 🏗️ アーキテクチャ大規模リファクタリング |
🐛 v1.7.2: macOS設定保存バグの完全修正
問題の詳細
macOS環境で設定タブの「保存」ボタンをクリックすると、100%の確率で以下のエラーが発生していました：
TypeError: Cannot read property 'value' of null
原因: WebViewのプラットフォーム差異
VS CodeのWebView APIは、各OSで異なるレンダリングエンジンを使用しています：
- Windows: Edge WebView2 (Chromium)
- macOS: WKWebView (WebKit)
macOSのWKWebViewは非同期的にDOMを初期化するため、ラジオボタンの:checked状態が即座に確定しません。
失敗していたコード
// ❌ macOSでnullが返る
const selectedValue = document.querySelector(
'input[name="someRadio"]:checked'
)?.value;
解決策: 3段階フォールバック戦略
新たにgetRadioValueヘルパー関数を実装し、堅牢性を確保しました：
function getRadioValue(name: string, defaultValue: string): string {
// 1️⃣ 理想: :checkedから値を取得
const selected = document.querySelector(`input[name="${name}"]:checked`);
if (selected && 'value' in selected) {
return (selected as HTMLInputElement).value;
}
// 2️⃣ 次善: 最初のラジオボタンのvalue属性から取得
const firstOption = document.querySelector(`input[name="${name}"]`);
if (firstOption && 'value' in firstOption) {
return (firstOption as HTMLInputElement).value;
}
// 3️⃣ 最終: デフォルト値を返す
return defaultValue;
}
この実装により、どのタイミングで保存ボタンが押されてもクラッシュしないようになりました。
影響範囲
この修正により、以下の機能がmacOSで正常動作するようになりました：
- ✅ 設定保存（履歴件数、ショートカットなど）
- ✅ Guardrails設定の保存・編集
- ✅ マルチAI切り替え設定
- ✅ クリップボード経由のImport/Export（v1.7.1）
✨ v1.7.1: Guardrails Import/Export機能
概要
AI別のGuardrails設定をJSON形式でクリップボード経由で共有できるようになりました。
使い方
エクスポート
- Guardrails設定タブを開く
- 「エクスポート」ボタンをクリック
- クリップボードにJSON形式でコピーされる
{
"claudeCode": {
"prefix": "# Role: Implementation Engineer\n# Standards: ...",
"suffix": ""
},
"openaiCodex": {
"prefix": "# Tech Lead Review\n# Focus: ...",
"suffix": ""
}
}
インポート
- JSON形式のGuardrails設定をクリップボードにコピー
- 「インポート」ボタンをクリック
- 既存の設定に上書き保存
ユースケース
- 🤝 チームメンバー間でAI設定を共有
- 📦 プロジェクトごとの設定をバックアップ
- 🔄 開発環境間での設定同期
🏗️ v1.7.0: アーキテクチャ大規模リファクタリング
Coordinatorパターンへの移行
モノリシックだったinputModalProvider.tsを3つのコンポーネントに分離：
Before:
inputModalProvider.ts (1500+ lines)
After:
├── viewRenderer.ts // UI描画ロジック
├── scriptGenerator.ts // WebViewスクリプト生成
└── messageHandler.ts // メッセージハンドリング
メリット
- 保守性向上: 各コンポーネントが単一責任を持つ
- テスト容易性: 個別にユニットテスト可能
- 拡張性: 新機能追加時の影響範囲が限定的
追加機能
Toast通知
設定保存時に視覚的フィードバックを表示：
// 成功時
vscode.window.showInformationMessage('設定を保存しました');
// 失敗時
vscode.window.showErrorMessage('設定の保存に失敗しました');
preferTerminalMode設定
Claude CodeのTerminalモード優先設定を追加：
{
"cc-input-jp.preferTerminalMode": true
}
🔍 技術的考察: VS Code拡張開発のベストプラクティス
1. クロスプラットフォーム検証の重要性
今回のバグから学んだ教訓：
// 開発時に各プラットフォームでテスト
const platform = process.platform; // 'darwin' | 'win32' | 'linux'
if (platform === 'darwin') {
// macOS固有の挙動を検証
}
2. Defensive Programming
DOM操作では常にnullチェックとフォールバックを用意する：
// ❌ Bad
const value = element.value;
// ✅ Good
const value = element?.value ?? defaultValue;
3. 型安全性の徹底
WebViewメッセージングには型定義を活用：
interface SaveSettingsMessage {
command: 'saveSettings';
settings: {
modeToggle: 'shift-tab' | 'alt-m';
sendSelectionShortcut: 'ctrl-shift-q' | 'ctrl-shift-s' | 'cmd-shift-a';
};
}
📊 マルチAIワークフローへの影響
Guardrails機能の重要性
この拡張機能は、複数のAIプロバイダーを切り替える設計です：
- Claude Code（実装）
- OpenAI Codex（レビュー）
- Gemini Code Assist（分析）
- VS Code Chat（汎用）
各AIに適切なGuardrailsを設定することで、役割に応じた応答品質を確保できます。
ワークフロー例
v1.7.2の修正により、macOSでもこの協調ワークフローが完全に機能するようになりました。
🎯 まとめ
修正内容
- ✅ macOS環境での設定保存クラッシュを完全修正
- ✅ Guardrails Import/Export機能でチーム連携強化
- ✅ Coordinatorパターンで保守性・拡張性向上