// Tutorial //

Typescriptでノードプロジェクトをセットアップする方法

Published on January 5, 2021
Default avatar
By Jordan Irabor
Developer and author at DigitalOcean.
日本語
Typescriptでノードプロジェクトをセットアップする方法

はじめに

Nodeは、サーバーサイドJavaScriptの記述を可能にするランタイム環境です。2011年のリリース以来、広く採用されています。サーバーサイドJavaScriptの記述は、JavaScript言語の性質上、動的弱い型付けなので、コードベースが肥大化していき、困難な作業です。

他の言語をからJavaScriptを始める開発者は時に、静的で強い型付けに欠けている面に不満を感じますが、TypeScriptはそのギャップを埋めてくれます。

TypeScriptは、大規模なJavaScriptプロジェクトの構築・管理に役立つ型付け(オプション)スーパーセットです。静的で強い型付け、コンパイル、オブジェクト指向プログラミングなどの追加機能を持つJavaScriptとして考えられます。

注: TypeScriptは、技術的にはJavaScriptのスーパーセットです。つまりJavaScriptコードはすべて、有効なTypeScriptコードであるといえます。

以下にTypeScriptを使用するメリットを挙げます。

  1. オプションの静的型付け。
  2. 型推論。
  3. インターフェースが利用可能。

このチュートリアルでは、NodeプロジェクトとTypeScriptをセットアップします。TypeScriptを使用してExpressアプリケーションを構築し、それを整然とした信頼性の高いJavaScriptコードにトランスパイルします。

前提条件

このガイドを始める前に、Node.jsをマシンにインストールします。ガイドNode.jsをインストールしてローカル開発環境を整えるを参照して、これを実施してください。

ステップ1 — npmプロジェクトの初期化

まず、node_projectという新しいフォルダを作成し、そのディレクトリに移動します。

  1. mkdir node_project
  2. cd node_project

次に、npmプロジェクトとしてそのフォルダを初期化します。

  1. npm init

npm initを実行した後、プロジェクトに関する情報をnpmに提供します。npmに妥当なデフォルトを推論させたければ、yフラグを付けて追加情報のプロンプトをスキップできます。

  1. npm init -y

プロジェクトスペースがセットアップされ、必要な依存関係をインストールする準備が整いました。

ステップ2 — 依存関係をインストールする

最小限のnpmプロジェクトが初期化されると、次のステップは、TypeScriptの実行に必要な依存関係のインストールです。

プロジェクトディレクトリから次のコマンドを実行して、依存関係をインストールします。

  1. npm install -D typescript@3.3.3
  2. npm install -D tslint@5.12.1

-Dフラグは、 --save-devのショートカットです。このフラグの詳細についてはnpmjsドキュメントを参照してください。

それではExpressフレームワークをインストールしましょう。

  1. npm install -S express@4.16.4
  2. npm install -D @types/express@4.16.1

2つ目のコマンドは、TypeScriptをサポートするExpressのタイプをインストールします。TypeScriptのタイプはファイルで、通常は.d.tsという拡張子が付きます。これらのファイルはAPIに関するタイプ情報(この場合はExpressフレームワーク)の提供に使用します。

TypeScriptと Expressは独立したパッケージなので、このパッケージが必要です。@type/expressパッケージがなければ、TypeScriptがExpressクラスのタイプを知る方法はありません。

ステップ3 — TypeScriptの設定

このセクションでは、TypeScriptをセットアップしてTypeScriptのLintチェックを設定します。TypeScriptは、tsconfig.jsonというファイルを使用して、プロジェクトのコンパイラオプションを設定します。プロジェクトのrootディレクトリにtsconfig.jsonファイルを作成し、次のスニペットを貼り付けます。

tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

上記JSONスニペットの重要部分を見ていきしょう。

  • module: モジュールコード生成方法を指定します。Nodeはcommonjsを使用します。
  • target:出力言語レベルを指定します。
  • moduleResolution: インポートが参照するものをコンパイラに理解させます。値nodeは、Node module resolution機構を模倣します。
  • outDir: トランスパイル後の.jsファイルの出力先です。このチュートリアルでは、distとして保存します。

tsconfig.jsonファイルを手動で作成、記入する代わりに次のコマンドを実行することもできます。

  1. tsc --init

このコマンドは、コメント付きのtsconfig.jsonファイルを生成します。

利用可能なキー値オプションの詳細について詳しく知るには、公式TypeScriptドキュメントを参照してください。

これで、プロジェクトのTypeScript Lintチェックを設定できます。プロジェクトのrootディレクトリで稼働しているターミナル、つまりこのチュートリアルがnode_projectとして確立したターミナルで、次のコマンドを実行してtslint.jsonファイルを生成します。

  1. ./node_modules/.bin/tslint --init

新たに生成されたtslint.jsonファイルを開いて、no-consoleルールを追加します。

tslint.json
{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "no-console": false
  },
  "rulesDirectory": []
}

TypeScript Lintツールはデフォルトでコンソールステートメントを使用したデバッグを妨げるため、Lintツールにデフォルトのno-consoleルールを無効にするよう明示的に指示する必要があります。

ステップ4 — package.jsonファイルの更新

この時点で、ターミナルで関数を個別に実行するか、npmスクリプトを作成して実行することができます。

このステップでは、TypeScriptコードをコンパイルしてトランスパイルするstartスクリプトを作成し、結果の.jsアプリケーションを実行します。

package.jsonファイルを開き、適宜更新します。

package.json
{
  "name": "node-with-ts",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.16.1",
    "tslint": "^5.12.1",
    "typescript": "^3.3.3"
  },
  "dependencies": {
    "express": "^4.16.4"
  }
}

上記のスニペットでは、mainパスを更新し、startコマンドをscriptsセクションに追加しています。startコマンドを見ると、最初にtscコマンドが、続いてnodeコマンドが実行されるのがわかります。このコマンドは、nodeで生成された出力をコンパイルし、実行します。

tscコマンドは、tsconfig.jsonファイルの設定通り、アプリケーションをコンパイルし、生成された.js出力を指定したoutDirディレクトリに配置するよう、TypeScriptに指示します。

ステップ5 — Basic Expressサーバーの作成と実行

TypeScriptとそのlintツールが設定されたので、次はNode Expressサーバーを構築しましょう。

まず、プロジェクトのrootディレクトリにsrcフォルダを作成します。

  1. mkdir src

次に、そのフォルダ内にapp.tsという名前のファイルを作成します。

  1. touch src/app.ts

この時点で、フォルダ構造は次のように見えるはずです。

├── node_modules/
├── src/
  ├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json

app.tsファイルを任意のテキストエディタで開き、次のコードスニペットを貼り付けます。

src/app.ts
import express from 'express';

const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});

上記のコードは、ポート3000でリクエストをlistenするノードサーバーを作成します。次のコマンドを使用してアプリケーションを実行します。

  1. npm start

実行が成功すると、メッセージがターミナルに表示されます。

  1. Output
    server is listening on 3000

これで、ブラウザでhttp://localhost:3000にアクセスできます。次のメッセージが表示されます。

  1. Output
    The sedulous hyena ate the antelope!

メッセージ「The sedulous hyena ate the antelope!」を表示するブラウザウィンドウ

dist/app.jsファイルを開くと、TypeScriptコードのトランスパイル版が表示されます。

dist/app.js
"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = express_1.default();
const port = 3000;
app.get('/', (req, res) => {
    res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
    if (err) {
        return console.error(err);
    }
    return console.log(`server is listening on ${port}`);
});

//# sourceMappingURL=app.js.map

この時点で、ノードプロジェクトがTypeScriptを使用するように、正常にセットアップされました。

まとめ

このチュートリアルでは、TypeScriptが信頼性の高いJavaScriptのコードを作成するのに役立つ理由について学びました。さらに、TypeScriptで作業するメリットについても学びました。

最後に、NodeプロジェクトのセットアップにはExpressフレームワークを使用しましたが、プロジェクトのコンパイル・実行にはTypeScriptを使用しました。


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!