TypeScriptのbuild（ビルド）方法を詳しく解説

（最終更新月：2023年12月）

✔当記事は以下のような疑問を持つ方々に役立ちます

「TypeScriptのビルドプロセスって一体何だろう？」

「TypeScriptのコンパイル方法について詳しく知りたい」

「TypeScriptのビルド設定の実用例を見つけたい」

✔当記事で解説する内容

TypeScriptのコンパイルプロセスの概要
TypeScriptプロジェクトのセットアップとコンパイル方法
実際のTypeScriptビルド設定の事例

当記事を読むことで、TypeScriptのコンパイル手法から細かなセットアップオプションまで、実践的な例を通じて深く理解できます。

最後までご覧いただき、TypeScriptプロジェクトのビルドスキルを向上させましょう。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/09 14:23:15時点 Amazon調べ-詳細)

環境構築の基礎

こちらでは、TypeScript開発のための環境構築の基本について解説します。

環境構築を理解することは、効率的な開発プロセスの構築に不可欠です。

プロジェクト作成の前に
必要なツールと依存関係のインストール
開発環境の選択とセットアップ

プロジェクト作成の前に

TypeScriptプロジェクトを始める前に、まずは基本的な準備が必要です。

プロジェクトのゴールを定め、必要な機能やライブラリのリストを作成しましょう。

さらに、開発チームのメンバーとコーディングスタイルやディレクトリ構造についても協議が必要です。

例えばコマンドラインで次のコマンドを実行することによって、プロジェクトの説明文書（README.md）を初期化できます。

echo "# プロジェクト名" > README.md

必要なツールと依存関係のインストール

Node.jsとnpm（Node Package Manager）はTypeScriptプロジェクトのための必須ツールです。

Node.jsの公式サイト（https://nodejs.org/）からインストーラをダウンロードし、セットアップします。

インストールが完了すると、npmも自動的にインストールされているでしょう。

インストールを確認するには、以下のコマンドをターミナルまたはコマンドプロンプトで実行します。

node -v
npm -v

開発環境の選択とセットアップ

開発環境は個人の好みやプロジェクトの必要に応じて異なります。

人気のあるエディターにはVisual Studio Code（VS Code）やWebStormがあり、どちらもTypeScriptに優れたサポートを提供しています。

エディタを選んだら、TypeScript関連のプラグインや拡張機能をインストールして、コーディング効率を向上させましょう。

例えば、VS Codeでは以下のように拡張機能を検索しインストールできます。

拡張機能ビュー（Ctrl+Shift+X）を開き、「TypeScript」で検索

TypeScriptプロジェクトの初期セットアップ

こちらでは、TypeScriptプロジェクトの初期セットアップに関するステップを詳しくご説明します。

プロジェクトを正しくセットアップすることは、後の開発工程の円滑化と品質向上に繋がるからです。

npmでプロジェクトを開始する方法
必要なTypeScriptパッケージの追加
キーファイル（tsconfig.json等）の設定
ディレクトリ構造とコーディング規約の定義

npmでプロジェクトを開始する方法

npmはプロジェクトの依存関係を管理するための強力なツールです。

新しいプロジェクトを作成する際には、以下のコマンドを使ってnpmの初期化をおこないます。

この操作により、プロジェクトの基本的な情報を記述したpackage.jsonファイルが生成されます。

npm init -y

必要なTypeScriptパッケージの追加

TypeScriptのコンパイラーとして機能するtypescriptパッケージをプロジェクトに追加するには、次のnpmコマンドを使用します。

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

開発時のみに使用する依存関係として@types/nodeなどの型定義パッケージもインストールしておくことがおすすめです。

キーファイル（tsconfig.json等）の設定

tsconfig.jsonは、TypeScriptプロジェクトの設定を管理するための重要なファイルです。

このファイルを作成し、プロジェクト固有のコンパイラオプションやルートディレクトリなどを設定します。

以下は、最も基本的なtsconfig.jsonのサンプルです。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

ディレクトリ構造とコーディング規約の定義

プロジェクトのスケールが大きくなっていくことを考えると、初めから整然としたディレクトリ構造を設定しておくことが重要です。

srcフォルダはソースコード用、distフォルダはビルドされたコード用といった具体的な命名規則を決定します。

コーディング規約については、eslintやprettierを導入することで、コードの品質と一貫性を保つのに役立ちます。

npm install eslint prettier --save-dev

TypeScriptでの開発の始め方

TypeScriptでの開発において基本的な作業フローを習得することは、プロジェクトの効率的な運営に欠かせません。

シンプルなTypeScriptファイルの作成
ビルドと実行の流れ
エラー解決とトラブルシューティング

シンプルなTypeScriptファイルの作成

最初のTypeScriptファイルを作成するときは、機能のシンプルさに注目してください。

例えば、hello.tsというファイルを作成し、以下のようなコードを記述します。

これは基本的な文字列をコンソールに表示する関数です。

function sayHello(name: string) {
    console.log(`Hello, ${name}!`);
}

sayHello('World');

ビルドと実行の流れ

TypeScriptファイルを、JavaScriptにコンパイルするにはtscコマンドを使用します。

tsconfig.jsonによって指定された設定に従い、ファイルをビルド。

ビルドされたJavaScriptファイルは定義されたoutDirに出力されます。

以下はビルドのコマンド例です。

tsc

ビルド後のJavaScriptファイルを実行する場合は、Node.jsを使います。

node dist/hello.js

エラー解決とトラブルシューティング

もしビルドプロセス中にエラーが発生した場合は、TypeScriptのエラーメッセージを注意深く読み解くことが重要です。

エラーメッセージには問題の箇所と解決のヒントが記載されています。

未定義の変数や型不一致などは、よく発生するエラーの例です。

エラーが発生したら、関連するコードの部分を修正し、ビルドを再試行してください。

// エラーを引き起こす可能性のあるコード
let message: string;
console.log(message.toUpperCase()); // message is possibly 'undefined'

ビルドプロセスの自動化

ビルドプロセスを効率化するためには、それを自動化することが欠かせません。

npmスクリプトを使ってビルドタスクを管理する
主要なビルドツールに関する紹介（webpack等）
監視モード（watch mode）とホットリロード

npmスクリプトを使ってビルドタスクを管理する

package.jsonファイルでは、いくつかのnpmスクリプトを定義してビルドやテストなどのタスクを簡単に実行できるようにします。

例えば、buildスクリプトを作成してTypeScriptのビルドプロセスを自動化できます。

"scripts": {
  "build": "tsc"
}

上記のスクリプトを使用してビルドするには、以下のように実行します。

npm run build

主要なビルドツールに関する紹介（webpack等）

複数のファイルや複雑な依存関係を管理する大規模なプロジェクトでは、webpackのようなモジュールバンドラーの利用が一般的です。

webpackはモジュールをバンドルし、最適化された単一のJavaScriptファイルを生成します。

基本的なwebpackの設定例は以下の通りです。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

監視モード（watch mode）とホットリロード

開発中にソースファイルが変更されるたびに自動的にビルドをおこないたい場合は、TypeScriptの「watch mode」が役立つでしょう。

以下のコマンドでwatch modeを有効にできます。

tsc --watch

開発サーバーを使用する場合には、ホットリロード機能を利用して、コードの変更をリアルタイムでブラウザに反映させることも可能。

webpackとwebpack-dev-serverを設定することで、開発効率を大いに向上させられるでしょう。

TypeScriptビルドの実践

実際のTypeScriptビルドプロセスでは、より詳細な設定やテスト戦略が必要になります。

ローカルでのビルドとテスト
デバッグの基本
適切なTypeScriptライブラリと型定義の利用
継続的インテグレーション（CI）におけるビルド

ローカルでのビルドとテスト

ローカル環境でのビルドは、新しいコード変更が期待通りに動作するかを確認する上で重要です。

また、mocha, chai, jestなどのテスティングフレームワークを使用して、コードの品質を保証するためのテストを実行します。

例えば、jestを使う場合、次のように環境をセットアップし、テストを実行。

npm install jest @types/jest ts-jest --save-dev
npx jest --init

デバッグの基本

バグを発見するにあたっては、IDEのデバッグツールやconsole.logの使用が有効です。

また、TypeScriptファイルにdebuggerステートメントを追加することで、ブレークポイントを設定しプログラムの実行を一時停止させられます。

VS Codeを使用してデバッグする場合は、次のような構成のデバッグ設定を.vscode/launch.jsonファイルに追加しましょう。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

適切なTypeScriptライブラリと型定義の利用

TypeScriptライブラリや型定義を適切に利用することで、開発の生産性とコードの保守性が向上します。

ライブラリをインストールする際にはそのライブラリ用の型定義ファイルも合わせてインストールすることがおすすめ。

以下はaxiosライブラリとその型定義ファイルをインストールするときの例です。

npm install axios
npm install @types/axios --save-dev

継続的インテグレーション（CI）におけるビルド

CIツールを用いることで、コードの変更をリポジトリにプッシュするたびに自動的にビルドとテストをおこなえます。

これにより、コードの品質を継続的に維持できるのです。

GitHub ActionsやJenkinsなどのプラットフォームがよく使用され、以下はGitHub Actionsのビルドワークフローのサンプルになります。

name: TypeScript CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run build
    - name: Test
      run: npm test

モジュールとライブラリの統合

モジュールシステムを理解し、適切な外部ライブラリを取り入れることが大切です。

モジュールシステムの基礎
よく使われるライブラリと型定義の導入
サードパーティの依存関係の管理と更新

モジュールシステムの基礎

TypeScriptでの開発では、モジュールシステムの理解が不可欠です。

モジュールはコードの再利用性を高め、大規模なアプリケーションの開発を容易にします。

TypeScriptでは、ES6モジュール構文（importとexport）を用いて、コードをモジュール化できます。

以下は、モジュールを作成し使用できるものです。

// utils.ts
export function add(x: number, y: number): number {
    return x + y;
}

// app.ts
import { add } from './utils';

console.log(add(5, 3)); // 8