TypeScriptでExpressを初期化する方法！初心者向けバックエンド開発環境構築の完全ガイド

TypeScriptでExpressアプリケーションを初期化する手順

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptを使って、Webサーバーを作るためのExpressアプリを新しく立ち上げたいのですが、最初の設定方法がわかりません。」

先生

「TypeScriptでExpressアプリケーションを初期化するには、Node.jsの準備から始めて、いくつかの設定ファイルを順番に作っていく必要があります。」

生徒

「パソコンの画面で黒い画面を開いてコマンドを打つのが難しそうで不安です。一つずつ順番に進めることはできますか？」

先生

「大丈夫ですよ。今回はプログラミング未経験の方でも迷わずに、バックエンド開発の第一歩を踏み出せるように、準備の手順を分かりやすく丁寧に解説します。それでは、基本的な初期化の手順を一緒に見ていきましょう！」

1. TypeScriptとExpressによるバックエンド開発とは？

Webアプリケーションの開発において、画面の裏側で動く仕組みのことをバックエンド開発やサーバーサイド開発と呼びます。ユーザーから送られてきたデータを処理したり、データベースに情報を保存したりする重要な役割を持っています。今回は、このバックエンド開発を、世界中で大人気のプログラミング言語であるTypeScript（タイプスクリプト）と、Webサーバーを簡単に構築できる道具であるExpress（エクスプレス）というフレームワークを使って始めていきます。

TypeScriptは、JavaScriptという言語をもとにして作られた、より安全で間違いを見つけやすい言語です。Expressを組み合わせることで、高性能なWebアプリケーションを素早く、そして安全に組み立てることができます。パソコンをあまり触ったことがない方でも、手順通りに進めれば自分だけのサーバー環境を構築することができますので、安心して進めていきましょう。

2. 開発を始めるために必要な事前準備とNode.jsの確認

TypeScriptでプログラムを動かすためには、まずパソコンにNode.js（ノードジェイエス）という仕組みをインストールしておく必要があります。Node.jsとは、本来はWebブラウザの中でしか動かなかったJavaScriptという言語を、パソコンのシステム上で直接動かせるようにするための環境です。これがあるおかげで、私たちのパソコンがWebサーバーとして機能するようになります。

まずは、パソコンのコマンドプロンプトやターミナルと呼ばれる、文字を入力してパソコンを操作する黒い画面を開いてみましょう。そこに下記のコマンドを入力して、すでにNode.jsが使える状態になっているかどうかを確認します。バージョン番号が表示されれば、事前の準備は完了しています。


node -v
v20.11.0

3. プロジェクト用フォルダーの作成とnpmによる初期化

開発を始めるにあたり、まずは今回のプログラム一式を保存するための専用の作業部屋となるフォルダーをパソコンの中に作成します。フォルダーの名前は英語で付けるのが一般的なルールです。今回は「express-ts-app」という名前のフォルダーを作ったと仮定して進めます。

フォルダーを作成したら、そのフォルダーの場所に黒い画面の中で移動します。そして、プロジェクトの管理帳簿となる「package.json」というファイルを自動作成するために、npm（エヌピーエム）という道具を使って初期化を行います。npmは、世界中の開発者が作った便利なプログラム部品をダウンロードして管理してくれる、頼もしい管理人室のようなシステムです。下記のコマンドを実行することで、設定ファイルの基本形が自動的に作られます。


npm init -y

4. 必要なパッケージのインストールと依存関係の理解

プロジェクトの初期化が終わったら、次にExpress本体と、TypeScriptを使って開発を行うために必要な各種プログラム部品をインストールしていきます。これらはパッケージやライブラリと呼ばれ、先ほどの管理人室であるnpmに命令を出してダウンロードをします。

ここでは、本番のWebサーバーとして動かす時に必要な部品と、開発をしている最中にだけ手助けをしてくれる開発用の部品の二種類に分けてインストールを行います。特にTypeScriptは、プログラムを実行する前に確認を行う役割があるため、開発用の部品として導入します。また、型定義ファイルと呼ばれる、プログラムの設計図のような部品も一緒に取り込みます。黒い画面で以下のコマンドを順番に実行してください。


// まずは本番環境でも使用するExpress本体をインストールします
npm install express

// 次に開発をサポートするTypeScriptや型定義ファイルをインストールします
npm install -D typescript @types/node @types/express ts-node

5. TypeScriptの設定ファイルであるtsconfig.jsonの作成

プログラム部品のダウンロードが完了したら、次はTypeScriptがどのようにプログラムを解釈して動かすかを決めるための、専用のルールブックを作成します。このルールブックの役割を果たすのが、tsconfig.json（ティーエスコンフィグ・ジェイソン）という名前のファイルです。

このファイルを手動で一から書くのは大変なので、自動的に標準的なルールブックを生成してくれるコマンドを使用します。下記のコマンドを実行すると、フォルダー内に新しく設定ファイルが生まれます。中身にはたくさんの設定項目が書かれており、これによってTypeScriptは「どのフォルダーにあるファイルを読み込んで、どこに出力するか」といった道筋を理解できるようになります。


npx tsc --init

生成されたtsconfig.jsonを開き、出力先となるフォルダーの設定や、プログラムを厳格にチェックするための設定を有効にします。具体的には、以下のような設定値を有効化して、安全性の高い開発環境を整えていきます。


{
  "compilerOptions": {
    "target": "es2022",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

6. ソースコードを配置するフォルダー構造の作成

設定ファイルの準備が整ったら、次はいよいよ実際のプログラムを書き込むためのファイルと、それを整理して収納するためのフォルダーを作っていきます。プログラムの規模が大きくなっても迷子にならないように、あらかじめ綺麗な構造にしておくことが大切です。

一般的に、開発者が自分で書くプログラムの元データは、ソースの意味を持つsrc（エスアールシー）という名前のフォルダーの中にまとめて配置するのが業界の標準的な決まりごととなっています。プロジェクトフォルダーの直下に「src」というフォルダーを新規作成し、その中に最初のプログラムファイルとなる「index.ts」という名前のファイルを新しく作成してください。拡張子の「.ts」は、これがTypeScriptのファイルであることを示しています。

7. Expressアプリケーションの最小コードの実装

それでは、作成した「src/index.ts」のファイルの中に、Webサーバーを立ち上げるための最もシンプルで基本的なプログラムを記述していきましょう。このコードは、インターネットの閲覧ソフトからアクセスがあった際に、「こんにちは！」という挨拶の文字を画面に返却する仕組みを持っています。

初心者の方でも分かりやすいように、一行ずつ丁寧に解説を入れてあります。Expressを読み込み、サーバーのインスタンスと呼ばれる実体を作り、待ち受けるポート番号を指定するという、バックエンド開発における王道の記述方法になります。ファイルに以下の内容を書き込んで保存してください。


import express, { Request, Response } from 'express';

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

app.get('/', (req: Request, res: Response) => {
  res.send('TypeScriptとExpressの世界へようこそ！');
});

app.listen(port, () => {
  console.log('サーバーがポート3000番で元気に起動しました。');
});

8. 開発環境でのアプリケーション起動と動作確認

プログラムの記述が終わったら、実際にそのプログラムを実行して、パソコンの中でWebサーバーを動かしてみましょう。通常、TypeScriptのプログラムを動かすには、一度JavaScriptの形式へと翻訳する変換作業が必要になりますが、開発中は「ts-node」という便利な道具を使うことで、直接プログラムを起動して試すことができます。

黒い画面で以下のコマンドを実行してみましょう。うまく起動すると、先ほどプログラムの中に記述した起動メッセージが画面に出力されます。これが確認できたら、お使いのインターネットブラウザを開き、アドレス入力欄に「http://localhost:3000」と入力してアクセスしてみてください。画面に先ほどのメッセージが表示されれば、初期化と構築は見事に大成功です。


npx ts-node src/index.ts
サーバーがポート3000番で元気に起動しました。

9. package.jsonに起動スクリプトを追加して効率化

ここまでの作業でサーバーを動かすことができるようになりましたが、毎回長いコマンドを黒い画面に入力するのは手間がかかり、打ち間違いの原因にもなります。そこで、最初に作成した管理帳簿ファイルである「package.json」の中に、短い合言葉でプログラムを起動できる便利な仕組みを登録しておきましょう。

ファイルの中にある「scripts」という項目を探して、開発用の起動コマンドを以下のように追加します。これにより、次回からは短い決まり文句を入力するだけで、自動的にTypeScriptのExpressアプリケーションが起動するようになり、日々の開発作業が劇的に快適になります。プログラマーはこのようにして作業を効率化しています。


{
  "name": "express-ts-app",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "dev": "ts-node src/index.ts",
    "build": "tsc"
  },
  "dependencies": {
    "express": "^4.19.2"
  }
}

この設定を追加した後は、黒い画面で下記の簡単なコマンドを打ち込むだけで、いつでも開発用のWebサーバーを即座に立ち上げることができるようになります。エラーが発生した際も、このコマンドから再度立ち上げ直すことで、プログラムの修正結果をすぐに確認することができます。


npm run dev

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。