WebアプリをVS Codeで開発していると、**「コードは間違っていないはずなのに、ブラウザに反映されない」**という経験はありませんか？
実際に私もこの現象に悩まされましたが、調べていくと原因は単純なことが多いとわかりました。
この記事では、その対処法を2つのステップで紹介します。
1. 本当に正しいファイルを編集しているか？
まず最初に確認すべきは 「自分が修正したコードが、実際に動作しているアプリのコードと一致しているか？」 です。
よくあるパターン：
- 同じような名前のHTMLやCSSファイルが複数あり、別のファイルを編集していた
- UIを直したつもりが、開発環境で読み込まれているのはキャッシュ済みの別ファイルだった
確認方法
- わざと目立つUI変更を入れてみる（例：ボタンの色を赤にする）
- ブラウザでリロードして、即座に変更が出るか確認
これで「編集しているファイルが正しいかどうか」がすぐわかります。
2. VS Code Server をリフレッシュする
Remote-SSH や VPS 上で開発している場合、VS Code Server 側のキャッシュや拡張が壊れているせいで変更が反映されないことがあります。
この場合はサーバー側の VS Code Server を再インストールして解決します。
コマンド例
rm -rf ~/.vscode-server
これでリモートにある VS Code Server が削除され、再接続時に自動的にインストールし直されます。
結果として壊れていたキャッシュや拡張もリセットされ、コード変更が反映されるようになります。
まとめ
Webアプリのコード変更が反映されないときは、焦る前に以下の2つをチェックしましょう。
- 別のファイルを編集していないか？
- 意図的にUIを大きく変えて確認
- VS Code Server を再インストール
rm -rf ~/.vscode-serverでリセット
多くの場合、この2つで解決できます。
シンプルですが、開発中の「変更が反映されない問題」に遭遇したときのチェックリストとして覚えておくと便利です。
コメント