説明すること

学校のパソコンなどソフトのインストールが許可されていない状況下で、Visual Studio Code + Node.jsのポータブルな開発環境を用意する方法

Windows環境を想定

最初の準備

適当なフォルダを開いて、メニューの「表示」→「表示」から「ファイル拡張子」にチェックを入れる。拡張子はファイル名の一部なので、プログラミングする際に表示されていないと非常に分かりにくくなる。

空のUSBメモリをパソコンに挿し、使えるようにしておく。

Visual Studio Codeの導入

USBメモリの中に VSCode という空のフォルダを作っておく。

Visual Studio Codeの公式サイト からVisual Studio Codeをダウンロードする。インストーラではなく .zip 形式で、さらに使用するパソコンにあったものをダウンロードすること。ファイル名は VSCode-win32-x64-1.85.1.zip のような感じになっているはず。最後の数字部分はソフトのバージョンなので、時期によって変化する。

ダウンロードしたファイルを、USBメモリの VSCode フォルダに展開する。

【重要】 VSCode フォルダ内に data という空のフォルダを作成する。この data フォルダがないとポータブルにならないので注意。 VSCode フォルダ内の Code.exe をダブルクリックし、 Visual Studio Codeが起動することを確認する。

無事に起動したら、Visual Studio Codeを終了しておく。

Node.jsの導入 Node.jsの公式サイト からNode.jsのバイナリをダウンロードする。やはりインストーラではなく、LTSの64-bitのWindwos Binary (.zip)を選択する。ファイル名は node-v20.10.0-win-x64.zip のような感じになっているはず。

ダウンロードしたファイルを展開し、できたフォルダ名を NodeJS に変更し、USBメモリに移動する。

この時点でUSBメモリの中身は以下のようになっているはず。

├── NodeJS/ │ ├── node_modules/ │ ├── CHANGELOG.md │ ├── corepack │ └── ... └── VSCode/ ├── bin/ ├── data/ └── ... Visual Studio Code起動用のbatファイルを作る

これからVisual Studio Code上でNode.jsのコマンド npm や npx を実行したい。しかしパソコンはそのコマンドの本体や、これから追加するであろうパッケージがどこにあるか知らないので、それを教えてあげなくてはいけない（つまりパスを通さなくてはいけない）。インストーラを使った場合、この作業はインストーラがやってくれるのだが、今回はインストーラを使っていないので、手動で行う必要がある。起動のたびに行うのは大変なので、それを自動で行い、ついでにVisual Studio Codeを起動してくれる簡単なプログラム（batファイル）を書くことにする。

まずは StartVSCode.bat ファイルをUSBメモリの中に作り、以下の内容を書き込む。

StartVSCode.bat

set cwdir=%~dp0%
set nodedir=%cwdir%NodeJS
set PATH=%nodedir%;%PATH%
set NODE_PATH=%nodedir%\node_modules\npm\node_modules;%nodedir%\node_modules\npm
call %cwdir%VSCode\Code.exe
\（バックスラッシュ）は¥（キーボードの右上にある円マーク）で入力できる。ひょっとしたら¥と表示される可能性があるが、プログラム上は同じ意味にので気にしないこと。くれぐれも全角の＼を変換して出さないこと。プログラム中で記号を全角で書くことはない。
 Visual Studio Codeの起動確認
今作ったばかりのStartVSCode.batをダブルクリックすると、黒地に白字のウィンドウが出た後、Visual Studio Codeが起動する。
Visual Studio Code上でCtrl+@を押すとPowerShellのターミナルが開くので、node -vと入力してEnterキーで実行する。その後、npm -vと入力してEnterキーで実行する。
実行結果の例
PS D:\> node -v
v20.10.0
PS D:\> npm -v
10.2.3