こんにちは、今回はTypeScript + webpackでWebアプリケーション開発環境を構築する方法についてご紹介します。
Typescriptとは何かについては前回の記事でご紹介しているのでご覧ください。
今回はnpmプロジェクトの作成からTypeScript + webpackの開発環境構築までを順を追ってご紹介します。
ソースはコピペで実行できるようにしています。
作成した環境のソースコードは、以下のGitHubリポジトリで公開しています。
実際の環境で動かして試したい方はこちらからもどうぞ！
本記事は以下の環境で検証しています。
- Windows10
- Node.js v16.14.0
- ディレクトリ構成
- npmプロジェクトの作成
- TypeScript環境の構築
- 必要な設定ファイルの作成
- サンプルコードを作成する
- jestでテストする
- webpackでコンパイルを実行する
- webpack-dev-serverでコンパイルなしでプレビューしながら開発する
- まとめ
ディレクトリ構成
今回作成するプロジェクトのディレクトリ構成は以下の通りです。
この後の手順で、順を追ってフォルダ・ファイルを作成していきます。
.
├── 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コマンドが利用できるようにしましょう。
ディレクトリ作成
空ディレクトリを作成します。
$ 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で記述した箇所になります。
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初学者として今後も学んでは、またいつかの機会で、本ブログを通して発信していければと思っています！
