WSL 2 を使用して Node.js 開発環境を設定するSet up your Node.js development environment with WSL 2

以下に示すのは、Linux 用 Windows サブシステム (WSL) を使用して Node.js 開発環境を設定するのに役立つステップバイステップ ガイドです。The following is a step-by-step guide to help you get your Node.js development environment set up using Windows Subsystem for Linux (WSL).

更新された WSL 2 をインストールして実行することをお勧めします。そうすることで、Docker Desktop を実行する機能など、パフォーマンス速度とシステム コールの互換性の大幅な向上の恩恵を受けることができます。We recommend that you install and run the updated WSL 2, as you will benefit from significant improvements in performance speed and system call compatibility, including the ability to run Docker Desktop. Node.js Web 開発用の npm モジュールとチュートリアルの多くは Linux ユーザー向けに記述されており、Linux ベースのパッケージ ツールとインストール ツールを使用しています。Many npm modules and tutorials for Node.js web development are written for Linux users and use Linux-based packaging and installation tools. ほとんどの Web アプリも Linux に配置されるため、WSL 2 を使用することで、開発環境と運用環境の間で一貫性が確保されます。Most web apps are also deployed on Linux, so using WSL 2 will ensure you have consistency between your development and production environments.

注意

Windows 上で Node.js を直接使用することに取り組んでいる場合、または Windows Server 運用環境の使用を計画している場合は、ご利用の Node.js 開発環境を Windows 上で直接設定するためのガイドを参照してください。If you are committed to using Node.js directly on Windows, or plan to use a Windows Server production environment, see our guide to set up your Node.js development environment directly on Windows.

WSL 2 のインストールInstall WSL 2

WSL 2 を有効にしてインストールするには、WSL インストール ドキュメントの手順に従います。To enable and install WSL 2, follow the steps in the WSL install documentation. これらの手順には、Linux ディストリビューション (Ubuntu など) の選択が含まれています。These steps will include choosing a Linux distribution (for example, Ubuntu).

WSL 2 と Linux ディストリビューションをインストールしたら、Linux ディストリビューション (Windows の [スタート] メニューにあります) を開き、コマンド lsb_release -dc を使用してバージョンとコードネームを確認します。Once you have installed WSL 2 and a Linux distribution, open the Linux distribution (it can be found in your Windows start menu) and check the version and codename using the command: lsb_release -dc.

最新のパッケージであることを確認するために、インストールした直後も含めて、Linux ディストリビューションを定期的に更新することをお勧めします。We recommend updating your Linux distribution regularly, including immediately after you install, to ensure you have the most recent packages. Windows はこの更新を自動的に処理しません。Windows doesn't automatically handle this update. 使用中のディストリビューションを更新するには、コマンド sudo apt update && sudo apt upgrade を使用します。To update your distribution, use the command: sudo apt update && sudo apt upgrade.

Windows ターミナルをインストールする (省略可能)Install Windows Terminal (optional)

新しい Windows ターミナルでは、複数のタブ (コマンド プロンプト、PowerShell、複数の Linux ディストリビューション間をすばやく切り替える) が有効になり、カスタム キー バインド (タブを開くまたは閉じる、コピーと貼り付けを行うなどのためのショートカット キー) を作成でき、検索機能、カスタム テーマ (配色、フォント スタイルとサイズ、背景画像/ぼかし/透明度) を使用できます。The new Windows Terminal enables multiple tabs (quickly switch between multiple Linux command lines, Windows Command Prompt, PowerShell, Azure CLI, etc), create custom key bindings (shortcut keys for opening or closing tabs, copy+paste, etc.), use the search feature, and custom themes (color schemes, font styles and sizes, background image/blur/transparency). 詳しくはこちらをご覧くださいLearn more.

  1. Microsoft Store で Windows ターミナルを取得します: ストアを介してインストールすると、更新プログラムが自動的に処理されます。Get Windows Terminal in the Microsoft Store: By installing via the store, updates are handled automatically.

  2. インストールが完了したら、Windows ターミナルを開き、 [設定] を選択して、settings.json ファイルによってターミナルをカスタマイズします。Once installed, open Windows Terminal and select Settings to customize your terminal using the settings.json file.

    Windows ターミナルの設定

nvm、node.js、および npm をインストールするInstall nvm, node.js, and npm

Node.js をインストールするには、複数の方法があります。There are multiple ways to install Node.js. バージョンの変更は非常に早いため、バージョン マネージャーを使用することをお勧めします。We recommend using a version manager as versions change very quickly. 多くの場合、作業しているさまざまなプロジェクトのニーズに基づいて、複数のバージョンを切り替える必要があります。You will likely need to switch between multiple versions based on the needs of different projects you're working on. ノード バージョン マネージャー (一般的には nvm と呼ばれることが多い) は、Node.js の複数のバージョンをインストールするための最も一般的な方法です。Node Version Manager, more commonly called nvm, is the most popular way to install multiple versions of Node.js. ここでは、nvm をインストールしてからそれを使用して Node.js と Node Package Manager (npm) をインストールする手順について説明します。We will walk through the steps to install nvm and then use it to install Node.js and Node Package Manager (npm). 代替のバージョン マネージャーについても検討する必要があります。次のセクションで説明します。There are alternative version managers to consider as well covered in the next section.

重要

バージョン マネージャーをインストールする前に、ご利用のオペレーティング システムから Node.js または npm の既存のインストールを削除することをお勧めします。インストールの種類が異なると、奇妙で混乱を招く競合が発生する可能性があるためです。It is always recommended to remove any existing installations of Node.js or npm from your operating system before installing a version manager as the different types of installation can lead to strange and confusing conflicts. たとえば、Ubuntu の apt-get コマンドを使用してインストールできる Node のバージョンは、現在期限切れになっています。For example, the version of Node that can be installed with Ubuntu's apt-get command is currently outdated. 以前のインストールの削除に関するヘルプについては、ubuntu から nodejs を削除する方法) に関するページを参照してください。For help with removing previous installations, see How to remove nodejs from ubuntu.)

  1. ご利用の Ubuntu 18.04 コマンドラインを開きます。Open your Ubuntu 18.04 command line.
  2. sudo apt-get install curl を使用して cURL をインストールします (コマンドラインでインターネットからコンテンツをダウンロードするために使用するツール)。Install cURL (a tool used for downloading content from the internet in the command-line) with: sudo apt-get install curl
  3. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash を使用して nvm をインストールします。Install nvm, with: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

注意

発行時、最新バージョンとして NVM v0.35.3 が提供されていました。At the time of publication, NVM v0.35.3 was the most recent version available. GitHub プロジェクト ページで NVM の最新リリースを確認し、最新バージョンを含むように上記のコマンドを調整することができます。You can check the GitHub project page for the latest release of NVM, and adjust the above command to include the newest version. cURL を使用してより新しいバージョンの NVM をインストールすると、古いものが置き換えられ、NVM を使用してインストールした Node のバージョンはそのまま残ります。Installing the newer version of NVM using cURL will replace the older one, leaving the version of Node you've used NVM to install intact. たとえば次のようになります。curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bashFor example: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

  1. インストールを確認するには、command -v nvm を入力します。これによって "nvm" が返されるはずです。"コマンドが見つかりません" というメッセージが返される場合または何も応答がない場合は、現在のターミナルを閉じてから再度開き、もう一度やり直してください。To verify installation, enter: command -v nvm ...this should return 'nvm', if you receive 'command not found' or no response at all, close your current terminal, reopen it, and try again. nvm GitHub リポジトリで詳細を確認してくださいLearn more in the nvm github repo.

  2. 現在インストールされている Node のバージョンを一覧表示します (この時点では何もないはずです): nvm lsList which versions of Node are currently installed (should be none at this point): nvm ls

    Node のバージョンが表示されていない NVM リスト

  3. Node.js の現在のリリースをインストールします (最新の機能強化をテストするためですが、問題が発生する可能性が高くなります): nvm install nodeInstall the current release of Node.js (for testing the newest feature improvements, but more likely to have issues): nvm install node

  4. Node.js の最新の安定した LTS リリースをインストールします (推奨): nvm install --ltsInstall the latest stable LTS release of Node.js (recommended): nvm install --lts

  5. インストールされている Node のバージョンを一覧表示します: nvm ls。先ほどインストールした 2 つのバージョンが表示されるはずです。List what versions of Node are installed: nvm ls ...now you should see the two versions that you just installed listed.

    LTS と現在の Node バージョンを表示した NVM リスト

  6. Node.js がインストールされており、現在の既定のバージョンであることを確認します: node --version を使用Verify that Node.js is installed and the currently default version with: node --version. 次に、npm があることも確認します: npm --version を使用。(which node または which npm を使用して、既定のバージョンで使用されているパスを確認することもできます)。Then verify that you have npm as well, with: npm --version (You can also use which node or which npm to see the path used for the default versions).

  7. プロジェクトに使用する Node.js のバージョンを変更するには、新しいプロジェクト ディレクトリ mkdir NodeTest を作成し、ディレクトリ cd NodeTest を入力します。次に nvm use node を入力して現在のバージョンに切り替えるか、または nvm use --lts を入力して LTS のバージョンに切り替えます。To change the version of Node.js you would like to use for a project, create a new project directory mkdir NodeTest, and enter the directory cd NodeTest, then enter nvm use node to switch to the Current version, or nvm use --lts to switch to the LTS version. また、nvm use v8.2.1 のように、インストールした追加のバージョンに固有の番号を使用することもできますYou can also use the specific number for any additional versions you've installed, like nvm use v8.2.1. (使用可能な Node.js のバージョンをすべて一覧表示するには、コマンド nvm ls-remote を使用します)。(To list all of the versions of Node.js available, use the command: nvm ls-remote).

NVM を使用して Node.js と NPM をインストールする場合は、SUDO コマンドを使用して新しいパッケージをインストールする必要はありません。If you are using NVM to install Node.js and NPM, you should not need to use the SUDO command to install new packages.

代替のバージョン マネージャーAlternative version managers

nvm は現在、最も一般的なノード用バージョン マネージャーですが、考慮すべき代替がいくつかあります。While nvm is currently the most popular version manager for node, there are a few alternatives to consider:

  • n は従来から用いられてきた nvm の代替です。同じことを実現しますがコマンドが若干異なります。また、Bash スクリプトではなく、npm を介してインストールされます。n is a long-standing nvm alternative that accomplishes the same thing with slightly different commands and is installed via npm rather than a bash script.
  • fnm はより新しいバージョン マネージャーであり、nvm よりもはるかに高速であると言われていますfnm is a newer version manager, claiming to be much faster than nvm. (Azure Pipelines も使用されます)。(It also uses Azure Pipelines.)
  • Volta は LinkedIn チームからの新しいバージョン マネージャーであり、速度の向上とクロスプラットフォーム サポートを特長として挙げています。Volta is a new version manager from the LinkedIn team that claims improved speed and cross-platform support.
  • asdf-vm は、ike gvm、nvm、rbenv、pyenv (その他多数) などの複数の言語を 1 つにまとめた単一の CLI です。asdf-vm is a single CLI for multiple languages, like ike gvm, nvm, rbenv & pyenv (and more) all in one.
  • nvs (Node Version Switcher) は、クロスプラットフォームの nvm の代わりであり、VS Code との統合が可能です。nvs (Node Version Switcher) is a cross-platform nvm alternative with the ability to integrate with VS Code.

お気に入りのコード エディターをインストールするInstall your favorite code editor

Node.js プロジェクトには、Visual Studio Code と Remote WSL 拡張機能を併用することをお勧めします。We recommend using Visual Studio Code with the Remote-WSL Extension for Node.js projects. これにより、VS Code が "クライアントサーバー" アーキテクチャに分割され、クライアント (VS Code ユーザー インターフェイス) はご利用の Windows オペレーティング システム上で実行され、サーバー (自分のコード、Git、プラグインなど) は WSL Linux ディストリビューション上で "リモートで" 実行されます。This splits VS Code into a “client-server” architecture, with the client (the VS Code user interface) running on your Windows operating system and the server (your code, Git, plugins, etc) running "remotely" on your WSL Linux distribution.

注意

この "リモートの" のシナリオは、慣れている方法とは少し違う可能性があります。This “remote” scenario is a bit different than you may be accustomed to. WSL では、プロジェクト コードが実行される本物の Linux ディストリビューションがサポートされます。これは Windows オペレーティング システムとは別個のものですが、やはりローカル コンピューター上にあります。WSL supports an actual Linux distribution where your project code is running, separately from your Windows operating system, but still on your local machine. Remote-WSL 拡張機能により、リモート サーバーに対するかのように Linux サブシステムへの接続が行われますが、これはクラウドで実行されているわけではありません。The Remote-WSL extension connects with your Linux subsystem as if it were a remote server, though it’s not running in the cloud… これもローカル コンピューター上にあり、Windows との並列実行が有効化された WSL 環境内で実行されています。it’s still running on your local machine in the WSL environment that you enabled to run alongside Windows.

  • Linux ベースの Intellisense とリンティングがサポートされています。Linux-based Intellisense and linting is supported.
  • プロジェクトは、Linux で自動的にビルドされます。Your project will automatically build in Linux.
  • Linux で実行されるご自分のすべての拡張機能を使用できます (ES Lint、NPM Intellisense、ES6 スニペットなど)。You can use all your extensions running on Linux (ES Lint, NPM Intellisense, ES6 snippets, etc.).

ご利用のコンソール内からすばやく変更を加える場合は、ターミナルベースのテキスト エディター (vim、emacs、nano) も役に立ちますTerminal-based text editors (vim, emacs, nano) are also helpful for making quick changes from right inside your console. (この記事では、相違点について説明すると共に、それぞれの使用方法について簡単に説明します)。(This article does a nice job explaining the difference and a bit about how to use each.)

注意

一部の GUI エディター (Atom、Sublime Text、Eclipse) では、WSL 共有ネットワークの場所 (\wsl$\Ubuntu\home) にアクセスする際に問題が発生する可能性があります。さらに、Windows ツールを使用して Linux ファイルのビルドが試みられますが、これは不要な場合があります。Some GUI editors (Atom, Sublime Text, Eclipse) may run into trouble accessing the WSL shared network location (\wsl$\Ubuntu\home) and will try to build your Linux files using Windows tools, which may not be what you want. この互換性は、VS Code の Remote-WSL 拡張機能によって自動的に処理されます。The Remote-WSL Extension in VS Code will handle this compatibility for you.

VS Code と Remote-WSL 拡張機能をインストールするには、次のようにします。To install VS Code and the Remote-WSL Extension:

  1. Windows 用の VS Code をダウンロードしてインストールしますDownload and install VS Code for Windows. VS Code は Linux でも使用できますが、Linux 用 Windows サブシステムは GUI アプリをサポートしていないため、Windows にインストールする必要があります。VS Code is also available for Linux, but Windows Subsystem for Linux does not support GUI apps, so we need to install it on Windows. 心配しなくても、Remote - WSL 拡張機能を使用すれば、将来、お使いの Linux コマンド ラインやツールとの統合は引き続き可能です。Not to worry, you'll still be able to integrate with your Linux command line and tools using the Remote - WSL Extension.

  2. Remote - WSL 拡張機能を VS Code にインストールします。Install the Remote - WSL Extension on VS Code. これにより、統合開発環境として WSL を使用できるようになり、互換性とパスが自動的に処理されます。This allows you to use WSL as your integrated development environment and will handle compatibility and pathing for you. 詳しくはこちらをご覧くださいLearn more.

重要

VS Code が既にインストールされている場合、Remote - WSL 拡張機能をインストールするためには、1.35 May リリース以降がインストールされていることを確認する必要があります。If you already have VS Code installed, you need to ensure that you have the 1.35 May release or later in order to install the Remote - WSL Extension. オートコンプリート、デバッグ、lint などのサポートが失われるため、VS Code において、Remote - WSL 拡張機能なしで WSL を使用することはお勧めしません。豆知識: この WSL 拡張機能は $HOME/.vscode-server/extensions にインストールされます。We do not recommend using WSL in VS Code without the Remote-WSL extension as you will lose support for auto-complete, debugging, linting, etc. Fun fact: This WSL extension is installed in $HOME/.vscode-server/extensions.

便利な VS Code 拡張機能Helpful VS Code Extensions

VS Code には Node.js 開発用のすぐに利用できる機能が多数付属している一方、Node.js Extension Pack にはインストールを検討すべき便利ないくつかの拡張機能が用意されています。While VS Code comes with many features for Node.js development out of the box, there are some helpful extensions to consider installing available in the Node.js Extension Pack. これらをすべてインストールするか、または最も役に立つと思われるものを選択します。Install them all or pick and choose which seem the most useful to you.

Node.js 拡張パックをインストールするには、次の手順を行います。To install the Node.js extension pack:

  1. VS Code で [拡張機能] ウィンドウを開きます (Ctrl + Shift + X)。Open the Extensions window (Ctrl+Shift+X) in VS Code.

    [拡張機能] ウィンドウは現在 3 つのセクションに分割されています (Remote-WSL 拡張機能をインストールしたため)。The Extensions window is now divided into three sections (because you installed the Remote-WSL extension).

    • "ローカル - インストール済み": ご利用の Windows オペレーティングシステムで使用するためにインストールされた拡張機能。"Local - Installed": The extensions installed for use with your Windows operating system.
    • "WSL:Ubuntu-18.04-Installed": ご利用の Ubuntu オペレーティング システムで使用するためにインストールされた拡張機能 (WSL)。"WSL:Ubuntu-18.04-Installed": The extensions installed for use with your Ubuntu operating system (WSL).
    • "推奨": 現在ご利用のプロジェクト内のファイルの種類に基づいて、VS Code から推奨される拡張機能。"Recommended": Extensions recommended by VS Code based on the file types in your current project.

    VS Code 拡張機能のローカルとリモートの比較

  2. [拡張機能] ウィンドウの上部にある [検索] ボックスに、次のように入力します。Node Extension Pack (または、お探しの拡張機能の名前)。In the search box at the top of the Extensions window, enter: Node Extension Pack (or the name of whatever extension you are looking for). 拡張機能は、現在のプロジェクトが開かれている場所に応じて、VS Code のローカル インスタンスまたは WSL インスタンスのいずれかにインストールされます。The extension will be installed for either your Local or WSL instances of VS Code depending on where you have the current project opened. VS Code ウィンドウの左下隅にあるリモート リンク (緑色) を選択するとわかります。You can tell by selecting the remote link in the bottom-left corner of your VS Code window (in green). リモート接続を開く、または閉じるためのオプションが表示されます。It will either give you the option to open or close a remote connection. 使用する Node.js 拡張機能を "WSL:Ubuntu-18.04" 環境にインストールします。Install your Node.js extensions in the "WSL:Ubuntu-18.04" environment.

    VS Code のリモート リンク

他にも検討をお勧めする拡張機能として、次のようなものがあります。A few additional extensions you may want to consider include:

  • Debugger for Chrome:Node.js を使用してサーバー側で開発を完了したら、クライアント側を開発してテストする必要があります。Debugger for Chrome: Once you finish developing on the server side with Node.js, you'll need to develop and test the client side. この拡張機能により、ご利用の VS Code エディターと Chrome ブラウザーのデバッグ サービスが統合され、効率がより向上します。This extension integrates your VS Code editor with your Chrome browser debugging service, making things a bit more efficient.
  • 他のエディターからのキーマップ: これらの拡張機能は、別のテキスト エディター (Atom、Sublime、Vim、eMacs、Notepad++ など) から移行する場合に、ご利用の環境を快適に保つのに役立ちます。Keymaps from other editors: These extensions can help your environment feel right at home if you're transitioning from another text editor (like Atom, Sublime, Vim, eMacs, Notepad++, etc).
  • 設定の同期: GitHub を使用して、異なるインストール間で VS Code の設定を同期させることができます。Settings Sync: Enables you to synchronize your VS Code settings across different installations using GitHub. 複数のコンピューターで作業する場合、この機能によってコンピューター間で環境の一貫性を保つことができます。If you work on different machines, this helps keep your environment consistent across them.

Git を設定する (省略可能)Set up Git (optional)

WSL で NodeJS プロジェクトの Git をセットアップするには、WSL ドキュメントの「Linux 用 Windows サブシステムで Git の使用を開始する」の記事を参照してください。To set up Git for a NodeJS project on WSL, see the article Get started using Git on Windows Subsystem for Linux in the WSL documentation.

次の手順Next steps

これで、Node.js 開発環境が設定されました。You now have a Node.js development environment set up. Node.js 環境の使用を開始するには、次のチュートリアルのいずれかを試すことを検討してください。To get started using your Node.js environment, consider trying one of these tutorials: