はじめに
こんにちは！デジタルイノベーション部の服部です。
本記事では、IT初心者がVSCodeのエラーをインターネットの力を借りて解決した体験を紹介します。
目的
- 同じエラーになった方へ解決策を提示したい
- 新卒・IT初心者にもわかりやすい・理解しやすい記事を書きたい
環境
使用端末:MacBook Pro
macOS:Sonoma 14.6.1
VScode : 1.85.1 (Universal)
現象
拡張機能を更新しようとしたとき、VSCodeで次のようにエラーが出ました。
XHR failed on VSCode
仕事で必要な拡張機能が更新できずに使えない状態になり、 急ぎ当該エラーについて調査しました。
XHRとは
まずはエラーにも出ている"XHR"について調べました。
- XHRとは
XHLHttpRequest(XHR)は、サーバーと更新するために使用されるWeb APIのこと。 ページ全体を更新することなく、データの受取が可能です。ユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。 XMLだけでなく、あらゆる種類のデータを受け取るために使用することができます。
<引用：XMLHttpRequest - Web API | MDN >
簡単にまとめると、HTTPリクエストを送信するためのWeb APIです。 このWeb API上でエラーが起こっていたんでしょうか。。。
解決策
エラーの解決は以下で確認を行いました。
- VSCodeのアップデート確認
- VScodeの再インストール
- VSCodeのHttp:Proxyの設定変更
- Proxy
- Proxy Strict SSL
- Proxy Support しかしインターネットで出ている解決策をいくら試しても問題は解決できませんでした。
そのとき、何度も出てきていた"プロキシ"というワードが気になり、検索するうちにWi-Fiに関係するものだと知りました。
どうやら参考にしていたtechblog系の解決策も環境がWindowsのもので、Macでのプロキシ設定の変更箇所に差異があったようです！
そしてたどり着いた画面がこちら！
むむ、何やら"自動プロキシ検出"がオフになっているじゃないか。
スライダーをオンにして、VScodeを再起動し確認してみると
エラーは解決していました！！！
検証のため、VScode上の設定変更箇所を初期設定同様に戻しても再びエラーが出ることはありませんでした。
原因
何が原因で今回のようなエラーが出てしまったのか。 解決策で出てきましたプロキシについても知識がなかったので調べてみました。
- プロキシとは
インターネットへの接続を代理で行うサーバーのこと。 利用者（クライアント）とWebサーバーの中間で動作し、両者間のアクセスを代理で行います。インターネットの接続を経由する役割をもつため、安全性の高い通信方法と言えるでしょう。
パソコンやモバイル端末は、ブラウザを経由してインターネットに接続します。しかし、セキュリティ対策の一環としてファイアウォールが設置されている場合、ネットワーク保護機能により、端末からインターネットへの接続ができません。そこで、社内LANとインターネットの間にプロキシを設置し、インターネット接続を代行させることで通信を実現します。
<引用：プロキシとは？主なメリットやデメリット、注意点から種類まで徹底解説 >
そもそもMac上でプロキシサーバーを検出しなかったことが原因で、通信の迂回路を作成できずに他ネットワークの使用が制限されていたんですね！
初学者向けのおすすめ拡張機能
内容を見ていただきありがとうざいました！
Tipsとして、私が使用しているオススメ拡張機能を紹介します！
- Code Spell Checker
- Prettier - Code formatter
- Git Graph
- Zenkaku
- Auto Rename Tag
それでは1つずつ紹介していきます！
1.Code Spell Checker
VSCode上の英語のスペルにおかしな箇所がないか表示してくれる拡張機能です。 タイポが多くなってしまう新人時代にも、莫大なコードを読み書きするベテランにも欠かせないツールです。
2.Prettier - Code formatter
経験の浅い開発者向けの拡張機能です。 コードの整形、最適な折り返し、インデントの自動調整、セミコロンの自動挿入などを備えています。 その他にも多彩な機能が詰め込まれている開発者のスターターパック格闘機能と言えるでしょう。
3.Git Graph
Git上の複雑なブランチをグラフ化していつどんなブランチを切ってプッシュしたのか見やすくなる拡張機能です。
4.Zenkaku
設定を常時オンにすることで、エディタ上の全角スペースを表示します。 入力ミスを可視化して、プログラムが動かない事態を予防します。
5.Auto Rename Tag
一方のタグを編集すると、自動で対のタグを編集できるようになります。 1個ずつ直す手間も無くなり、これでラクチンです！
感想
エラーを吐いたとき、同僚に聞くよりも先に検索することで、知識も増え、よりクリティカルな質問を投げかけられるようになると学びました！
検索して調べることで、すでに体系的にまとめられている記事を見ることもできますし、同じ状況で困っている方がどう解決しようとしたのか軌跡を見ることもできます。
途中Windowsの動作環境で原因を検索していた反省として、それぞれの環境にあった検索方法が必要と感じました。
何より初めてtechblogを書いてみて、こんなに楽しい執筆活動ができるなんて思ってもみませんでした！最後まで読んでいただきありがとうございます！
