JavaScript
Node.js
プログラミング
VisualStudioCode
デバッグツール

インストーラーを使わずにVSCodeでJavaScriptのデバッグ可能な環境を作る

前提

以下の内容は、職場の制限などでWindowsの権限が足りず、アプリインストールなどに都度都度管理者権限を要求されるような状況を想定しています。もちろん普通に権限がある状況でも使えます。想定OSはWindowsです。
また、一部の設定などには変更するために権限が必要だったりしますが、そのあたりは適宜なんとかしてください(ごめんなさい)。あくまで「勝手なアプリインストールは禁止!」というような職場を想定しています(まぁ開発やるって職場でそれはどうかとおもいますけどね、それはまた別の話ということで)。

Visual Studio Codeの入手と導入

VSCodeの入手

Visual Studio Code(略称:VSCode)を入手します。VSCodeにはインストーラー形式のものと、インストール不要なものがありますが、ここではインストール不要なものを入手して自分のパソコンで使えるようにします。
VSCodeは下記のサイトからダウンロード可能です。

ページを開くと「Download for Windows」というボタンのような部分があるので、この右側をクリック。インストールしたいOSと32bit、64bitどちらかを選択します。とりあえず表示される中に対象がなければ、選択肢下部の「Other downloads」を選択して対象を探してください。なお、ダウンロードするのは「Stable」のほうが良いと思います(安定したバージョンってことです)。
VScode1.png

対象OSと32bit、64bitの選択肢が見つかったら、その中の「Zip」と書かれたリンクからファイルをダウンロードします。これは、インストール不要なVSCodeのファイル一式をZip形式で圧縮したものです。これを自分のPCに展開すればVSCodeはとりあえず使えるようになります。

VSCodeの導入

ここまでの手順でZipファイルがダウンロードされるので、その前にVSCodeを置く場所を作りましょう。自分のPCの適当なフォルダーを決めてください。なければ適当に作ってもらって結構です。
そこに、ダウンロードしたZipファイル一式を展開してください。Zipファイルは「VSCode-win32-x64-1.26.1.zip」みたいな名称でダウンロードされるとおもいます。

node.jsの入手と導入

node.jsの入手

次に、node.jsをダウンロードします。普通にnode.jsのサイトに行くとトップページにダウンロードリンクがありますが、それはインストーラー形式になっていますので、下記のリンク、またはnode.jsトップページのダウンロードボタン下部にある「他のバージョン」リンクからZip形式のファイルをダウンロードします。

ダウンロードサイトには「LTS(推奨版)」と「最新版」がありますが、とりあえず推奨版にしておきましょう。その中の選択肢から「Windows Binary(.zip)」というところにあるリンクから、32bit、64bitを選んでファイルをダウンロードしてください。

VScode2.png

node.jsの導入

node.jsのZipファイルがダウンロードできたら、これもVSCodeと同様に置き場所を決めてください。ここでは仮に、Cドライブの「C:\PrivateApps\node」にします。フォルダーが用意できたら、その中にnode.jsのZipファイルを展開してください。

Zipファイルが展開されたら、次はWindowsにnode.exeの場所を教えるために環境変数「PATH」の設定を行います。Windowsの環境変数設定画面を開き、末尾に「C:\PrivateApps\node\」を追加してください。すでにあるパス文字列の後ろにこの設定を追記する場合、前のパス文字列のあとにセミコロンを打ち、それに続いて上記のパスを追記します。

この時点で、コマンドプロンプトを開きましょう。続いて

node --version

と打ち込んでみてください。node.jsのバージョン番号が表示されれば設定完了です。もしエラーが出るようならば、環境変数の設定を間違えているか、環境変数がWindowsに認識されていない可能性があります。一度Windowsを再起動してみるなどしてみてください(環境変数設定の方法等について分からない方は別途調べてください)。

このあとの手順

とりあえずここまでの手順で作業は完了です。あとは、実際にVSCodeを使ってJavaScriptのコードを書き、デバッグモードで実行してみてください。このあたり、VSCode自体の使い方、手順についてはここでの記載は割愛させていただきます。

VScode3.png