Tutorial

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

Published on January 6, 2021
author

Jordan Irabor

日本語
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を使用しました。

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author(s)

Category:
Tutorial
Tags:

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment
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!

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.