Node.jsをインストールしよう

学習の目標

本章では、以下の内容を学習します。

  • Node.jsが何なのかを理解する
  • npmとpackage.jsonの基本的な役割を学ぶ
  • WindowsとMacでのNode.jsインストール方法を習得する
  • インストール確認とバージョン管理の方法を理解する

Node.jsとは何か

TypeScript開発を始める前に、まずNode.jsについて理解しましょう。

これまでJavaScriptは、Webブラウザの中でしか動作しない言語でした。

しかし、Node.jsの登場により、JavaScriptをコンピュータ上で直接実行できるようになりました。

例えば、以前はこのような状況でした。

  • HTML ファイルを作成する
  • その中に <script> タグを書く
  • ブラウザでHTMLファイルを開く
  • JavaScriptが実行される

Node.jsがあることで、以下のことが可能になります。

  • JavaScriptファイルを直接実行する
  • ファイルの読み書きをJavaScriptで行う
  • サーバーアプリケーションをJavaScriptで作成する
  • TypeScriptをJavaScriptに変換する

特にTypeScript開発では、TypeScriptファイル(.ts)をJavaScriptファイル(.js)に変換する処理が必要です。

この変換処理を行うのがNode.js上で動作するTypeScriptコンパイラです。

また、VS Codeなどのエディタでリアルタイムにエラーチェックを行う機能も、Node.js上で動作しています。

Node.jsの具体的な活用例

TypeScript開発では、Node.jsを以下のような場面で使用します。

TypeScriptのコンパイル

TypeScriptで書いたコードをJavaScriptに変換します。この変換処理により、ブラウザや実行環境でコードを動かすことができるようになります。

開発サーバーの実行

ファイルの変更を監視して、自動的にブラウザをリロードする開発サーバーを動かします。この機能により、コードを変更するたびに手動でブラウザを更新する必要がなくなります。

ライブラリの管理

React、Vue.js、各種TypeScript関連ライブラリをダウンロード・管理します。必要なライブラリは自動でダウンロードされ、プロジェクト間で一貫した管理が可能になります。

コードの品質チェック

ESLintやPrettierなどのツールを使って、コードの品質を自動チェックします。これらのツールにより、コードの一貫性や潜在的なバグを自動的に検出できます。

npmとpackage.jsonの基本

Node.jsをインストールすると、npm(Node Package Manager)も同時にインストールされます。

npmは、JavaScriptやTypeScriptのライブラリを管理するためのツールです。

npmが管理するもの

npmでは、以下のようなライブラリやツールを管理できます。

  • TypeScript本体: TypeScriptのコンパイラ
  • 型定義ファイル: ライブラリの型情報
  • 開発ツール: ESLint、Prettier、Webpack など
  • フレームワーク: React、Vue.js、Express など

package.jsonの役割

package.jsonは、プロジェクトで使用するライブラリの一覧や設定を記録するファイルです。

このファイルがあることで、以下のメリットがあります。

環境の共有

チームの他のメンバーも、同じライブラリ構成で開発できます。 プロジェクトを他の開発者に共有する際、package.jsonがあれば環境の再現が簡単になります。

バージョン管理

どのバージョンのライブラリを使っているかを記録できます。 これにより、将来的にライブラリを更新する際の影響範囲を把握しやすくなります。

インストールの自動化

npm installコマンド一つで、必要なライブラリを全て導入できます。 新しい環境でプロジェクトを始める際の手間を大幅に削減できます。

例えば、package.jsonの中身は以下のような構造になっています。

{
  "name": "my-typescript-project",
  "version": "1.0.0",
  "dependencies": {
    "typescript": "^5.0.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

この情報を見ることで、プロジェクトの依存関係が一目で分かります。

Node.jsがインストール済みかの確認方法

まずは、お使いのコンピュータにNode.jsがすでにインストールされているかを確認してみましょう。

Windows での確認方法

Windowsの場合は、スタートメニューから「コマンドプロンプト」または「PowerShell」を開きます。

検索ボックスに「cmd」または「powershell」と入力すると、該当するアプリケーションが表示されます。

Mac での確認方法

Macの場合は、Launchpadから「ターミナル」を開きます。

Spotlight検索(画面右上の虫眼鏡アイコン)で「ターミナル」と検索することでも開けます。

バージョン確認コマンド

コマンドライン(ターミナル)が開いたら、以下のコマンドを実行してください。

node -v

次に、npmが使えるかも確認しましょう。

npm -v

これらのコマンドを実行して、以下のようにバージョン番号が表示されれば、Node.jsとnpmがすでにインストールされています。

v18.17.0
9.6.7

この場合は、次章の「TypeScriptをインストールして設定しよう」に進んでください。

一方で、「コマンドが見つかりません」や「node is not recognized」のようなエラーが表示される場合は、Node.jsをインストールする必要があります。

Node.jsのインストール方法

Node.jsがインストールされていない場合は、以下の手順でインストールを行いましょう。

お使いのOS(WindowsまたはMac)に応じて、該当する章を参照してください。

Macでのインストール方法

公式インストーラーを使用する方法(推奨)

最も簡単で確実な方法は、公式インストーラーを使うことです。

ブラウザでNode.jsの公式サイトにアクセスします。

https://nodejs.org/ja

トップページに表示されている「LTS」(Long Term Support)版のダウンロードボタンをクリックします。

LTSは「長期サポート版」という意味で、安定性が重視されたバージョンです。

開発用途では、こちらを選択することをおすすめします。

ダウンロードしたインストーラー(.pkgファイル)をダブルクリックして開きます。

インストーラーが起動したら、画面の指示に従ってインストールを進めてください。

途中でパスワードの入力を求められた場合は、Macのログインパスワードを入力してください。

インストールが完了したら、ターミナルを開いて以下のコマンドを実行し、正しくインストールされたか確認します。

node -v
npm -v

これでバージョン番号が表示されれば、インストールは成功です。

Homebrewを使用する方法

すでにHomebrewをインストール済みの方は、こちらの方法も便利です。

ターミナルを開いて、以下のコマンドを実行してください。

brew install node

Homebrewがインストールされていない場合は、まず以下のコマンドでHomebrewをインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストール中にパスワードの入力を求められた場合は、Macのログインパスワードを入力してください。

インストール後、以下のコマンドでNode.jsとnpmが正しくインストールされたか確認します。

node -v
npm -v

Windowsでのインストール方法

公式インストーラーを使用する方法

Windows環境では、公式インストーラーを使うのが最も簡単で確実な方法です。

ブラウザでNode.jsの公式サイトにアクセスします。

https://nodejs.org/ja

トップページに表示されている「LTS」(Long Term Support)版のダウンロードボタンをクリックします。

Windowsの場合、64bit版と32bit版がありますが、現在のコンピュータはほとんどが64bit版ですので、特に確認の必要はありません。

インストーラーの実行

ダウンロードしたインストーラー(.msiファイル)をダブルクリックして開きます。

セットアップウィザードが起動したら、「Next」ボタンをクリックして進めていきます。

「License Agreement」の画面では、「I accept the terms in the License Agreement」にチェックを入れて「Next」をクリックします。

インストール先フォルダの選択画面では、特に変更する必要がなければデフォルトのまま「Next」をクリックします。

「Custom Setup」の画面では、すべてのコンポーネントがインストールされるよう設定されているので、そのまま「Next」をクリックします。

「Tools for Native Modules」の画面では、追加ツールのインストールについて聞かれますが、基本的にはチェックを入れずに「Next」をクリックして進みます。

「Ready to install Node.js」の画面が表示されたら、「Install」ボタンをクリックしてインストールを開始します。

インストールの確認

インストールが完了したら、コマンドプロンプト(またはPowerShell)を開いて以下のコマンドを実行し、Node.jsとnpmが正しくインストールされたか確認します。

コマンドプロンプトは、Windows検索ボックスに「cmd」と入力し、表示された「コマンドプロンプト」をクリックして開くことができます。

node -v

続いて、npmのバージョンも確認しましょう。

npm -v

これらのコマンドを実行した結果、以下のようにバージョン番号が表示されれば、インストールは成功です。

v18.17.0
9.6.7

インストール確認とバージョン管理

Node.jsのインストールが完了したら、正常に動作するかをもう少し詳しく確認してみましょう。

Node.js の動作確認

まず、Node.jsが実際にJavaScriptコードを実行できるかテストしてみます。

ターミナル(またはコマンドプロンプト)で以下のコマンドを実行してください。

node -e "console.log('Hello, Node.js!')"

このコマンドは、-eオプションを使ってコマンドライン上で直接JavaScriptコードを実行します。

正常に動作していれば、以下のような出力が表示されます。

Hello, Node.js!

npm の動作確認

次に、npmが正常に動作するかも確認してみましょう。

npm --help

このコマンドを実行すると、npmの使用方法やコマンドの一覧が表示されます。

正常に動作していれば、以下のような内容が表示されるはずです。

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ...

バージョン情報の詳細確認

Node.jsとnpmの詳細なバージョン情報を確認することもできます。

node --version
npm --version

さらに、Node.jsの設定情報を確認したい場合は、以下のコマンドが役立ちます。

npm config list

このコマンドで、npmの設定状況や、Node.jsのインストールパスなどの情報を確認できます。

トラブルシューティング

もしインストールがうまくいかない場合は、以下の点を確認してみてください。

Windows の場合

  • インストーラーを「管理者として実行」で起動してみる
  • セキュリティソフトがブロックしていないか確認する
  • コマンドプロンプトを再起動してみる

Mac の場合

  • ターミナルを再起動してみる
  • which nodeコマンドでNode.jsのインストール場所を確認する
  • 権限の問題がある場合は、sudoを使わない方法を検討する

まとめ

本章では、TypeScript開発の基盤となるNode.jsについて学習しました。

習得できた内容は以下の通りです。

  • Node.jsがJavaScriptをブラウザ外で実行するための環境であることを理解しました
  • npmがライブラリ管理ツールとして重要な役割を果たすことを学びました
  • package.jsonがプロジェクトの依存関係を管理するファイルであることを理解しました
  • WindowsとMacそれぞれでのNode.jsインストール方法を習得しました
  • インストール後の確認方法とトラブルシューティングを学びました

これで、TypeScript開発を始めるための基盤が整いました。

Node.jsが正常にインストールされていることを確認できたら、次章ではいよいよTypeScript本体のインストールと設定を行っていきましょう。

TypeScriptの開発環境が完成すれば、型安全なJavaScript開発の世界を体験できるようになります。

作成者:とまだ
Previous
TypeScript開発環境の構築