はじめに

最近、個人で作りたいアプリが見つかったので、そのアプリを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の設定を追加をする

tsconfig.json

"baseUrl": "./src"
"outDir": "./dist"

コメントアウトされている項目のうち、上記2項目のコメントアウトを解除して入力します。それぞれの役割は、

baseUrl：基準となるパスの指定ができる
outDir：buildした結果を出力するパスを指定できる

という意味を持っています。

webpack.config.jsの設定

次に、入出力ファイルの指定やサーバが読みとるディレクトリの指定を行っていきます。

①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ファイルへ追記する

package.json

"scripts": {
  "build": "webpack --mode=production",
  "start": "webpack-cli serve --mode development"
 }

それぞれの意味は下記のようになります。

build：イメージファイルの実行(今回は、本番環境のwebpackで生成したファイル)
start：サーバの立ち上げ(今回は、develop環境のローカルサーバ)

画面表示

パッケージのインストールや管理ファイルの設定が完了したら、最後に画面表示までの流れを実装していきます。

フォルダ構成図は下記のようになります(このうち、赤枠で囲ったファイルを作成します)。

world.tsファイルの作成

ここでは、メッセージを出力するための関数を作成します。

src/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での入力ファイルの設定を行います。

src/index.ts

// webpackにおけるentryファイル
import World from './world';

const root = document.getElementById("root")
const world = new World("Hello World!");

world.sayhello(root)

index.htmlファイルの作成

次に、TypeScript画面に表示させるhtmlファイルを作成します。

dist/index.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を用いることで画面表示を実現する流れを図解を用いて説明しました。みなさんの理解や実装の助けになれれば幸いです！