【TypeScript】画面表示までの流れを図解で理解しながら環境構築する

# はじめに

最近、個人で作りたいアプリが見つかったので、そのアプリをTypeScriptで実装しようと考えています。まずはTypeScriptで実装するにあたって環境構築を実施したのですが、reactなどみたいに`npx create-react-app`を打つのみでなく、若干複雑だったので記事にまとめようと思いました。
下記で環境構築を動画で説明してくださっている方がいたので、それを元に構築したのですが、この記事では図解することで、視覚的にわかりやすく説明できればと思います。

参考動画：https://www.youtube.com/watch?v=qSHlXcSces8

# 全体観

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/27586efa-32bd-8d84-56b5-d7343efcd7ec.png)

上記がTypeScriptを用いて画面表示するまでの流れとなっています。
詳しい仕組みの説明は下記記事を参考してみてください。

仕組みの説明：https://qiita.com/yuto_h9m8/items/9a4cbcbfc425b3305aa1

# パッケージのインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/83b6280a-ac02-d38f-cb93-644ee37b664e.png)

まずは、TypeScript, webpack, node.jsをそれぞれインストールしていきます。
ここでは、node.js → TypeScript, webpackの順序で導入します。

### Node.jsのインストール

①[このリンク](https://nodejs.org/en/download/)から該当する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サーバ(ブラウザを立ち上げる)|

# 管理ファイルの設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/95fe5d39-1bf4-181c-df9e-f0c0e2dd857b.png)

次に、管理ファイルの設定を行っていきます。

### 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環境のローカルサーバ)

# 画面表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/cbd48a3e-ce80-9d6e-a759-4b22f27cffb9.png)

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/3ba56c31-4b65-22cb-a287-64f8e067d47f.png" width="50%">

### 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`を入力して下記画面が表示されれば成功です！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/f9d58210-6bba-7e2b-fe9e-fd404db5a1ea.png" width="50%">

# 最後に

今回はTypeScript環境において、webpackを用いることで画面表示を実現する流れを図解を用いて説明しました。みなさんの理解や実装の助けになれれば幸いです！