ExpressでTypeScriptをセットアップする方法

TypeScriptは、JavaScriptの機能を拡張した、強く型付けされたプログラミング言語です。Node.jsやExpressでのスケーラブルなアプリケーション開発を支えるさまざまな機能をもたらしてくれます。

JavaScriptに対するTypeScriptの顕著な強みの1つが、型クラスにより予測可能で保守性の高いコードを書きやすくすることです。さらに、TypeScriptは型の安全性を確保するため、コード実行前、開発の初期段階での欠陥の検出が容易です。また、リファクタリングと自動補完が付属しており、開発者の利便性を高めます。

さらに、Node.jsとExpressは、どのような規模のアプリケーションでも優れたパフォーマンスを発揮することが可能です。TypeScriptでクラスを使用することで、整理と構造が容易になり、スケーラビリティの向上が期待できます。これを利用して、需要の増大に対応できる堅牢でスケーラブルなアプリケーションを構築可能です。

この記事では、TypeScriptを使用して単一のエンドポイントを持つExpressアプリケーションをセットアップする方法をご紹介します。またアプリケーションをKinstaのアプリケーションホスティングにデプロイする方法にも触れたいと思います。

Expressサーバーの作成方法

説明に沿って作業を進めるには、コンピュータにNode.jsとnpmがインストールされている必要があります。Expressサーバーをセットアップする方法は以下の通りです。

1. 以下のコードを使用してディレクトリを作成します。

   mkdir sample_app && cd sample_app

2. 以下のコマンドを実行して、ディレクトリ内のNode.jsアプリケーションを初期化します。

   npm init -y

   コマンドの-yフラグは、以下のコードでpackage.jsonファイルを作成する際のデフォルトのプロンプトを受け入れます。

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

3. 次に、このコマンドを実行して作成したディレクトリに、必要な機能を追加するためのexpress、環境変数を管理するためのdotenvをインストールします。

   npm i express dotenv

4. sample_appディレクトリのルートに.envファイルを作成し、以下の変数を設定します。

   PORT=3000

5. 以下のように、ユーザーがhttp://localhost:3000にアクセスするとHello Worldテキストで応答するExpressアプリケーションを構築します。

   const express = require("express");
   const dotenv = require("dotenv");
   
   // アプリケーションで動作するようにdotenvを設定する
   dotenv.config();
   const app = express();
   
   const PORT = process.env.PORT;
   
   app.get("/", (request, response) => { 
     response.status(200).send("Hello World");
   }); 
   
   app.listen(PORT, () => { 
     console.log("Server running at PORT: ", PORT); 
   }).on("error", (error) => {
     // エラーの処理
     throw new Error(error.message);
   })

   dotenv.config()は、.envファイルで定義された変数をNodeアプリケーションのプロセス環境（process.env）に入力します。

6. 次のコマンドを実行して、Node.jsアプリケーションを起動します。

   node index.js

   ブラウザでhttp://localhost:3000にアクセスして、アプリケーションが動作するか確認してください。このようなレスポンスが返ってくるはずです。

   

ExpressアプリケーションでTypeScriptを有効にする

ExpressアプリケーションでTypeScriptを使用するには、以下の手順に従ってください。

1. 以下のコマンドを実行してTypeScriptをインストールします。

   npm i -D typescript

   -Dを指定すると、npmが開発依存パッケージとしてパッケージをインストールできるようになります。このオプションでインストールしたパッケージは開発フェーズで使用できます。

2. TypeScriptコミュニティの強みの1つに、DefinitelyTyped GitHubリポジトリがあります。このリポジトリには、さまざまなnpmパッケージの型定義のドキュメントが保存されています。DefinitelyTypedはTypeScript開発者にとって不可欠なツールです。クリーンで効率的なコードを書き、エラーの可能性を減らすことができます。このコマンドを実行すると、expressとdotenvの両方の型定義がインストールされます。

   npm install -D @types/express @types/dotenv

3. TypeScriptを初期化するには、次のコマンドを実行します。

   npx tsc --init

   生成されたtsconfig.jsonファイルが、TypeScriptアプリケーションのルートディレクトリとなります。このファイルには、TypeScriptコンパイラがどのように動作するかを定義する設定オプションがあります。またファイルには、configの一連のオプションの無効化または有効化と、各オプションの説明のコメントが含まれます。

4. configオブジェクトにoutDirプロパティを追加し、出力ディレクトリを定義します。

   {
     "compilerOptions": {
       // …
       "outDir": "./dist"
       // …
     }
   }

TypeScriptサーバーの作成方法

TypeScriptサーバーを作成するには、.jsの拡張子を.tsに変更し、以下の型定義でコードを更新します。

import express, { Request, Response } from "express";
import dotenv from "dotenv";

// アプリケーションで動作するようにdotenvを設定する
dotenv.config();
const app = express();

const PORT = process.env.PORT;

app.get("/", (request: Request, response: Response) => { 
  response.status(200).send("Hello World");
}); 

app.listen(PORT, () => { 
  console.log("Server running at PORT: ", PORT); 
}).on("error", (error) => {
  // エラーの処理
  throw new Error(error.message);
});

コンパイラパッケージを使用してTypeScriptファイルをJavaScriptにコンパイルするには、アプリケーションのルートディレクトリで以下のコマンドを実行します。

npx tsc

その後、コマンドを実行してアプリケーションを起動します。

node dist/index.js

ブラウザでhttp://localhost:3000にアクセスすると、「Hello World」というレスポンスが返ってくるはずです。

TypeScriptサーバーをKinstaにデプロイする方法

これで、アプリケーションをウェブにデプロイする準備が整いました。Kinstaのアプリケーションホスティングなどを使ってプラットフォームにアプリケーションをデプロイすることができます。

アプリケーションをGitリポジトリにプッシュする前に、TypeScriptを使用してコンパイルしたJavaScriptファイルをGitにコミットすることはお勧めしません。package.jsonファイルにstartスクリプトを追加してください。

{
  // …
  "script": {
    "start": "npx tsc && node dist/index.js",
  }
  // …	
}

.gitignoreファイルを作成し、node_modulesと.envをインクルードして、ファイルをGitサービスにプッシュしないようにします。

リポジトリを設定したら、以下の手順に従ってアプリケーションをKinstaにデプロイします。

1. ログインするか、アカウントを作成してMyKinstaを表示
2. GitサービスでKinstaを認証
3. 左サイドバーの「アプリケーション」から「アプリケーションの作成」をクリック
4. デプロイしたいリポジトリとブランチを選択
5. アプリに一意の名前を割り当て「データセンターの所在地」を選択
6. すべてのデフォルト設定を使用（MyKinstaでは、アプリケーションをデプロイするためのエントリポイントとしてnpm startを使用しています。別のコマンドを使用したい場合には、MyKinstaでランタイムプロセスを調整できます）
7. 「今すぐデプロイする」をクリック

デプロイ後、MyKinstaにアプリケーションのURLが表示されます。ページにアクセスして、「Hello World」が表示されていることを確認できます。

まとめ

今回の記事では、TypeScriptを使用してExpressアプリケーションを開発およびセットアップし、Kinstaでアプリケーションをデプロイする方法をご紹介しました。TypeScriptには、JavaScriptにはない特別な機能（型クラス、型安全性、リファクタリング、自動補完など）があり、スケーラブルなアプリケーションを構築したり、開発中にエラーを検出したりするのに有用です。

Kinstaは、高いセキュリティと安定性を搭載したアプリケーションの高速デプロイを支援しています。21箇所のデータセンター、Googleのプレミアムティアネットワーク上で動作するC2マシンをご利用いただけます。

過去にTypeScriptを使ったことはありますか？Expressサーバーでの使用についてどう思いますか？以下のコメント欄からお聞かせください。

Jeremy Holcombe Kinsta

Kinstaのコンテンツ＆マーケティングエディター、WordPress開発者、コンテンツライター。WordPress以外の趣味は、ビーチでのんびりすること、ゴルフ、映画。高身長が特徴。

• LinkedIn