はじめに
最近、個人で作りたいアプリが見つかったので、そのアプリをTypeScriptで実装しようと考えています。まずはTypeScriptで実装するにあたって環境構築を実施したのですが、reactなどみたいにnpx create-react-appを打つのみでなく、若干複雑だったので記事にまとめようと思いました。
下記で環境構築を動画で説明してくださっている方がいたので、それを元に構築したのですが、この記事では図解することで、視覚的にわかりやすく説明できればと思います。
参考動画：https://www.youtube.com/watch?v=qSHlXcSces8
全体観
上記がTypeScriptを用いて画面表示するまでの流れとなっています。
詳しい仕組みの説明は下記記事を参考してみてください。
仕組みの説明：https://qiita.com/yuto_h9m8/items/9a4cbcbfc425b3305aa1
パッケージのインストール
まずは、TypeScript, webpack, node.jsをそれぞれインストールしていきます。
ここでは、node.js → TypeScript, webpackの順序で導入します。
Node.jsのインストール
①このリンクから該当するPC環境を選択してインストールする
②下記コマンドでインストールを確認する
% node -v
下記のようなバージョンが表示されていれば成功です(バージョンは環境によります)。
v20.11.0
TypeScript/webpackのインストール
①TypeScriptを導入するフォルダを作成＆遷移する
% mkdir フォルダ名
% cd フォルダ名
②必要なパッケージをそれぞれインストールする
% npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server
インストールしたパッケージについてですが、それぞれ下記のような役割を持ちます。
| 種別 | パッケージ名 | 役割 |
|---|---|---|
| TypeScript | typescript | TypeScript構文をJavaScript構文へ変換する |
| TypeScript | ts-loader | webpackへTypeScriptを理解させる |
| webpack | webpack | 複数のファイルを1つにまとめる |
| webpack | webpack-cli | webpackをコマンドラインで使用する |
| webpack | webpack-dev-server | webサーバ(ブラウザを立ち上げる) |
管理ファイルの設定
次に、管理ファイルの設定を行っていきます。
tsconfig.jsonの設定
ここでは、主にJavaScriptへのコンパイルを行うための設定を行います。
①tsconfigの初期ファイルを作成する
% tsc --init
②tsconfigの設定を追加をする
"baseUrl": "./src"
"outDir": "./dist"
コメントアウトされている項目のうち、上記2項目のコメントアウトを解除して入力します。それぞれの役割は、
-
baseUrl：基準となるパスの指定ができる
-
outDir：buildした結果を出力するパスを指定できる
という意味を持っています。
webpack.config.jsの設定
次に、入出力ファイルの指定やサーバが読みとるディレクトリの指定を行っていきます。
①webpack.config.jsファイルを作成し、下記を入力する
const path = require('path')
module.exports = {
// 入力ファイルのエントリーポイント(バンドル対象のファイル)
entry: {
bundle: './src/index.ts'
},
// 出力ファイル名の設定
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
// 読み取るサーバの基点のディレクトリ
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
}
},
// 拡張子.tsの場合は、TypeScriptをコンパイル
module: {
rules: [
{
loader: 'ts-loader',
test: /\.ts$/
}
]
},
// importする対象ファイルの拡張子(ここに記載することにより、import時は拡張子の記載省略可能)
resolve: {
extensions: ['.ts', '.js']
}
}
package.jsonの設定
最後に、画面に出力するための設定を行っていきます。
①下記をpackage.jsonファイルへ追記する
"scripts": {
"build": "webpack --mode=production",
"start": "webpack-cli serve --mode development"
}
それぞれの意味は下記のようになります。
-
build：イメージファイルの実行(今回は、本番環境のwebpackで生成したファイル)
-
start：サーバの立ち上げ(今回は、develop環境のローカルサーバ)
画面表示
パッケージのインストールや管理ファイルの設定が完了したら、最後に画面表示までの流れを実装していきます。
フォルダ構成図は下記のようになります(このうち、赤枠で囲ったファイルを作成します)。
world.tsファイルの作成
ここでは、メッセージを出力するための関数を作成します。
// メッセージを出力する関数
export default class World {
message: string;
constructor(message: string) {
this.message = message
}
public sayhello(elem: HTMLElement | null) {
if (elem) {
elem.innerText = this.message
}
}
}
index.tsファイルの作成
次に、バンドルファイル(bundle.js)を生成するために、必要なwebpackでの入力ファイルの設定を行います。
// webpackにおけるentryファイル
import World from './world';
const root = document.getElementById("root")
const world = new World("Hello World!");
world.sayhello(root)
index.htmlファイルの作成
次に、TypeScript画面に表示させるhtmlファイルを作成します。
<!-- 画面表示するファイル(コンパイル＆バンドルしたファイルを集約したhtmlファイル) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>日本一わかりやすいTypeScript入門</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
画面表示
最後に、コマンドでnpm run startを入力して下記画面が表示されれば成功です！
最後に
今回はTypeScript環境において、webpackを用いることで画面表示を実現する流れを図解を用いて説明しました。みなさんの理解や実装の助けになれれば幸いです！