k69blog
Cover Image for Node.jsの開発環境をVSCodeで作ってみよう！
Node.jsの開発環境をVSCodeで作ってみよう！

概要

スマホやパソコンでよくみるホームページ（フロントエンド）でよく使われるプログラミング言語 JavaScript があります。このプログラミング言語 JavaScript は Node.js という実行環境を使うことでサーバサイドも動かすことができます。

今回の記事では、Node.js で実行する JavaScript言語 でプログラミングするための Visual Studio Code の開発環境を作ります。また、git for windows のターミナルも組み込む手順を、丁寧に解説します。

とにかくやってみる！ ことで、node.jsの開発環境を身につけていきましょう。

前提条件

  • Windows 10 の環境

目的

今回の記事では、

  1. git for windowsの環境を構築
  2. Visual Studio Codeの環境を構築
  3. Node.jsの開発環境を構築

の流れで、Node.js を開発するための環境を構築し、サンプルを動かすことで Node.js に触れて楽しむことを目的としています。

=== ここから2022.09.12 追記 ===

Windows環境での開発環境構築はwingetというWindows公式パッケージマネージャを使用すると良いと思います。

cmd(管理者権限)実行サンプル
rem # Git インストール
wingit install Git.Git

rem # Visual Studio Code インストール
wingit install Microsoft.VisualStudioCode

rem # node.js(LTS：推奨版) インストール
wingit install OpenJS.NodeJS.LTS
wingetについてはこちらの記事参照

https://k69blog.com/posts/winget

=== ここまで ===

目次

内容

さっそく解説します！

git for windowsの環境を構築をしていい

git for windows の説明とインストール手順を解説します。

git for windowsとは

git for windows は Windows用のgitソース管理ツール です。
プログラムソースを管理するSCM(=Software Configuration Management)の1つであるgitをWindows環境で扱うためのツールがひとまとめになっているツールです。

とくに Git BASH をLinux シェルの1つである bash を windows上でエミュレート(=LinuxのコマンドをWindows上で擬似的にあつかう）するツールをメインに使用します。

gitbash

Linux のシェル bash はとても便利なので覚えてどんどん使っていきましょう！

インストール

  1. git for windowsにアクセスし、ダウンロードします。
    download
  2. ダウンロードしたファイルGit-2.35.1.2-64-bit.exeをダブルクリックします。

ダウンロードした時期や環境バージョンなどによって、.exeのファイル名は異なります。

  1. すべてデフォルトでインストールします。
インストール画面詳細はこちら
  1. Nextボタンを押下します。
    Next
  2. Nextボタンを押下します。
    Next
  3. Nextボタンを押下します。
    Next
  4. Nextボタンを押下します。
    Next
  5. インストールが完了するまで待ちます。
    待ちます
  6. Finishボタンを押下します。
    Finish
  1. gitbashを起動します
    Windwsスタート > Git > Git Bashの順で起動します。
    Finish
    このような画面が表示されればOKです。
    Finish

Visual Studio Codeの環境を構築

Visual Studio Code の説明とインストール手順を解説します。

Visual Studio Codeとは

Microsoft が 無料で提供している開発ツール（IDE）です。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

多くのプログラミング言語に対応しており、拡張機能も豊富で無料で使用できる開発ツール（IDE）はこれを選択しておけば間違いないです。

MyVSCode

このブログ記事も、ブログサーバもVisual Stdio Code を使って開発しています。

また、マイクロソフトが提供しているということもあり、Azure や GitHub との親和性も高いです。

インストール

さっそくインストールをしてみましょう。

  1. ここからVisual Studio Code をダウンロードします。
    download
  2. 今回は Windows 10 環境なので Windowsボタンを押下します。
    download
  3. exeファイル（VSCodeUserSetup-x64-1.64.2.exe）をダウンロードフォルダ（任意）に保存し、ダブルクリックします。
    ダウンロードした時期や環境バージョンなどによって、.exeのファイル名は異なります。
  4. 同意するを選択し、次へを押下します。
    同意する
  5. そのまま次へボタンを押下します。
    次へ
  6. そのまま次へボタンを押下します。
    次へ
  7. そのまま次へボタンを押下します。
    次へ
  8. そのままインストールボタンを押下します。
    インストール
  9. しばらくするとインストが完了しますので、完了ボタンを押下します。
    インストール
    完了
  10. Visual Studio Code が実行され、画面が表示されればOKです。

git bashをターミナルで動す

Visual Studio Code には ターミナル が統合されているのですが デフォルトでは gitbash を選択することができません。Visual Studio Code の画面内で gitbash を操作できると便利なので組み込みます。

  1. Visual Studio Code の 設定画面を開きます。
    左下の歯車 ＞ 設定 （ショートカットCtril + ,）
    設定
  2. terminal.integrated.profiles.windows を入力し、settiong.json で編集を押下します。
    setting.jsonで編集
  3. 下記の内容を追加します。
settings.json
{
    "terminal.integrated.profiles.windows": {
        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell"
        },
        "GitBash": {
            "path": ["C:\\Git\\bin\\bash.exe"],
            "icon" : "terminal-bash"
        }
    },
    "terminal.integrated.defaultProfile.windows": "Git Bash",
}
  1. 確認
    メニューにあるターミナル ＞ 新しいターミナル (ショートカットCtrl + Shift + ` )で

新しいターミナルの作業ディレクトリを選択してください と表示されるのでそのままEnterキーを押下します。
新しいターミナルの作業ディレクトリを選択してください

下記のように新しいターミナルが開けばOKです。
新しいターミナル

フレームワーク(Next.js)の開発環境をセットアップ

まずはフレームワーク(Next.js)で開発に必要なソフトウェアをインストールします。

node．js について

node.js についての簡単な説明とインストール手順を解説します。

node．js とは

Node.js は JavaScript エンジン で、JavaScript 言語を（主にサーバサイドで）動かすためのソフトウェアです。

Java 言語 だと JRE/JDK にあたります

ちなみに公式マニュアルを参照すると

Node.js® は、Chrome の V8 JavaScript エンジン で動作する JavaScript 環境です。
となっています。これを見ると動かせるのはChromeだけに読めそうですがEdge/Safariなどのブラウザでも動きます。

あと、Node.js をインストールするとJavaScriptのパッケージマネージャの機能も使用できるようになります。
下記2つのパッケージマネージャが標準でインストールされます。

  • npm(Node Package Manager)
  • npx(npmの後継)

パッケージマネージャとは、何がインストールされているか記録し、ソフトウェア（モジュール）に対して、アップデート／アンイストールなどの管理ツールです。

記事ではyarnパッケージマネージャをメインで使用します（yarnについては後述）。

node．js のインストール

  1. node.js をダウンロードします。
    https://nodejs.org/ja/download/にアクセスし、画面に従いインストールします。
インストールの画面キャプチャ
  1. Windows Installer をクリックします。
    ダウンロード
  2. Nextボタンを押下します。
    next
  3. チェックし、nextボタンを押下します。
    next
  4. nextボタンを押下します。
    next
  5. nextボタンを押下します。
    next
  6. nextボタンを押下します。
    next
  7. Installボタンを押下します。
    Install
  8. Finishボタンを押下します。
    Finish
  1. Visual Studio Code のターミナル(gitbash)を開き、各バージョンを確認します。
    node.js のバージョンとパッケージマネージャ（npm,npx）のパージョンを確認します。
バージョン確認
$ node -v 
v16.14.0

$ npm -v
8.3.1

$ npx -v
8.3.1

インストールするタイミングによってバージョンは異なります。

yarn について

yarn についての簡単な説明とインストール手順を解説します。

yarnとは

yarn も JavaScript のパッケージマネージャの1つ。
今回はyarnを使用する理由は下記2つ。

  1. npm よりも後発なので高機能
  2. npx よりも人気がありそう(参考になる情報量が多そう)
Google Trends で人気度を比較（赤がyarn）

Google Trends

yarnのインストール

yarn のインストールは corepack (node.js>=16.10) でおこないます。

https://yarnpkg.com/getting-started/install

  1. yarn インストール
    Visual Studio Code のターミナル（gitbash）下記のコマンドを実行します。
yarnインストール
corepack enable

下記のメッセージが表示された場合は``````にフルアクセス権限を付与します。
フルアクセス付与

Internal Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\pnpm'
Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\pnpm'
  1. yarn バージョン確認
    Visual Studio Code のターミナル（gitbash）下記のコマンドを実行します。
yarnバージョン確認
yarn --version

結果

yarnバージョン確認例
$ yarn --version
3.2.0

node．jsのサンプルを動かしてみる

  1. Visual Studio Code のターミナル(Ctrl + Shift + ` )を開いてホームディレクトリ（任意）にprojectディレクトリを作成します。
Visual Studio Code のターミナル
mkdir ~/projects
cd ~/projects
  1. 作成したprojectディレクトリを Visual Studio Code で開きます。
    メニュー ＞ ファイル ＞ フォルダーを開く（Ctrl + K -> Ctrl + O ）
このようなメッセージが出た場合は、作成者（自分）を信頼しましょう

はい、作成者を信頼します

  1. touch コマンドで hello-world.jsファイルを作成します。
Visual Studio Code のターミナル
touch hello-world.js

  1. hello-world.jsファイルをダブルクリックして開きます。
    はい、作成者を信頼します

  2. hello-world.jsの内容をコピペします。

hello-world.js
const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
  1. Visual Studio Code のターミナル で node hello-world.jsを実行します。
Visual Studio Code のターミナル 実行例
keita@DESKTOP-14ROBBR MINGW64 ~/projects
$ node hello-world.js
Server running at http://127.0.0.1:3000/
  1. ブラウザで http://127.0.0.1:3000 にアクセスします。
    Hello, World!が表示されればOKです。
    結果

yarnでもサンプルを動かしてみる

サンプルがシンプルなのでyarnの強みは活かせないですが、同じサンプルを用いてyarnを動かすことで、どのような動きをするかを見てみましょう。

  1. Visual Studio Code のターミナル で下記を実行し、初期化（init）を行います。
cd ~/projects
yarn init -y

初期化することでpackage.jsonファイルが作成されます。

  1. Visual Studio Code で package.jsonファイルを修正します。
    package.json

下記をコピペしましょう。

package.json
{
"name": "projects",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
  "run-sample": "node hello-world.js"
}
  1. Visual Studio Code のターミナル で yarn run-sampleを実行します。
Visual Studio Code のターミナル 実行例
$ yarn run-sample
yarn run v1.22.17
$ node hello-world.js
Server running at http://127.0.0.1:3000/
  1. ブラウザで http://127.0.0.1:3000 にアクセスします。
    Hello, World!が表示されればOKです。
    結果

script の他にも package.json に設定できる項目は他にもたくさんあります。
https://yarnpkg.com/configuration/manifest

まとめ

Node.js の開発環境を Visual Studio Code で作ってみてがいかがでしたか？
作ってみたサンプルを自分でカスタマイズしながら動かしてみるときっと楽しいと思います。
プログラミングを学ぶには とりあえず動かしてみる！ のが一番です！

本記事を読んでいただきありがとうございまいた。
少しでもみなさまのお役に立てばうれしいです。

© 2022 k69

本サイトを通じて、たくさんの人がプログラミングに興味を持ち、 これがキッカケでモノづくりの楽しさに触れることができれば幸せです！

リンク運用者情報プライバシーポリシー