Node.jsとは?できることや始め方を初心者向けに解説

Node.jsとは?できることや始め方を初心者向けに解説

Iori Suzuki

Iori Suzuki

はじめまして。新卒エンジニアの鈴木です! 今回は「Node.jsとは何か?」を、自分の言葉でしっかり解説していきます。

Web開発をしていると、一度は耳にするNode.js。僕も何度か調べてみたのですが、いまいちピンとこなくて……。でも調べていくうちに、「あ、そういうことか!」とスッと理解できた瞬間があったんです。

この記事では、「Node.jsって名前は聞くけど、正直よくわからない……」という方に向けて、できるだけわかりやすくお伝えします。

フロントエンドの開発経験はあるけど、バックエンドはまだ自信がないという方も、ぜひ一緒に学んでいきましょう!

Node.jsとは

Node.jsは、JavaScriptをブラウザの外でも動かせるようにした仕組みのことです。

Node.jsを調べると、最初に出てくるのが「サーバーサイドでJavaScriptが書けるようになる」とか「JavaScriptの実行環境です」みたいな説明ばっかりで、正直「は? どういうこと?」って感じでした。

「JavaScriptの実行環境って……いや普通にブラウザで動いてるじゃん?」って思ってたんですよ。

でもこれ、半分合ってて半分違うんです。

実はJavaScriptってもともとはブラウザの中だけで動く言語なんですよね。

なのでNode.jsは「ブラウザじゃない場所=サーバーとかPC上でもJavaScriptが動くようにした環境」というわけです。このことを知らないまま、なんとなく敬遠していました。もったいない……

つまりNode.jsは、JavaScriptを「ブラウザの外」で使うための仕組みなんです。それさえ知っていれば、ちょっとわかった気になれませんか?

Node.jsで何ができるの?

Node.jsが何かざっくり理解したところで、具体的に何ができるかをいくつか紹介していきます!

サーバーサイドアプリケーション開発

Express、Nestなどのフレームワークを使用して、Webサーバーやログイン機能付きのシステムなどを構築できます。もともとNode.jsは大量の同時接続に耐えられることを目的として設計されたようで、非同期I/O処理によって効率的に処理することができます。

APIサービスの構築

RESTful APIやGraphQL APIを簡単に構築できます。JSONデータの処理に優れており、フロントエンドアプリケーションやモバイルアプリとのデータ通信の中継役となります。リクエスト処理、レスポンス形成、ミドルウェア設計が容易で、マイクロサービスアーキテクチャの実装にも適しています。

リアルタイムアプリケーション

Socket.IOやWebSocketを使用して、チャットアプリやオンラインゲームなどのリアルタイム処理が必要なアプリケーションを作成できます。通常のWebサイトは更新ボタンを押さないと新しい情報が表示されませんが、Node.jsを使うと、チャットアプリのように相手のメッセージがすぐに表示されるような仕組みが作れます。

IoTデバイスのプログラミング

センサーやアクチュエーターと連携してリアルタイムにデータを取得したり、それに応じた動作をさせることができます。スマホアプリやフロントエンドとつないで、外部からデバイスの状態を確認したり操作したりすることもできます(これやってみたい)

Node.jsが選ばれる理由とメリット

以下では、Node.jsの代表的なメリットを4つにまとめて紹介します!

非同期処理とイベント駆動でスケーラブルな処理が可能

Node.jsは「処理待ちで止まらない」仕組み(非同期処理)が得意です。チャットアプリやゲームのようなリアルタイム通信にも強く、大人数から同時にアクセスがあってもサクサク動きます。PHPやRubyよりも同時処理に強いのがポイントです。

npmでライブラリが豊富&導入が簡単

npm(Node Package Manager)いう仕組みで、便利な機能を簡単に追加できます。これにより、アプリケーション開発時に必要な機能をすぐに追加でき、開発スピードを大幅に向上させます。

JavaScriptひとつでフロントもバックも書ける

フロントエンド(ReactやVueなど)とバックエンド(Node.js)をどちらもJavaScriptで書けるので、開発者はコードの一貫性を保ちながら、フルスタックアプリケーションの開発が可能になります。PHPやPythonでは別々の言語で書く必要がありますが、Node.jsならまとめて学べて効率的です

学習コストが低く、JavaScript経験者にとくに入りやすい

すでにJavaScriptに触れたことがあるなら、Node.jsはすぐに始められます。文法がほとんど同じなので、フロントエンドからバックエンドへのステップアップにも最適です。PythonやRubyと比べても、JavaScript経験者にとっては圧倒的に入りやすいです。

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

ここからは実際にNode.jsに触れていきます。Windowsでのインストール手順と、Node.jsがちゃんと動くか確認する方法を紹介します!

1. Node.js公式サイトからインストールする

Node.jsのHPからインストーラをダウンロードします。

image

OS、バージョン(推奨版)を確認して、インストーラをダウンロードしてください。

インストーラの手順は基本的に「Next」を押していけばOKですが、ポイントが2つあります。

 
image

「I accept the terms in the License Agreement」にチェックを入れて次へ。

 
image

「必要なツールを自動的にインストールします」的なことが書かれています。このようなツールは必要になったときに自分で入れればよいので、チェックを外したまま次へ。

 
image

これでインストールが完了しました!

2. 動作確認をしよう

image

次は動作確認をしたいと思います。「windowsキー + R」で「ファイル名を指定して実行」を開き「cmd」と入力します。

 
image

コマンドプロンプト(ターミナル)が開いたら「node -v」と入力して、バージョンが出ていれば問題ありません!

Node.jsでサーバーを立ててみよう

ここからは、Node.jsを使って自分でサーバを立ててみます。

最初に簡単な「Hello Node」と表示するサーバを作って、HTTPリクエストとレスポンスの仕組みを理解していきましょう。

前提:HTTPリクエストとレスポンス

……と、その前に、「HTTPリクエスト」と「HTTPレスポンス」について復習しましょう。
(そんなの知ってるよという方は飛ばしてください)

HTTPリクエストとは?

簡単に説明すると、クライアント(ブラウザなど)がサーバーに対して「これちょうだい!」とお願いをする通信のことです。

Webサイトを表示するには、以下のStepを踏む必要があります。

  1. ユーザーが http://example.com にアクセス
  2. ブラウザがサーバーに HTTPリクエスト を送信
  3. サーバーがそれを受け取って レスポンス(HTMLなど)を返す

今回はあまり重要ではないので軽く触れる程度にしますが、面白いので興味のある方はぜひ調べてみてください。

HTTPレスポンスとは?

今回Node.jsでこのHTTPレスポンスを書いていくので、ここを理解しないと何をしているかまったくわからないと思います。ぜひ理解してもらいたいです!

HTTPレスポンスは、クライアント(ブラウザなど)に対してサーバーが返す「返事」のようなもので、「リクエストの結果どうなったか」と「どんなデータを返すか」などの情報を含んでいます。

主に以下の3つの要素で構成されています。

ステータス行 ステータス行にはHTTPリクエストの結果を表示します。この結果を「ステータスコード」といい、ステータスコードを大まかに分類すると以下のようになります。

  • 100番台:リクエストが受け入れ可能で、継続して処理されている状態
  • 200番台:リクエストが正しく受理された状態
  • 300番台:リダイレクトや移行など、リクエストを達成するために追加の処理が必要な状態
  • 400番台:リクエストが正しく処理できない状態
  • 500番台:サーバーが内部的な問題によりリクエストを処理できなかった状態

代表的なものは、正常に処理できたことを示す「200」や、指定したリソースが見つからなかったことを示す「404」などです。みなさんも一度は聞いたことがあるかと思います。
(ホテルで404号室になったときに盛り上がるのはエンジニアあるあるなはず……)

レスポンスヘッダ レスポンスヘッダは、ステータスコードでは伝えきれない情報を送るためのものです。データの中身の形式(HTMLやJSONなど)やキャッシュについての情報を書いたりします。
レスポンスボディ ここには実際にユーザーに届けたいコンテンツを表示します。HTMLやJSONがここに入ります。

1. サーバーを構築する

Node.jsでHTTPサーバを構築しよう
こちらのサイトを参考にさせていただきました。

VSCodeで空のフォルダにmain.jsを作成してください。

今回はNode.jsにもとから含まれている「http」というモジュールを利用します。モジュールを読み込むにはrequire関数を利用します。

javascript

const http = require("http");

このようにすることで、require(“http”)で読み込み、定数httpに格納できます。このhttpからメソッドを呼び出しながら設定していきます。

HTTPサーバの構築にはcreateServerメソッドを利用します。

javascript

const server = http.createServer((request, response) => {
  //リクエストが来たときの処理を記述
});

createServer メソッドは、リクエストが来たときに実行されるイベントハンドラを登録するためのメソッドです。簡単に言うと、リクエストが来たらこの中の処理をしてくれるイメージです。

ではレスポンスを書いていきましょう。

javascript

const server = http.createServer((request, response) => {
    response.writeHead(200,{
        "content-type": "text/html"
    });
	response.write("<h1>Hello Node</h1>");
	response.end(); 
});

このように書くと、リクエストが来たときに「Hello Node」と出力されるようになります。

HTTPレスポンスを思い出しながら解説していきます。

response.writeHead()では第一引数にステータスコード、第二引数にレスポンスヘッダを書いています。強制的に成功にして、HTML形式のデータを送信するよって意味です。

response.write()ではレスポンスボディを書いています。そしてresponse.end()でレスポンスが終わりということを明記しています。

ちなみに今回のようにレスポンスボディが一行の場合は、以下のようにまとめて書くこともできます。

javascript

response.end("<h1>Hello Node</h1>");

これでHTTPリクエストは完成です。

2. ポートを指定して起動する

最後にポート番号を指定します。ポート番号とは、簡単に言うとサーバーの入り口番号みたいなイメージです。

それでは記述していきます。

2行目に以下のコード

javascript

const port = 3000;

最後の行に以下のコード

javascript

server.listen(port);
console.log(`The server has started and is listening on port number: ${port}`);

これで準備が整いました!

3. 実行してブラウザで確認する

「control + @」を押してコマンドプロンプト(ターミナル)を表示して以下のコマンドを実行します。

bash

> node main.js

エラーがなければ「The server has started and is listening on port number: 3000」とコンソールに出てくると思います。

この状態でhttp://localhost:3000/にアクセスすると……

image

ちゃんと表示できました!!

全体コード

最後にコード全体を載せておきます。

javascript

const http = require("http");
const port = 3000;

const server = http.createServer((request, response) => {
    response.writeHead(200,{
        "content-type": "text/html"
    });
    response.end("<h1>Hello Node</h1>");
});
server.listen(port);
// console.log(`The server has started and is listening on port number: ${port}`);

まとめ

今回はNode.jsの定義からはじまり、できることやメリットの解説、実際にサーバー構築までやってみました。

JavaScriptの実行環境なだけあっていろいろなところで使えそうですね! 初めてHTTPサーバを立ててみましたがシンプルなコードでわかりやすく、ちょっと感動しました。

次回からはNode.jsを使ってAPIなどを作っていきたいと思います。ご覧いただきありがとうございました。

この記事のシェア数

DX部所属。Web制作・開発業務を担当。学生時代にHTML/CSS、JavaScript、PHP、Java、Pythonなどのプログラミング言語に加え、データベースやクラウドサービスの基礎技術を習得。Vue.js、React、Laravelを用いた開発経験を積み、LIGに新卒入社。

このメンバーの記事をもっと読む
10年以上の開発実績があるLIGが、最適な開発体制や見積もりをご提案します
相談する サービス詳細を見る