Node.jsを使う

この文書はNode.jsを使うための入門ガイドです。Node.jsを使って開発を進めていくための最初の一歩になればと思います。

ヒント: Node.jsとは

公式サイト: Node.js

Node.jsは、オープンソースでクロスプラットフォームなJavaScript実行環境です。Webアプリケーションを中心に幅広い開発に使われています。

Node.jsのインストール

Node.jsはさまざまな方法でインストールできます。Windowsをお使いの方は「Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする」を推奨します。

Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする (推奨)
公式サイトからダウンロード

別の方法: 公式サイトからダウンロード

主要なプラットフォームのインストーラーは、Node.jsの公式サイト - https://nodejs.org/en/download からダウンロードできます。こちらから自分の環境に合わせたインストーラーをダウンロードし、それを実行します。インストーラーを実行するとNode.jsがインストールされます。

ヒント: 「LTS」と「最新版」

バージョンの説明を読むと「LTS (推奨版)」とあります。この「LTS」は何かというと、「Long Term Support」を表しており、「長期間安定的にサポートされます」ということを意味します。

現在、Node.jsは毎年LTSリリースを行っています。このLTSリリースは、バージョン番号が偶数番号 (たとえば、22、24など) のものが採用されます。LTSリリースのバージョンは、重要なバグ修正を基本的に30ヶ月間行われることを保証されています。

一方、それらのLTSリリースとは別に、Node.jsは6ヶ月ごとに最新版がリリースされます。この最新版はLTSリリースとは異なり、次のバージョンのリリース後にサポートされなくなります。特別な理由が無ければLTSリリースのバージョンをインストールするのがよいでしょう。

参照: Node.js Releases

ターミナルの使用

コマンドを実行するにはターミナルを使用します。

Windows の場合:

Microsoft Storeから、Windows Terminalをインストールします。インストール後、[スタートメニュー] > [Windows Terminal] を選択して起動します。

macOS の場合:

[アプリケーション] > [ユーティリティ] 内にある [ターミナル] を選択して起動します。

Node.jsの使用

ターミナルで次のコマンドを実行して、Node.jsがインストールされていることを確認します。

node -v

インストールしたNode.jsのバージョンが表示されていれば、Node.jsを使用する準備は完了です。

$ node -v
v22.11.0

package.jsonファイル

Node.jsを使ったプロジェクトは、基本的に package.json というファイルが配置されます。 package.json には、次のようなプロジェクトに必要な付帯情報が含まれます。

名前とバージョン
外部モジュールや依存関係
テストやビルドするためのコマンドなど

ESLintの導入

公式サイト: ESLint

ESLintは、JavaScriptの静的コード解析を行うためのツールです。

ESLintは、JavaScriptのコードの品質に関わる次のような項目を検査できます。

デッドコードの検知 (no-unused-vars, no-unreachable, etc.)
コードの複雑さ (max-lines, max-depth, complexity, etc.)

導入方法

プロジェクトにESLintを導入するには、ターミナルで以下のコマンドを実行します。

npm init @eslint/config

実行結果:

$ npm init @eslint/config
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) <Enterキーを入力>
...

いくつか質問が続くので、それぞれ矢印キーとEnterキーを入力して回答します。質問とその回答例を下記に示しますが、実際には自分の環境に合わせて適切な回答を選択し設定しましょう。

質問	回答例
How would you like to use ESLint? (ESLintをどのように使いたいですか?)	To check syntax and find problems (シンタックス検査と問題点の検出)
What type of modules does your project use? (プロジェクトでは、どのような種類のモジュールを使用していますか?)	JavaScript modules (import/export) (ECMAScript modules)
Which framework does your project use? (プロジェクトでは、どのフレームワークを使用していますか?)	None of these (いずれもなし)
Does your project use TypeScript? (あなたのプロジェクトではTypeScriptを使用していますか?)	No (いいえ)
Where does your code run? (コードはどこで実行しますか?)	Node (Node.js)
Would you like to install them now? (今すぐインストールしますか?)	Yes (はい)
Which package manager do you want to use? (どのパッケージマネージャを使用しますか?)	npm

なお、回答後に作られる設定ファイルを直接編集することで設定を変更することもできます。

実行方法

導入したESLintは、npx eslint コマンドを使用することで実行できます。

npx eslint <ファイル名またはディレクトリ名>

たとえば、次のJavaScriptのファイルを作成し、ESLintによって検査してみましょう。

// hello.js
const message = "Hello, World!";
console.log(message);

$ npx eslint hello.js

実行後、何も表示されなければ検査完了です。検査に合格したことを意味します。

実際にコードの品質に問題があった場合についても確認してみましょう。上のコードを次のように変更してみます。

// hello.js
const message = "Hello, World!";
console.log(invalid);

console.log() の引数に定義されていない無効な値 invalid を渡してみます。

$ npx eslint hello.js

hello.js
  1:7   error  'message' is assigned a value but never used  no-unused-vars
  2:13  error  'invalid' is not defined                      no-undef

✖ 2 problems (2 errors, 0 warnings)

実行するとエラーメッセージが表示されます。これは、ESLintがコードを検査した結果、2件の問題 (problems) を検知したことを意味します。

このようにして、ESLintはコードの品質に関する問題を検知することができます。

エラーの説明

  1:7   error  'message' is assigned a value but never used  no-unused-vars

このメッセージは対象のファイルの1行目、7列目に問題の可能性のあるコードが検出されたことを意味します。 no-unused-vars ルールが有効になっている場合、このメッセージが表示されます。「‘message’ is assigned a value but never used (message に値が割り当てられているが、使われていません)」と書かれており、message がデッドコードとなっている可能性を知らせてくれています。

もし仮にここでコードに必要な変数を宣言しているならば、その変数は必要な場所で正しく使用されていない可能性があります。あるいはもし仮に本当に不要な変数の宣言であるならば、この宣言は削除しても構いません。

  2:13  error  'invalid' is not defined                      no-undef

続いてのメッセージは、対象のファイルの2行目、13列目に問題の可能性のあるコードが検出されたことを意味します。 no-undef ルールが有効になっている場合、このメッセージが表示されます。「‘invalid’ is not defined (invalid が定義されていない)」と書かれており、invalid が宣言されていない変数であることを知らせてくれています。 JavaScriptで変数を使用する場合、あらかじめ宣言する必要があるので必要に応じて宣言するか、あるいはもし誤った変数を参照しているならば、正しい変数に変更しましょう。

この他にもESLintにはさまざまなルールがあります。詳細はESLintのルール一覧をご覧ください。

複数のファイルの検査

引数にディレクトリを指定することで、そのディレクトリ内のコードを検査します。もしカレントディレクトリ内のコードを検査したい場合は、. を引数に指定します。

npx eslint .

Prettierの導入

公式サイト: Prettier

Prettierは、ソースコードを整形するためのツールです。

Prettierは、JavaScriptをはじめとした、さまざまなコードの整形に対応しています。

JavaScript
JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
Ember/Handlebars
JSON
GraphQL
Markdown, including GFM and MDX
YAML

次のコマンドでPrettierをインストールします。

npm i -D prettier

インストール後、次のコマンドでファイルの整形を行います。

npx prettier --write <ファイル名またはディレクトリ名>

実行例:

npx prettier --write hello.js

もしカレントディレクトリ以下にある複数のファイルを整形したい場合は、. を引数に指定します。

npx prettier --write .

このようにして、Prettierはコードの整形を行うことができます。

ESLintとの競合を避ける

ESLintでコードの整形を行うことがあり、その設定によってはPrettierで整形を行うことができない場合があります。それを避けるには、ESLintの設定としてeslint-config-prettierをインストールし、これを使用します。

npm i -D eslint-config-prettier

// eslint.config.js
import js from "@eslint/js";
import prettier from "eslint-config-prettier";

export default [js.configs.recommended, prettier];

こうすることによって、Prettierで整形を行うことができない問題を回避することができます。必要に応じて行いましょう。

VSCodeのインストール

VSCode (Visual Studio Code)は、ソースコードを編集するためのエディタです。

VSCodeは、JavaScriptをはじめとするさまざまなプログラミング言語のシンタックスハイライトや自動補完、またデバッガなどの便利な機能を備えています。

VSCodeは公式サイトからダウンロードしてインストールできます。

公式サイト: Visual Studio Code

自分の環境に合わせたインストーラーをダウンロードし、それを実行します。インストーラーを実行するとVSCodeがインストールされます。

設定

設定を変更するには、メニューから設定を開きます。

Windows/Linuxの場合 - File (ファイル) > User Settings (ユーザー設定) > Settings (設定)
macOSの場合 - Code > User Settings (ユーザー設定) > Settings (設定)

便利な設定

Editor: Format On Save (保存時に自動整形) … editor.formatOnSave
- 有効化することで、ファイルを保存する時に自動的にコードの整形を行います。

VSCodeの拡張機能

VSCodeは、標準で備えている機能の他にMarketplaceにある拡張機能をインストールすることでさまざまな機能を追加することができます。

拡張機能の検索

VSCodeを起動して、ウィンドウの左端のアクティビティバーにある「拡張機能」をクリックして、Marketplaceにある拡張機能を検索することができます。

ESLintの拡張機能のインストール

便利な拡張機能の紹介

ESLint (dbaeumer.vscode-eslint) … ESLintを使用するための拡張機能
Prettier - Code formatter (esbenp.prettier-vscode) … Prettierを使用するための拡張機能
Vue - Official (Vue.volar) … Vue.jsを使用するための拡張機能

検索した拡張機能を選択し、Install (インストール)をクリックしてその拡張機能をインストールします。

ESLintの使用

「eslint」などのキーワードでESLintの拡張機能を検索し、インストールします。

ESLintの導入のように、あらかじめESLintを導入したプロジェクトをVSCodeから開くと、そのプロジェクトのESLintが自動的に実行され、VSCodeの編集画面に表示されます。

ESLintの使用

ESLintの拡張機能の使用

このようにESLintの拡張機能をインストールすることによって自動的にESLintを実行し、即時にJavaScriptのコードのチェックを行うことができます。

Prettierの使用

Prettierの導入で説明したとおり、PrettierはJavaScriptをはじめとしたさまざまなコードを整形するためのツールです。

Prettierの拡張機能をインストールすることによって、VSCodeの編集画面に表示されるコードを自動的に整形することができます。 Marketplaceに「Prettier - Code formatter」という名前で提供されています。これをインストールします。

Prettierの拡張機能のインストール

インストール後、ファイルを開き、Ctrl+Shift+P (macOSの場合はCmd+Shift+P)を押して、コマンドパレットを開きます。そのなかに

> format document

等のキーワードで「ドキュメントのフォーマット (Format Document)」を選択して、フォーマットを実行します。あるいは、Ctrl+Shift+I (macOSの場合はCmd+Shift+I)を押しても、同様の操作が可能です。いずれかを実行してコードの整形を行います。

ドキュメントのフォーマット (Format Document)