第6回：Node.jsの環境構築

今回からNode.jsを利用しバックエンドを作成していきます。

Node.jsパッケージを作成する

下記のコマンドでプロジェクトのディレクトリを生成し、Node.jsのプロジェクト生成コマンドを実行します。

$ mkdir back
$ cd back
$ 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 <pkg>` 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: (back) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/radiance/git/web-learning-loadmap/back/package.json:

{
  "name": "back",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes) yes

ディレクトリ内にpackage.jsonだけ生成されます。
これがNode.jsパッケージの設定ファイルになります。

Node.jsでJavaScriptを実行する

1) back/index.jsファイルを作成し、下記の内容を記載します。

console.log('Hello World !');

2) 作成したJavaScriptを実行する
Node.jsでJavaScriptを実行するには下記のコマンドを実行します。

$ node index.js

JavaScriptが実行され、標準出力に文字が出力されます。

Hello World !

パッケージのスクリプト機能を利用して実行してみる

Node.jsパッケージにはコマンドラインをスクリプトとして登録し実行を簡単にする機能があります。
1) package.jsonを開き、scriptsを下記のように修正します。

  "scripts": {
    "start": "node index.js"
  },

2) スクリプトを実行してみる
スクリプトとして登録した"start"のキーワードを呼び出してみます。

$ npm run start

node index.jsが実行され、JavaScriptが動作します。

> node index.js

Hello World !

キーワード"start"は特別で、runを省略して実行することができます。$ npm start

index.jsはもう利用しませんので削除してください。

TypeScriptを利用する

より綺麗で再利用可能なプログラムを書くために、TypeScriptを利用します。
TypeSciptはNode.jsのモジュールで、独自の記法のTypeSciptファイルをJavaScriptファイルにビルドする機能を提供します。
1) Node.jsのtypescriptモジュールをパッケージにインストールします。

$ npm install typescript

package.jsonにモジュールが追加されました。

  "dependencies": {
    "typescript": "^4.0.2"
  }

node_modulesディレクトリ配下にインストールされたモジュールの本体がダウンロードされています。

2) TypeScriptの設定ファイルを作成する。
pacakge.jsonと同じ階層にtsconfig.jsonを作成します。
内容は下記のように記載します。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./build",
    "types": ["node"]
  },
  "exclude": [
    "node_modules"
  ]
}

3) 最初に起動するTypeScriptファイルを作成する
app/main.tsを作成し、下記の内容を記載します。

console.log('Hello World !');

TypeScriptはクラスを利用した構文で書きますが、一番最初に起動されるファイルはJavaSciprtと同じ記載方法です。

4) ビルドする
下記のコマンドを実行し、TypeScriptで記載したコードをビルドします。

$ node_modules/typescript/bin/tsc

下記のエラーが発生するので、@types/nodeモジュールをインストールします。

error TS2688: Cannot find type definition file for 'node'.

$ npm install @types/node

再度ビルドするとエラーは解消します。
ビルド結果はbuildディレクトリ配下に出力されます。

5) ビルドしてできたJavaScriptファイルを実行する

$ node build/app/main.js
Hello World !

6) ビルド、実行を行うスクリプトを追加する

package.jsonにビルド、実行を行うスクリプトを追加します。

  "scripts": {
    "build": "tsc",
    "start": "node build/app/main.js"
  },

package.jsonのscriptsではnode_modules/{パッケージ名}/bin/の下にある実行ファイルはパスを省略して実行することができます。

ビルド

$ npm run build
> tsc

実行

$ npm start
> node build/app/main.js

Hello World !

ビルドと実行を一度のコマンドで動かすには、scriptを下記のように&&で連結して記載します。

  "scripts": {
    "build": "tsc",
    "start": "tsc && node build/app/main.js"
  },

最後に

今回はバックエンドの環境を構築しました。次回はニュースフィード一覧を取得するREST APIを作成します。
今回開発したソースコードはGitHubに入っています。