とりゅふの森

GCPデータエンジニアとして生きる

【TypeScript超入門】TypeScript + webpackでWebアプリケーション開発環境を構築する

f:id:true-fly:20220312230401p:plain

こんにちは、今回はTypeScript + webpackでWebアプリケーション開発環境を構築する方法についてご紹介します。

Typescriptとは何かについては前回の記事でご紹介しているのでご覧ください。

www.true-fly.com

今回はnpmプロジェクトの作成からTypeScript + webpackの開発環境構築までを順を追ってご紹介します。
ソースはコピペで実行できるようにしています。
作成した環境のソースコードは、以下のGitHubリポジトリで公開しています。
実際の環境で動かして試したい方はこちらからもどうぞ!

github.com

本記事は以下の環境で検証しています。

  • Windows10
  • Node.js v16.14.0

ディレクトリ構成

今回作成するプロジェクトのディレクトリ構成は以下の通りです。
この後の手順で、順を追ってフォルダ・ファイルを作成していきます。

.
├── README.md
├── coverage
├── hoge.txt
├── jest.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── css
│   │   └ style.css
│   ├── index.html
│   └── js
├── src
│   ├── app.ts
│   └── models
│       └── helloWorld.ts
├── tests
│   └── models
│       └── helloWorld.test.ts
├── tsconfig.json
└── webpack.config.js

npmプロジェクトの作成

Node.jsのインストール

自分の端末にNode.jsをインストールして、nodeコマンド、npmコマンドが利用できるようにしましょう。

nodejs.org

ディレクトリ作成

空ディレクトリを作成します。

$ mkdir -p public/css
$ mkdir -p public/js
$ mkdir -p src/models
$ mkdir -p tests/models

package.jsonの作成

以下のコマンドでnpmプロジェクトを作成します。

$ npm init

とりあえず全部EnterでOKです。package.jsonが作成されます。
nameの部分はカレントディレクトリ名になっているはずです。

{
  "name": "typescript-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

TypeScript環境の構築

typescriptと他必要なモジュールをインストール

以下のコマンドで、以後必要なモジュールをインストールします。

$ npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader jest ts-jest @types/jest

package.jsonの編集

package.jsonの"scripts"を以下のように編集します。

{
  "name": "typescript-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "test": "jest",
    "tsc": "tsc",
    "build": "jest && webpack --mode=development",
    "start": "webpack serve --mode=development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^27.4.1",
    "jest": "^27.5.1",
    "ts-jest": "^27.1.3",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

必要な設定ファイルの作成

以下の3ファイルをカレントディレクトリに作成します。

tsconfig.jsonの作成

{
  "compilerOptions": {
    "target": "es2016",  
    "module": "commonjs",
    "outDir": "public/js",
    "esModuleInterop": true,
        "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

jest.config.jsの作成

module.exports = {
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  roots: [
    "tests"
  ],
  
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
};

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        app: './src/app.ts'
    },
    output: {
        path: path.join(__dirname,'public/js'),
        filename: '[name].js'
    },    
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js',],
    },
    devServer: {
        static: {
            directory: path.join(__dirname, "public"),
        },
    },
};

これでTypeScriptが実行できる最低限の環境ができました。
では次は実際にWebアプリケーションを作成するつもりで、サンプルコードを作成していきましょう。

サンプルコードを作成する

以下のファイルを作成していきます。

public/index.htmlの作成

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Typescript</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h2>Hello Typescript</h2>
    <div id="hello-world"></div>
    <script src="js/app.js"></script>
</body>
</html>

public/css/style.cssの作成

#hello-world {
    background-color: #fff8bc;
}

src/app.tsの作成

import {HelloWorld} from './models/helloWorld';

let helloWorld = new HelloWorld("Ts Beginner");

const element = <HTMLInputElement>document.getElementById('hello-world');
element.innerHTML = helloWorld.show();

src/models/helloWorld.tsの作成

export class HelloWorld {
    name: string;
    constructor(name : string) {
        this.name = name;
    }

    public show() {
        return 'Hello ' + this.name + '!!';
    }
}

tests/models/helloWorld.test.tsの作成

import { HelloWorld } from '../../src/models/helloWorld';

test('test', () => {
    expect(new HelloWorld('Test').show()).toBe('Hello Test!!');
});

以上で一通りソースが準備できました!

jestでテストする

jestとはJavaScriptのテストフレームワークです。今回はTypeScript用に設定ファイルを作成しているので、TypeScriptのテストで利用します。
npm run testでテストを実行します。今回のサンプルではtests/models/helloWorld.test.tsのみですが、テスト結果が出力されていることを確認できました。

$ npm run test

> typescript-demo@1.0.0 test
> jest

 PASS  tests/models/helloWorld.test.ts
  √ test (2 ms)

---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
---------------|---------|----------|---------|---------|-------------------
All files      |     100 |      100 |     100 |     100 |
 helloWorld.ts |     100 |      100 |     100 |     100 |
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.33 s
Ran all test suites.

webpackでコンパイルを実行する

webpackとは、モジュールバンドラー、CSSやJavaScriptを一つにまとめてくれるモジュールです。 TypeScriptをJavaScriptにコンパイルするときも、1つのJavaScriptファイルになるようにしてくれます。
npm run buildコマンドで、テストの後にwebpackのコンパイルを実行するようにしています。

$ npm run build

> typescript-demo@1.0.0 build
> jest && webpack --mode=development

 PASS  tests/models/helloWorld.test.ts
  √ test (4 ms)

---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------|---------|----------|---------|---------|-------------------
All files      |     100 |      100 |     100 |     100 | 
 helloWorld.ts |     100 |      100 |     100 |     100 |
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.927 s, estimated 4 s
Ran all test suites.
asset app.js 3.08 KiB [emitted] (name: app)
./src/app.ts 292 bytes [built] [code generated]
./src/models/helloWorld.ts 291 bytes [built] [code generated]
webpack 5.66.0 compiled successfully in 2053 ms

public/js/app.js1ファイルが作成されます。
ブラウザでpublic/index.htmlを開き、動作確認してみます。
黄色背景の「Hello Ts Beginner!!」の箇所がTypeScriptで記述した箇所になります。

f:id:true-fly:20220312222250p:plain

webpack-dev-serverでコンパイルなしでプレビューしながら開発する

npm run buildで毎回コンパイルしてjsファイルを作成して、ブラウザをリロードして開発するのは効率悪いですよね。
webpack-dev-serverを使えば、毎回コンパイルしなくても、tsファイルを変更したらブラウザ上のプレビューも更新されます。

webpack-dev-serverを使うために、先程作成したpublic/index.htmlのapp.jsを読み込んでいる箇所をいかに書き換えてください。

<script src="app.js"></script>

npm run startコマンドでwebpack-dev-serverを起動します。

$ npm run start

localhost:8080でWebアプリケーションが閲覧できます。
tsファイルを変更して保存すると、リアルタイムで変更が反映されます。

まとめ

以上、今回はTypeScript + webpackでWebアプリケーション開発環境を構築する手順についてまとめました。
TypeScriptの学習コストや環境構築コストが懸念でチャレンジできなかった方の一助になればと思います。
私もフロントエンドエンジニアというわけではありませんが、Webアプリケーションをフロントからバックエンドまで開発する機会もないわけではないので、イチTypeScript初学者として今後も学んでは、またいつかの機会で、本ブログを通して発信していければと思っています!