こんにちは、Ryohei(@ityryohei)です!

本記事では、Node.jsの最初の一歩ということで、プロジェクトの作成からWebサーバーの起動までの流れをご紹介しています。

Node.jsの環境は構築できたけど、Webサーバーの起動はどうすればいいんだろう?

上記の疑問にお答えします。

では、解説していきます。

npmプロジェクトを初期化する

まずはプロジェクトを初期化してpackage.jsonを作成します。(package.jsonはプロジェクトの情報や必要なライブラリなどが記載されたファイルです。)

ディレクトリはどこでも構いませんので、コマンドプロンプトやターミナルを開いて対象のディレクトリまで移動します。

$ cd /Node/sample

私はWindows環境なのでコマンドプロンプトになります。上記の例では「Cドライブ」>「Node」>「sample」にディレクトリを移動しています。

対象のディレクトリに移動出来たら、プロジェクトを初期化するコマンドを実行します。

$ npm init

実行すると対話式でプロジェクトを作成することができます。とりあえずは何も入力せずに最後までエンターを連打していただいて大丈夫です。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (sample)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Node\sample\package.json:

{
“name”: “sample”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “ISC”
}
Is this OK? (yes)

最終行の「Is this OK?」に対してエンターを押下すると、プロジェクトフォルダの配下に「package.json」なるファイルが作成されます。「package.json」が作成されましたら無事プロジェクトの初期化は完了です。

続いてWebサーバーを起動する際に実行するファイルを作成していきます。

Webサーバーを生成するスクリプトファイルを作成する

上記で作成したプロジェクトに移動します。

$ cd /Node/sample

現在対象のディレクトリ配下には「package.json」のみが存在する状態かと思います。そこに「server.js」というファイルを新規作成します。いつもJSファイルを作る手順で問題ありません。「server.js」はWebサーバーを起動する際に実行するファイルになります。

/Node/sample/server.js

では、上記に作成した「server.js」にWebサーバーを起動するためのスクリプトを作成していきます。

まずはプログラミング学習の最初の一歩である「Hello World!」をブラウザに表示してみます。(「Hello World!」で始めるのが嫌な場合は好きな文字列に変更していただいて大丈夫です!)

新しい言語はとにかく慣れが必要です。できればコピペではなく自分の指でスクリプトを打ち込んでみてくださいね。

const http = require('http');

const server = http.createServer((request, response) => {
response.writeHead(200, { 'Content-Type': 'text/html' });
response.end('Hello World!');
});

server.listen(8080);

スクリプトは入力できたでしょうか。実行してページの表示を確認してみましょう。

Node.jsでは下記のコマンドでWebサーバーを起動することができます。まずは入力・実行して結果を確認してみましょう。

$ node server.js

実行してもコマンドプロンプトには何も表示されません。カーソルが一行下に移動したと思いますが、それで問題ありません。スクリプトにエラーがなければWebサーバーは起動しています。

実行結果を確認するために下記のURLにアクセスしてみてください。「Hello World!」という文字列がブラウザに表示されるはずです。

http://localhost:8080/

無事指定した文字列は表示されたでしょうか。これで最初の一歩であるWebサーバーの起動を達成することができました!

では上記で入力したスクリプトが何をしているのか、詳しく見ていきましょう。

スクリプトの内容について

上記で記述したスクリプトの内容を簡単にご説明します。スクリプトの各行にコメントを記載しておりますので、参考にしていただければと思います。


//httpモジュールを読み込む
const http = require('http');

//httpのcreateServerメソッドでWebサーバーを構築
const server = http.createServer((request, response) => {

//この中にWebサーバー側の処理を記述する

//responseオブジェクトのwriteHeadメソッドでヘッダ情報の書き出し
response.writeHead(200, { 'Content-Type': 'text/html' });
//responseオブジェクトのendメソッドで処理を完了(引数が指定されている場合はそれを書き出す)
response.end('Hello World!');
});

//localhostの8080ポートで待機(ブラウザからアクセスできるようになる)
server.listen(8080);

モジュール?メソッド? わけがわからん…

もしかしたら、言葉自体がわからない方もいらっしゃるかもしれません。

けれどこれから「Node.js」を学習を進めていく中で言葉の意味を理解できる日がきます。焦らずゆっくり進めていっていただければと思います。

最後に

Node.jsで最初の一歩!ということでWebサーバーを起動するところまでをまとめてみました。

本来であれば「Node.js」のインストールから始める必要があるのかもしれないですが、長くなりそうなので割愛しました。(いつかちゃんと記事にしたいなとは思っています。)

私自身「Node.js」は個人開発のWebアプリで使用した程度ですので、これから皆さんと一緒ん理解を深めていければと考えています。いつかは社内でも採用できる日が来るといいな~

以上、Node.jsで最初の一歩!Webサーバーを起動する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。