ネット上に初めて記事を投稿してみます。
足らぬところがいろいろあるとは思いますが、よろしくお願いいたします。
リンク一覧
- Node.jsとExpressでローカルサーバーを構築する(1) ―Node.jsとnpmの導入―（本記事）
- Node.jsとExpressでローカルサーバーを構築する(2) ―Expressでルーティング―
- Node.jsとExpressでローカルサーバーを構築する(3) ―JSONを返すスタブAPI―
- Node.jsとExpressでローカルサーバーを構築する(4) ―他サーバーから画像を取得する―
概要
この記事の概要
- 目的
- Node.jsを利用して、PC上にローカルサーバーを立ち上げる
- 本記事のゴール
- ブラウザで「localhost:8080」にアクセスすると、「HelloWorld」が返ってくる
- 対象者
- WEBフロント担当者
- HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人
- HTTP通信、GET、POSTなどについて、ある程度理解している人（ざっくりで良いです）
- 黒い画面にコマンドを打ち込むことに抵抗がない方
- 環境・バージョン
- Windows10
- Node.js(推奨版) 10.15.01
- npm 6.4.1
なお、本記事で“コマンドプロンプト”が登場しますが、実際に筆者が使っているのは“GitBash”です。
Windows標準で搭載されているコマンドプロンプトより使いやすいので、おすすめです。
WindowsでGitを始めたらまず確認！Git Bashの設定&ショートカット | 株式会社グランフェアズ
Node.js
サーバサイドで動作するJavaScriptの実行環境の事を指します。
コアモジュールと呼ばれる、サーバーサイド向けの標準機能を実装したライブラリ群が含まれています。これらはブラウザのJSとは別に存在する独自の機能です。逆にブラウザ操作用の機能は持っていません。
頻繁にアップデートがあり、時には互換性のないアップデートが行われることもあるため、nvmというパッケージ管理ツールを用いてバージョンを管理するそうですが、割愛いたします。
公式サイト：Node.jsとは（日本語）
Windowsでnvmを利用してNode.js環境を整える
npm
Node.jsの開発で利用するパッケージの管理をするためのツールです。（Node Package Manager の略）
どのパッケージのいつのバージョンを利用しているのか、「package.json」というファイルに書き留めて管理します。
クライアントサイドの開発で利用するパッケージも一緒に管理できます。
公式サイト：About npm（英語）
npm入門 - Qiita
Node.jsとnpmの導入
ダウンロードとインストール
公式サイトよりダウンロードします。
npmはNode.jsにあらかじめ含まれているため、別途ダウンロード作業をする必要はありません。
公式サイト：ダウンロード
基本的に、デフォルトの設定で「yes」をクリックしていくと、インストールが完了します。
細かな手順につきましては、こちらの記事でご確認いただけます。
Node.js / npmをインストールする（for Windows）
執筆時点での推奨版は10.15.01です。
サーバーを構築する
プロジェクトの開始
作業用に任意のフォルダを準備します。
コマンドプロンプトでこのフォルダまで移動し、下記コマンドを実行します。
$ npm init -y
このコマンドでは、このフォルダでプロジェクトを始めまーす!と、npmに伝えています。
-yは、とりあえず規定の値でpackage.jsonを作成してください！という意味です。おまかせコースです。
省いた場合、npmが「どういうプロジェクトなの？」と英語であれこれ聞いてきます。きちんと答えるか、Enterキーで相槌を打ってやり過ごすかすると、聞き取り終了後にpackage.jsonといファイルが下記の内容で生成されます。
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
package.json
プロジェクトの概要が記述されています。パッケージ名、バージョン、ライセンスなどなど。公開予定のパッケージを制作する場合は、適切に記載しなくてはなりません。
今回はローカルサーバを構築するだけの目的ですので、規定値のままにしておきます。
npm package.json 日本語版 取扱説明書
WEBサーバーのアプリケーションファイルを作成する
作業用フォルダに、app.jsといJavaScriptファイルを用意し、下記コードを記述します。
Node.jsで、最低限の機能を有するサーバを構築する為のコードはこのような感じです。
const http = require('http');
const server = http.createServer((req, res)=>{
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!!');
});
server.listen(8080);
まず、コアモジュールの一つであるhttpモジュールを読み込みます。
HTTPサーバーとしての機能を提供してくれるモジュールです。
HTTP | Node.js v10.x Documentation（英語）
const http = require('http');
次にhttpのcreateServerメソッドを用いてサーバを生成して変数に格納します。
const server = http.createServer((req, res)=>{...
この際に渡すコールバック関数は、リクエスト受付時の対応処理です。reqはリクエストの詳細、resはレスポンスを送り返すためのツール群が含まれています。
writeHeadメソッドでレスポンスのヘッダーを指定し、「Hello World」というテキストメッセージを返しています。
そして生成されたサーバオブジェクト（server)のlistenメソッドを実行してリクエストの受付を開始します。引数に渡している数字はポート番号です。
server.listen(8080);
そして、コマンドプロンプト上で下記コマンドを実行します。（作業用フォルダに移動した上で）
「nodeさんapp.jsファイルを実行してください」
$ node app.js
これでサーバーが立ち上がったので、ブラウザよりlocalhost:8080へアクセスしてみます。
無事にレスポンスを受け取れました！！
終了する場合は、サーバーを立ち上げるコマンドを実行したコマンドプロンプト上でCtrl+Cを入力して、プロセスを終了させます。
正直なところ、これだけでフロント制作に取り掛かることは出来ませんね。
次回は、Node.jsのExpressというフレームワークを利用して、もっと実用的な形にしていきたいと思います。
初心者の拙い記事を読んでいただき、ありがとうございました。
お役に立てていたら幸いです。
参考情報
Node.js公式サイト：Getting Started Guide（英語）
Windows版 Node.js環境構築方法まとめ - Qiita