Node.js, Express, および TypeScript を使用して「Hello World」アプリケーションを作成する手順を詳細に説明します。
前提条件
- Node.jsがインストールされていること。 インストールされていない場合は、Node.jsの公式ウェブサイトからダウンロードしてインストールしてください。
- 基本的なコマンドライン操作に慣れていること。
本手順は macOS で実施していますが、Windows の場合も大きくは変わりません。
ステップ 1: プロジェクトのセットアップ
プロジェクトディレクトリを作成
まずは作業用のフォルダを作成し、そのフォルダに移動します。 フォルダ名は任意の名前で構いません。
mkdir hello-world
cd hello-worldnpmを初期化
新しい Node.js プロジェクトのための package.json ファイルを生成します。
npm init -y-y フラグはデフォルト設定で進めることを意味します。package.json はプロジェクトの依存関係やスクリプトなどを管理します。
ステップ 2: 必要なパッケージのインストール
Express をインストール
Express をプロジェクトに追加します。
npm install expressExpress は Node.js のための軽量で柔軟なWebアプリケーションフレームワークです。
個人的には、Node.js のプロジェクトであれば Express はもはやデファクトスタンダードですね。
TypeScript と関連ツールをインストール
TypeScript とその実行に必要なツールをインストールします。
npm install typescript ts-node @types/node @types/express --save-devtypescriptは 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 だけではなく、セットで使えるようにしておきたいですね。
コメント