今年も大学での非常勤の講義が始まりました。去年から開発環境はGitHub Codespaces（以下Codespaces）を使用しているのですが、本日トラブルが6件ほど頻発しました。Codespacesでdevコンテナを使っての環境構築したところ、環境構築後に、ブラウザで新規に開くページが開けなくなる問題に遭遇しました。9割以上の学生は問題なく完了していたのですが…。

何度リロードしても真っ白な画面のまま...。環境再構築をしてもうまくいかず…。しかし、あることに気づいて解決できたので、自分のための備忘録としてメモとして記録しておきます。

症状

GitHub Codespacesで新規に開くページの読み込みが行われない（タブは開くがポートErrorが発生）
画面が真っ白、またはポート転送のローディング中のまま止まる

原因はブラウザの自動翻訳機能

環境の再構築をしても駄目でお手上げかなと思っていましたが、6名全てが翻訳機能を使用していることに気が付きました。そこで、ブラウザの翻訳機能をOFFにしたところ、正常に動作することを発見しました!

Chrome、Edge、Firefoxなどの主要ブラウザには、英語のページを自動的に日本語に翻訳する機能がありますが、この機能がCodespacesの動作を妨げていたのです。

なぜ翻訳機能が問題を起こすのか?

以下のようなことが考えられると思いますが、多分（その1）と（その3）が該当するのでは無いかと思います。

その1. DOM構造の動的変更

ブラウザの翻訳機能は、Webページの構造(DOM)を書き換えて翻訳します。この書き換えがJavaScriptの動作に影響を与えます。

その2. WebSocketの初期化失敗

Codespacesはリアルタイム通信にWebSocketを使用していますが、翻訳によるDOM変更のタイミングで初期化処理が失敗してしまうことがあります。

その3. JavaScriptエラーの発生

翻訳機能がHTMLを変更した後、JavaScriptが元の要素を見つけられなくなり、エラーが発生することがあります。

解決方法

方法1　一時的に翻訳をオフにする

Chromeの場合であれば…

アドレスバー右端の翻訳アイコンをクリック
「翻訳しない」を選択

方法2　特定のサイトを除外リストに追加

Codespacesなど、特定のサイトで今後翻訳ツールを表示させたくない場合は以下の操作をします。

Chromeの設定方法

1 GitHub Codespacesのページで翻訳ツールバーが表示されたら、右端の【︙】(三点リーダー)をクリック

2【このサイトは翻訳しない】を選択

これで今後、このサイト(ドメイン)では翻訳ツールが表示されなくなります。

翻訳ツールバーはページで右クリックして【日本語に翻訳】を選択すると表示されます。

同じ問題が起こりやすいサービス

検索したところ、この問題はCodespacesだけでなく、以下のような高度なWebアプリケーションでも起こる可能性があるようです。

Google Docs / Sheets / Slides
Figma
Notion
Miro
その他のSPA(Single Page Application)ベースのサービス

おわりに

GitHub Codespacesが開けないという問題の意外な原因は、ブラウザの自動翻訳機能でした。以前からそういう話は聞いたことがあったのですが、原因による動作を考えると確かに発生するわなと思います。

翻訳機能は便利ですが、複雑なWebアプリケーションでは思わぬトラブルの原因になることがあります。開発ツールを使う際は、念のため翻訳機能を無効にしておくことが良さそうですね。

症状