1️⃣
ブラウザのみで動作するローカルアプリの開発環境を構築したい 1
概要
- TypeScript + React + MaterialUI の開発環境を構築する
- Webpack を用いてパッケージングを行い、アプリをローカルサーバなしで起動できるようにする
なぜ
- 自分が使う便利アプリを作りたいだけなのにいちいちローカルサーバを起動したくない
- 身の回りのひとにくばるときに ZIP を投げつけるだけで動いてほしい
- JS + Bootstrap の開発方法に限界感じてきたから React つかいたい
- ついでに TypeScript つかいたい
だれのための記事か
- 自分と同じ境遇のひと
- ある程度 node.js 知ってる人
何も知らなくてもこの記事を上から順に読めば同じ環境を作れるはずです
よくわからない場合、各自ググってください
環境
- win10
- node.js v19.4.0
必要なもの
- node.js
事前にインストールしてください
可能であれば nvm を先に入れてバージョン管理してしまうことをおすすめします
やること
開発用パッケージの導入
- Webpack の導入
- TypeScript の導入
フロントエンドライブラリの導入
- React の導入
- MaterialUI の導入
もろもろの設定
- React 用の設定にする
- index.html を src ディレクトリへ移動させる
環境構築できたか確認する
- アプリを生成できるか確認する
- アプリの動作確認
環境構築
初期設定
作業ディレクトリの作成
mkdir directory-name
cd .\directory-name\
パッケージの作成
npm init -y
開発用パッケージの導入
モジュールインストール時に-Dオプションをつけます
Webpack と TypeScript の導入
@webpack-cli/generatorsを使い、必要なモジュールをインストールします
npm i -D @webpack-cli/generators
npx webpack init
微妙な待ち時間のあと、いくつか質問をされるので、以下のように回答します
必要最低限の設定なので、各自好きにしてください
? Which of the following JS solutions do you want to use?
> Typescript
? Do you want to use webpack-dev-server?
> n
? Do you want to simplify the creation of HTML files for your bundle?
> y
? Do you want to add PWA support?
> n
? Which of the following CSS solutions do you want to use?
> none
? Do you like to install prettier to format generated configuration?
> n
? Pick a package manager:
> npm
? Overwrite package.json?
> y(overwrite)
TypeScript と Webpack のモジュールが自動的にインストールされます
パッケージの確認
現在のモジュールの状態は以下の様になっているはずです
package.json
"devDependencies": {
"@webpack-cli/generators": "^3.0.1",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.4.2",
"typescript": "^4.9.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
開発用パッケージの導入は以上です
フロントエンドライブラリの導入
モジュールインストール時に-Sオプションをつけます
React の導入
npm i -S react react-dom @types/react @types/react-dom
-
react：React のライブラリ -
react-dom：ReactDOM のライブラリ -
@types/react：TypeScript で使う React の型定義 -
@types/react-dom：TypeScript で使う ReactDOM の型定義
MaterialUI の導入
npm i -S @mui/material @emotion/react @emotion/styled
-
@mui/material：MaterialUI のライブラリ -
@emotion/react：なんかしらんけど無いと MaterialUI 使えない -
@emotion/styled：なんかしらんけど無いと MaterialUI 使えない
パッケージの確認
現在のモジュールの状態は以下の様になっているはずです
package.json
"devDependencies": {
"@webpack-cli/generators": "^3.0.1",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.4.2",
"typescript": "^4.9.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/material": "^5.11.6",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
フロントエンドライブラリの導入は以上です
もろもろの設定
React 用の設定にする
拡張子を.tsx にする
./src/index.tsの拡張子を.tsxに変更します
tsconfig.json の編集
tsconfig.jsonに以下の設定を追加します
tsconfig.json
{
"compilerOptions": {
/* 追加する設定 */
"sourceMap": true,
"strict": true,
"jsx": "react",
"moduleResolution": "node",
"lib": ["ES6", "DOM"]
},
"files": ["src/index.tsx"] /* 拡張子を.tsxに変更 */
}
webpack.config.js の編集
webpack.config.js内のconfig.entryを編集します
webpack.config.js
const config = {
entry: './src/index.tsx', /* 拡張子を.tsxに変更 */
}
index.html に React でレンダリングするための root id を付与する
index.htmlを編集します
<body>の中身を削除して<div>を追加します
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.html を src ディレクトリへ移動させる
index.htmlだけ root ディレクトリにあるのはキモいので移動させます
index.html の移動
./index.htmlを./src/index.htmlへ移動させます
webpack.config.js の編集
webpack.config.js内のconfig.pluginsを編集します
webpack.config.js
const config = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', /* ./src/indexへ変更 */
}),
],
}
環境構築できたか確認する
アプリを生成できるか確認する
確認用のコードを書く
./src/index.tsxを以下のように編集します
index.tsx
import React from "react";
import { useState } from "react";
import ReactDOM from "react-dom/client";
import * as MUI from "@mui/material";
const CountButton = () => {
const [count, setCount] = useState(0);
return (
<MUI.Button variant="contained" onClick={() => setCount(count + 1)}>
{count}
</MUI.Button>
);
};
const Root = () => {
return (
<>
<h1>Hello TypeScript + React + MaterialUI</h1>
<CountButton></CountButton>
</>
);
};
window.addEventListener("load", () => {
const rootElement = document.getElementById("root");
if (!rootElement) {
return;
}
const root = ReactDOM.createRoot(rootElement);
root.render(<Root />);
});
build する
npm run build
build に成功すると、./distディレクトリとその中にアプリが生成されます
アプリの動作確認
-
./dist/index.htmlをクリックして、アプリが起動することを確認します -
Hello TypeScript + React + MaterialUIと表示されていることを確認します - ボタンをクリックして、カウントアップされていることを確認します
- 全て正しく動作した場合、環境構築成功です
（こんなかんじの画面が表示されるはずです）
さいごに
有識者はコメントでうんちくを垂れ流してくれると助かります
Discussion