- Create React Appを使わずにReact・TypeScript環境を構築するには？
- React・TypeScript環境には何のビルドツール（バンドラ・コンパイラ）を使う？
- webpackの使い方は？
本記事ではこのような疑問を解決します。
React環境の構築と言えば、「Create React App」コマンドがとても便利です。
しかし、Create React AppでReact環境を構築すると、
不要なファイルが生成されたり、ビルドプロセスのカスタマイズ性が制限されたり、といった短所もあります。
よって、Create React Appを使わずにReact環境（TypeScript含む）を構築するニーズがあるわけです。
そこで今回はCreate React Appを使わずにReact・TypeScript環境を構築する方法を解説します。
前提
今回使用するNode.js（npm含む）のバージョンは以下の通りです。
Node.js：18.17.1
npm：9.6.7
そのため、Node.js（npm含む）を事前にインストールしておいてください。
また、今回使用するディレクトリを作成しておきましょう。
下記のようにReact環境を構築するディレクトリを作り、そこへ移動しておいてください。
$ mkdir react-tutorial && cd react-tutorial
※今回は「react-tutorial」というディレクトリを作成する
なお、最終的なディレクトリ構成は以下の通りです。
※適宜ディレクトリを作成してください。
react-tutorial ├── dist │ └── ビルド結果出力先 ├── node_modules │ └── 各種パッケージ ├── public │ └── index.html ├── src │ ├── App.css │ ├── App.tsx │ └── index.tsx ├── package.json.lock ├── package.json ├── tsconfig.json └── webpack.config.js
package.jsonの生成
まずはnpm初期化をしてpackage.jsonを生成します。
$ npm init -y
※「-y」オプション：プロンプトに対してすべて”yes”を返す
なお、package.json（npmコマンドも）について詳しく知りたい方はこちらの記事を参考にしてみてください。
package.jsonとは？その中身は？dependenciesとdevDependenciesの違いとは？package.jsonに関するnpmコマンドとは？ 本記事ではこのような疑問を解決します。Node.jsでパッケージ管理[…]
webpackのインストール
webpackとはバンドラの1つです。
バンドラとは複数のJavaScriptファイルやアセット（画像、CSS、フォントなど）をまとめてくれるものです。
バンドラによって、アプリケーションの処理速度が早くなったり、モジュールを扱えなかった古いブラウザでも動作したり、といったことが可能になります。
webpackはバンドラの代表格であり、多くの機能を持っていて拡張性も高いです。
$ npm i --save-dev webpack webpack-cli webpack-dev-server
※「–save-dev」オプション：開発環境のみにインストールさせる
それぞれの簡単な説明は以下の通りです。
webpack：webpack本体
webpack-cli：webpackをコマンドラインで操作できるツール
webpack-dev-server：webpackの開発環境用Webサーバー
webpackの設定
webpackの設定については、設定ファイル（webpack.config.js）を生成し、そこに設定項目を記述していきます。
$ touch webpack.config.js
なお、「npx webpack init」コマンドを使うとプロンプトに回答するだけで自動でwebpack.config.jsなどが生成されます。（今回は自動でやって欲しくないので使用しない）
※npxは、一時的なパッケージのインストールと実行ができる
webpack.config.jsには様々な項目を設定できますが、まずは以下の通りとします。
※後に設定項目を追記していきます。
const path = require('path')
module.exports = {
// 開発用：development、本番用：production
mode: 'development',
// エントリーポイントとなるJavaScriptファイル
entry: './src/index.tsx',
// webpack実行結果(バンドルされたファイル)の設定
output: {
// 出力先ディレクトリ
path: path.resolve(__dirname, 'dist'),
// 出力ファイル名
filename: 'bundle.js'
},
// import文で取得するファイル拡張子※指定しないとimport文で拡張子を書く必要がある
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
// ソースマップの設定※コンパイル前と後の対応関係が記述されたファイルが生成される
devtool: 'inline-source-map',
// 開発サーバーの設定
devServer: {
static: path.resolve(__dirname, 'dist'),
open: true,
port: 3000,
},
}
エンジニアが副業を始めるには？エンジニアの副業にはどんな種類がある？ 本記事ではこのような疑問を解決します。副業がブームになっている昨今、エンジニアほど副業をやりやすい職業はないでしょう。副業に関心があったり、副業をしてみたいと思っ[…]
ts-loaderのインストール
ts-loaderとはTypeScriptコンパイラの1つです。
フロントエンドアプリケーションのコードには、
JavaScriptのES〇〇バージョンやTypeScript、ReactにおけるJSX・TSX記法などのような様々な書き方があります。
JavaScriptやTypeScriptのコンパイラについては、
有名どころだとBabelやtscなどが他にありますが、
バンドラにwebpackを使用する場合はコンパイラにts-loaderを使用するのが一般的です。
$ npm i --save-dev ts-loader
ts-loaderの設定
webpack.config.jsへts-loaderの設定を追記します。
const path = require('path')
module.exports = {
// 開発用：development、本番用：production
mode: 'development',
// エントリーポイントとなるJavaScriptファイル
entry: './src/index.tsx',
// webpack実行結果(バンドルされたファイル)の設定
output: {
// 出力先ディレクトリ
path: path.resolve(__dirname, 'dist'),
// 出力ファイル名
filename: 'bundle.js'
},
// 追記！！！
// webpackが見つけたファイルに対して何をするか
module: {
rules: [
{
// 拡張子が.tsのファイルに対して適用
test: /\.tsx$/,
// コンパイラの指定
use: 'ts-loader',
// webpackが処理をしないディレクトリ・ファイル
exclude: /node_modules/
},
],
},
// import文で取得するファイル拡張子※指定しないとimport文で拡張子を書く必要がある
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
// ソースマップの設定※コンパイル前と後の対応関係が記述されたファイルが生成される
devtool: 'inline-source-map',
// 開発サーバーの設定
devServer: {
static: path.resolve(__dirname, 'dist'),
open: true,
port: 3000,
},
}
TypeScriptのインストール
TypeScriptはJavaScriptに対して、静的型付けとオブジェクト指向などを加えたプログラミング言語です。
いわば、JavaScriptの上位互換ですね。
なお、TypeScriptがグローバルでインストールされていれば、
ここで改めてインストールする必要はありません。
ただ、ここでは明示的に使用バージョンなどを示すためにTypeScriptをインストールします。
$ npm i --save-dev typescript
TypeScriptの設定
TypeScriptの設定については、設定ファイル（tsconfig.json）を生成し、そこに設定項目を記述していきます。
$ touch tsconfig.json
tsconfig.jsonには様々な項目を設定できますが、今回は以下の通りとします。
※tsconfig.json日本語バージョン
{
"compilerOptions": {
// JavaScriptファイルの出力先
"outDir": "./dist/",
// ソースマップファイル生成の有効化
"sourceMap": true,
// 暗黙のany型を禁止
"noImplicitAny": true,
// TypeScriptをJavaScriptに変換する際のモジュールパターン
"module": "commonjs",
// 動作環境のJavaScriptバージョン
"target": "es5",
// jsx（tsx）生成パターン
"jsx": "react",
// JavaScriptファイルをコンパイル対象に含めるか
"allowJs": true,
// CommonJSモジュールとESモジュール間の相互運用性
"esModuleInterop": true,
}
}
ちなみに、「npx tsc –init」コマンドでtsconfig.jsonの雛形を生成して編集していくことも可能です。
Reactのインストール
Reactパッケージはいくつかありますが、
とりあえずはreact、react-domをインストールしておきましょう。
その他については開発を進める上で必要になった時に都度インストールしてください。
$ npm i react react-dom
$ npm i --save-dev @types/react @types/react-dom
※@types/~はTypeScript用の型情報のこと
HTML・CSSパッケージのインストール・設定
webpackでHTML・CSSを扱うために以下のパッケージをインストールします。
$ npm i --save-dev html-webpack-plugin css-loader style-loader
それぞれの簡単な説明は以下の通りです。
html-webpack-plugin：JavaScriptファイルをHTMLファイルへ挿入
css-loader：CSSファイルをJavaScriptモジュールとしてインポート
style-loader：処理されたCSSをHTMLファイルに動的に挿入
インストール後、上記パッケージを設定していきます。
webpack.config.jsを以下のように編集してください。
const path = require('path')
// 追記！！！
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 開発用：development、本番用：production
mode: 'development',
// エントリーポイントとなるJavaScriptファイル
entry: './src/index.tsx',
// webpack実行結果(バンドルされたファイル)の設定
output: {
// 出力先ディレクトリ
path: path.resolve(__dirname, 'dist'),
// 出力ファイル名
filename: 'bundle.js'
},
// webpackが見つけたファイルに対して何をするか
module: {
rules: [
{
// 拡張子が.tsのファイルに対して適用
test: /\.tsx$/,
// コンパイラの指定
use: 'ts-loader',
// webpackが処理をしないディレクトリ・ファイル
exclude: /node_modules/
},
// 追記！！！
{
// 拡張子が.cssのファイルに対して適用
test: /\.css$/,
// ローダーの指定
use: ["style-loader", "css-loader"]
},
],
},
// import文で取得するファイル拡張子※指定しないとimport文で拡張子を書く必要がある
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
// ソースマップの設定※コンパイル前と後の対応関係が記述されたファイルが生成される
devtool: 'inline-source-map',
// 開発サーバーの設定
devServer: {
static: path.resolve(__dirname, 'dist'),
open: true,
port: 3000,
},
// 追記！！！
// 拡張機能
plugins: [
// HtmlWebpackPluginインスタンス生成
new HtmlWebpackPlugin({
// テンプレート
template: "./public/index.html",
}),
],
}
フリーランスエンジニアが案件獲得方法とは？自ら営業せずに案件を獲得するには？実務経験1年未満でも大丈夫なの？ 本記事ではこのような疑問を解決します。これからフリーランスエンジニアとして独立したい方は、兎にも角にも案件の獲得が急務です[…]
Reactソースコードの作成
パッケージのインストール・設定が完了したら、
Reactソースコードを作成して画面に表示させてみましょう。
今回は以下のようなファイル・コードを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react tutorial</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
div {
color: blue;
}
import React from 'react';
import ReactDOM from 'react-dom/client';
import {App} from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
import React from 'react';
import './App.css';
export const App = () => {
return (
<div>React・TypeScript環境構築</div>
);
}
最後にpackage.jsonを以下のように編集します。
{
"name": "react-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server", <-- 追記！
"build": "webpack" <-- 追記！
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"css-loader": "^6.8.1",
"html-webpack-plugin": "^5.5.3",
"style-loader": "^3.3.3",
"ts-loader": "^9.4.4",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
開発サーバーの起動
下記のコマンドを実行して開発サーバーを起動しましょう。
$ npm start
以下のように画面に表示されていればOKです！
まとめ
以上がCreate React Appを使わずにReact・TypeScript環境を構築する方法になります。
本記事の内容をReact・TypeScript環境の最小構成としつつ、
追加で各種パッケージ等をインストールしていってください。
なお、ESLint（静的解析ツール）やPrettier（コードフォーマッター）などのパッケージは必須と言って良いでしょう。
※ここら辺はVS Codeなどのエディタのプラグインとして入れると便利です。
本記事があなたのお役に立つことができたら幸いです。
