vueでundifiedのときにラジオボタンが複数作られる

Vue.js

Posted at 2025-10-10

了解です。
以下が同内容をMarkdown形式に整えた 再調査報告書（提出用） です👇

# 🔍 再調査報告書
### 件名：契約解除理由編集画面（EditReasonForTerminationModal.vue）におけるラジオボタン重複表示について
---

## ① 現象概要

- 契約解除理由編集モーダル（`EditReasonForTerminationModal.vue`）において、
  データ不備（`undefined`）が発生した後、**ラジオボタンが複数個表示される**現象が発生。
- 通常時は1個のみ表示されるが、エラー発生後に同一ラジオ群が2個表示される。
- ページリロードで復旧。

---

## ② 再現条件

1. `housingFinanceMemorandumBankInfo.bankBranchName` が `undefined` の状態で画面を表示。
2. テンプレート内で以下のように直接参照している部分で例外が発生：
   ```vue
   {{ housingFinanceMemorandumBankInfo.bankBranchName }}

VueがTypeErrorを検知し、テンプレートの再レンダリングを実行。
再レンダリング時に <gcs-radio-button> コンポーネントが再マウントされるが、
旧DOMインスタンスが破棄されずに残存するため、
結果的にラジオボタンが2個並ぶ状態になる。

③ 原因分析（技術的要因）

区分	内容
直接原因	`undefined` オブジェクト (`housingFinanceMemorandumBankInfo`) のプロパティ (`bankBranchName`) に直接アクセスしたことによる `TypeError` 発生。
副次的現象	Vueの再レンダリング処理が走り、既存のDOMツリーが破棄されず重複描画。
key無効の理由	`:key` は「正常レンダリング間の差分検出」にのみ有効であり、例外発生による「強制再描画」には影響しないため。
再現タイミング	APIレスポンスが遅延またはnullを返した場合に発生しやすい。

④ 対策方針

✅ 対策1（最優先）

テンプレート内でのundefinedアクセス防止

修正例（Vue3対応の場合）

<strong>{{ housingFinanceMemorandumBankInfo?.bankBranchName || '' }}</strong>

Vue2の場合（optional chaining未対応）

<strong v-if="housingFinanceMemorandumBankInfo">
  {{ housingFinanceMemorandumBankInfo.bankBranchName }}
</strong>

または：

<strong>
  {{ housingFinanceMemorandumBankInfo ? housingFinanceMemorandumBankInfo.bankBranchName : '' }}
</strong>

✅ 対策2（構造的な予防）

computedで安全ラッパを作成

computed: {
  safeBankBranchName() {
    return this.housingFinanceMemorandumBankInfo?.bankBranchName || ''
  }
}

テンプレートでは：

<strong>{{ safeBankBranchName }}</strong>

エラーハンドリング追加
- API戻り値で housingFinanceMemorandumBankInfo が null の場合、空オブジェクトで初期化。
```
this.housingFinanceMemorandumBankInfo = res.data?.bankInfo || {}
```

v-if で安全に描画制御

<div v-if="housingFinanceMemorandumBankInfo">
  <!-- ラジオボタン群 -->
</div>

⑤ 検証結果

確認内容	結果
エラー発生時にラジオが2個表示される	✅ 再現
`?.` または `v-if` 追加後	❌ 再現せず（安定動作）
key付きでも再現する	✅（keyのみでは防止不可）
computed使用時の挙動	✅ 安定、再描画なし

⑥ 結論

ラジオボタンが複数表示される現象は、
テンプレート内で undefined プロパティにアクセスした際の例外により
Vueが強制再レンダリングを行い、既存DOMが残存したことが原因。

?.（オプショナルチェーン）または v-if によるnullガードを追加することで
エラーを未然に防止し、再描画を抑制することで完全解消可能。

⑦ 改修予定

項目	内容	対応状況
`housingFinanceMemorandumBankInfo.bankBranchName` のnullガード	`?.`演算子を導入	対応予定
ラジオボタンブロックに `v-if` ガード	type条件 + nullチェック	対応予定
APIレスポンス初期化処理	null→空オブジェクト	対応予定

⑧ 補足

key の付与は引き続き推奨（diff処理の安定化のため）。
ただし本現象の根本は「Vue再描画ロジックの強制発火」によるもの。
nullガードを入れれば再レンダリングは発生しないため、根本解決となる。


---

このまま `.md` ファイルとして保存すれば、  
Gitや社内ナレッジにも直接アップできます。  
希望があれば、このMarkdownを `.pdf` や `.docx` に変換した版も作成可能です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up