【Node.js】Express + TypeScript での Hello World までの手順を解説

Node.js, Express, および TypeScript を使用して「Hello World」アプリケーションを作成する手順を詳細に説明します。

前提条件

• Node.jsがインストールされていること。 インストールされていない場合は、Node.jsの公式ウェブサイトからダウンロードしてインストールしてください。
• 基本的なコマンドライン操作に慣れていること。

本手順は macOS で実施していますが、Windows の場合も大きくは変わりません。

ステップ 1: プロジェクトのセットアップ

プロジェクトディレクトリを作成

まずは作業用のフォルダを作成し、そのフォルダに移動します。 フォルダ名は任意の名前で構いません。

mkdir hello-world
cd hello-world

npmを初期化

新しい Node.js プロジェクトのための package.json ファイルを生成します。

npm init -y

-y フラグはデフォルト設定で進めることを意味します。package.json はプロジェクトの依存関係やスクリプトなどを管理します。

ステップ 2: 必要なパッケージのインストール

Express をインストール

Express をプロジェクトに追加します。

npm install express

Express は Node.js のための軽量で柔軟なWebアプリケーションフレームワークです。

個人的には、Node.js のプロジェクトであれば Express はもはやデファクトスタンダードですね。

TypeScript と関連ツールをインストール

TypeScript とその実行に必要なツールをインストールします。

npm install typescript ts-node @types/node @types/express --save-dev

• typescript は TypeScript 言語自体のコンパイラです。
• ts-node は TypeScript を直接実行するためのツールです。
• @types/node と @types/express は、それぞれNode.jsとExpressのためのTypeScriptの型定義を提供します。

ステップ 3: TypeScript の設定

TypeScript の設定ファイルを生成

TypeScriptの設定ファイル tsconfig.json を生成します。

npx tsc --init

このファイルでは、TypeScriptのコンパイルオプションを設定できます。

ステップ 4: Hello World アプリの作成

アプリケーションファイルを作成

• index.tsという名前の新しいファイルを作成します。
• 以下のコードをindex.tsに追加します。

import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

index.ts は、アプリケーションの主要なコードが含まれる TypeScript ファイルです。

このファイルに記述されたコードは、 Express を使ってWebサーバーを構築し、ルートURL（/）にアクセスした際に Hello World! というメッセージを返します。

ステップ 5: アプリケーションの実行

package.json にスクリプトを追加

package.jsonを開き、scriptsセクションに以下を追加します。

"start": "ts-node src/index.ts"

package.json ファイルに "start": "ts-node src/index.ts" を追加することで、 npm start コマンドを実行するとアプリケーションが開始されます。

ts-node src/index.ts は、作成したTypeScriptファイルを実行します。

アプリケーションを実行

npm start

ブラウザで http://localhost:3000 にアクセスして、「Hello World!」 が表示されることを確認します。

おわりに

慣れていれば一連の流れもスムーズに行えますが、初心者の場合は調べながら進めるので時間がかかりますよね。

今や TypeScript で実装するのが当たり前と言っても良い時代なので、Express だけではなく、セットで使えるようにしておきたいですね。

プログラミングTypeScript スケールするJavaScriptアプリケーション開発 [ Boris Cherny ] 楽天で購入