今回は、create-react-appを使わずに、ReactとTypeScriptの環境を構築していこうと思います。
最近では、Viteが人気ですが、今回は安定のWebpackで構築していきます。
ではさっそく始めていきます。
package.json作成
まず初めに、プロジェクトのルートディレクトリにて、以下のコマンドでPackage.jsonを作成します。
npm init -y
package.json とは、パッケージのメタデータを管理するためのファイルです。
こちらに詳しい説明が書いてありますので、読んでみてください。
Reactインストール
次に、以下のコマンドでReact関連のモジュールをインストールしていきます。
Reactの型定義ファイルである「@types/react」「@types/react-dom」も同時にインストールします。
npm install react react-dom @types/react @types/react-dom
TypeScriptとwebpackをインストール
次に、以下のコマンドでTypescriptとwebpackをインストールしていきます。
npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server
webpackの設定
- Webpackとは
webpackとは、複数のモジュールの依存関係を解決して1つにまとめるためのツール（モジュールバンドラー）です。
複数モジュールを1つのファイルにまとめてくれるので、読み込み順を気にせず、1回のリクエストで済むため、サーバの負担を減らすことができます。
- Webpack詳細設定
webpack の設定ファイルwebpack.config.jsを作成します。
const path = require("path");
module.exports = {
// 開発用の設定
mode: "development",
// エントリーポイントを設定
entry: "./src/index.tsx",
// バンドル後のファイルの出力設定
output: {
// ファイルのの出力先のディレクトリを指定する
path: path.join(__dirname, "dist"),
// 出力されるファイル名
filename: "main.js",
},
module: {
rules: [
{
// 「test」で指定した拡張子をコンパイルする
test: /\.tsx?$/,
use: "ts-loader",
},
],
},
devServer: {
static: {
directory: path.join(__dirname, "dist"),
},
port: 3000,
},
// importの際に「extensions」の拡張子を省略する
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
},
};
Webpackの詳しい設定方法は以下の公式リファレンスを参考にしてください。
TypeScript(tsconfig.json)の設定
まずプロジェクト直下にてTypeScriptの設定ファイル tsconfig.json を作成します。
tsconfig.jsonにはプロジェクトに応じた設定をします。今回は以下のように設定しました。
{
"compilerOptions": {
// 厳密な型チェックを有効化
"strict": true,
// ソースマップを有効化
"sourceMap": true,
// tsファイルはECS5にコンパイルされる
"target": "ES5",
"lib": ["ES2021", "DOM"],
// TSはesnextとして出力
"module": "esnext",
// JSXを使用可能に設定
"jsx": "react",
"moduleResolution": "node",
},
// コンパイルするフォルダを指定
"include": ["src"]
}
ReactコンポーネントとHTMLファイルの作成
最後に、Reactのコンポーネントと最終的に出力されるHTMLファイルを作成しましょう！
・React
プロジェクト直下にsrcディレクトリを作成し、その配下にApp.tsxとindex.tsxを作っていきます。
// App.tsx
import * as React from "react";
export const App = () => {
return <div>Hello Qiita!!</div>;
};
// index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
・HTML
プロジェクト直下にdistディレクトリを作成し、その中にバンドル後のJavaScriptファイルを受け取るindex.htmlを作成していきます。
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react-ts-webpack</title>
</head>
<body>
<div id="root"></div>
<script defer src="main.js"></script>
</body>
</html>
build
では、ビルドして実際に画面を確認してみましょう！
package.jsonにscriptsの上記の設定を追記して、ターミナルでnpm run startします。
{
"name": "setup-eslint-prettier",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
// 追加
"build": "webpack",
"start": "webpack serve --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}
npm run start
無事ブラウザ上で確認できました。
create-react-appの内部ではこんな作業が行われていたんですね。CRAさんいつもありがとうございます。