Node.js・React・Typescriptで開発環境を整える
公開日:
はじめに
今回は、タイトルの通りNode.js+React+TypeScriptで web アプリを作成する環境を整えます。web アプリの挙動を理解するために簡単なサンプルアプリを作成しようと思ったはいいものの、環境を整えるところで時間を食いまくって腹が立ったので、もう記事にしてやります。一気に環境を作ろうとすると、どこかでミスっていた時に死ぬので、今回は
- Node.js で web サーバーを立てて、HTML を表示
- React を導入
- TypeScript を導入
という順番で環境を作っていきます。
ちなみに、今回はnpx-create-react-appのような便利なコマンドは使わずに、できるだけ手動で導入していきます。
Node.js で web サーバーを立てて、HTML を表示
Node.js はインストールされている前提の話を進めるのでインストールしていない人は下の記事などを参考にしてインストールしてください。
https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b
自分はバージョン 18.0.0を使用しています。
npm init
まずはアプリを立ち上げます。アプリを作成するフォルダ直下で
npm init
をして項目に適当に入力してアプリを作ります。
web サーバーを立てる
参考記事 ①
https://tech-blog.rakus.co.jp/entry/2018/03/05/094238
参考記事 ②
https://qiita.com/ritukiii/items/5deba734249bf3543b85
Node.js で web サーバーを立てる記事はたくさんあるので色々と参考にしながら作ります。自分は下のような感じで作りましたが大体どんな記事でも同じ雰囲気です。
var http = require('http');
var fs = require('fs');
const port = 3000;
const server = http.createServer();
server.on('request', (req, res) => {
fs.readFile('./index.html', (err, data) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(data);
res.end();
});
});
server.listen(port);
console.log(`This server is listening on port: ${port}`);
HTML ファイルを作成
ほぼテンプレート通りに HTML ファイルを作成します。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
HTML ファイルが表示されることを確認
ターミナルで
node server.js
として、先ほど作成したサーバーの listen を開始します。ポート番号 3000 でサーバーが listen しているので、ブラウザで『http://localhost:3000/』を開くと先ほど作成した HTML ファイルが開かれています。
ナイス Hello World! ここまでのディレクトリ構造はこんな感じです。
.
├── package.json
└── src
├── index.html
└── server.js
React を導入
続いては先ほどのプロジェクトにReactを導入していきます。HTML は React を直接読み込めないため、webpack や bebel を使って、JS ファイルに変換してから読み込んで上げる必要があります。
webpack 周辺のインストール
npm install -D webpack webpack-cli
Babel 周辺のインストール
npm install -D @babel/core @babel/runtime @babel/plugin-transform-runtime @babel/preset-env babel-loader
肝心の React インストール
npm install react react-dom
React を Babel で読み込むためのプリセットをインストール
npm install -D @babel/preset-react
HTML ファイルに render するためのと js ファイル読み込み部分を追加
まずは HTML ファイルに React のコンポーネントを render するためにrootという id を持つ div を追加します。次に、index.js ファイルを読み込むコードを追加します。
index.html<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="root"></div>
// ここにReactのコンポーネントをrenderする
<script src="./index.js"></script>
// ここでJSファイルを読み込む
</body>
</html>
あとで、webpack でバンドル化されたファイルが index.js に出力されるように設定します。
Hello.jsx を作成
React のコンポーネントを作成します
Hello.jsximport React from 'react';
export const Hello = () => {
return <p>Hello World!!!!!!!!!!</p>;
};
app.js を作成
Hello コンポーネントを import して、HTML のrootに render するコードを追加します。
app.jsimport React from 'react';
import ReactDOM from 'react-dom/client';
import { Hello } from './Hello';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello />);
あとで webpack のエントリーポイントにはこのファイルを指定します。
webpack の設定ファイルを作成
webpack.config.jsconst path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/app.js'),
output: {
path: path.resolve(__dirname, 'src'),
filename: 'index.js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: [/\.js$/, /\.jsx$/],
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
],
},
],
},
};
app.js を wbpack で圧縮して index.js に出力するという設定です。この時、ついでに Babel を使って React を HTML が読み込める形に変換しています。
動作確認
さっきと同じように
terminalnode server.js
ブラウザで React コンポーネントが表示されていることを確認します。ナイス Hello World!!! 。HTML で JS が読み込めません、みたいなエラーが出る人は以前書いた記事を参考にしてみてください。
https://www.yukendev.com/blogs/node-reading-js
TypeScript を導入
続きまして、TypeScript を導入していきます。
TypeScript, ts-loader の導入
terminalnpm install -D typescript ts-loader
ts-loader は webpack の中で ts ファイルを js に変換するための loader です。
TypeScript の設定ファイルを作成
tsconfig.json{
"compilerOptions": {
"target": "es2016",
"jsx": "react",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
正直詳細は理解していません。ネットで拾ってきたものを合体させました。詳細は公式ドキュメントを見ましょう。
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
webpack 設定ファイルの修正
TypeScript も webpack で読み込めるように webpack の設定ファイルを修正します。
webpack.config.jsconst path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/app.js'),
output: {
path: path.resolve(__dirname, 'src'),
filename: 'index.js',
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'], // .ts, .tsxを追加
},
module: {
rules: [
{
test: /.(jsx?|tsx?)$/, // 正規表現で『.js, .jsx, .ts, .tsx』の全てを指定
exclude: /node_modules/,
use: {
loader: 'ts-loader', // ts-loader!
options: {
transpileOnly: true,
configFile: '../tsconfig.json',
},
},
},
],
},
};
webpack が『.ts』『.tsx』も読み込めるように extensions に追加します。module の rule では正規表現で『.js, .jsx, .ts, .tsx』の全てを指定しています。loader は先ほどインストールしたts-loaderを使用。オプションで tsconfig ファイルを指定します。transpileOnlyの項目は、型チェックを省くので早くコンパイルできるよ！というものらしいです。試しに、Hello コンポーネントを ts 化してみましょう
Hello.tsximport React from 'react';
export const Hello = () => {
return <p>Hello World!!!!!!!!!!</p>;
};
『.jsx』から『.tsx』にしただけですが、React と TypeScript のコンポーネントです。さっきのように
terminalnode server.js
として、ブラウザで React コンポーネントが表示されていることを確認します。
ナイス Hello World!!!
ここまではこんな構造。
file.
├── package.json
├── src
│ ├── index.html
│ ├── Hello.tsx
│ ├── app.js
│ ├── index.js
│ ├── server.js
│ └── tsconfig.json
└── webpack.config.js
以上！
Node.js + React + TypeScriptの開発環境を整えよう。でした！ここまで来れば、あとはゴリゴリと開発していくことができるんじゃないでしょうか。
最後に
webpack について色々と調べたり、謎のエラーと格闘したりとても大変でしたが、これでスムーズに開発しながら勉強できそうです。
では、Bye
まずは HTML ファイルに React のコンポーネントを render するためにrootという id を持つ div を追加します。次に、index.js ファイルを読み込むコードを追加します。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="root"></div>
// ここにReactのコンポーネントをrenderする
<script src="./index.js"></script>
// ここでJSファイルを読み込む
</body>
</html>
あとで、webpack でバンドル化されたファイルが index.js に出力されるように設定します。
Hello.jsx を作成
React のコンポーネントを作成します
import React from 'react';
export const Hello = () => {
return <p>Hello World!!!!!!!!!!</p>;
};
app.js を作成
Hello コンポーネントを import して、HTML のrootに render するコードを追加します。
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Hello } from './Hello';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello />);
あとで webpack のエントリーポイントにはこのファイルを指定します。
webpack の設定ファイルを作成
const path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/app.js'),
output: {
path: path.resolve(__dirname, 'src'),
filename: 'index.js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: [/\.js$/, /\.jsx$/],
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
],
},
],
},
};
app.js を wbpack で圧縮して index.js に出力するという設定です。この時、ついでに Babel を使って React を HTML が読み込める形に変換しています。
動作確認
さっきと同じように
node server.js
ブラウザで React コンポーネントが表示されていることを確認します。ナイス Hello World!!! 。HTML で JS が読み込めません、みたいなエラーが出る人は以前書いた記事を参考にしてみてください。
https://www.yukendev.com/blogs/node-reading-js
TypeScript を導入
続きまして、TypeScript を導入していきます。
TypeScript, ts-loader の導入
npm install -D typescript ts-loader
ts-loader は webpack の中で ts ファイルを js に変換するための loader です。
TypeScript の設定ファイルを作成
{
"compilerOptions": {
"target": "es2016",
"jsx": "react",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
正直詳細は理解していません。ネットで拾ってきたものを合体させました。詳細は公式ドキュメントを見ましょう。
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
webpack 設定ファイルの修正
TypeScript も webpack で読み込めるように webpack の設定ファイルを修正します。
const path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/app.js'),
output: {
path: path.resolve(__dirname, 'src'),
filename: 'index.js',
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'], // .ts, .tsxを追加
},
module: {
rules: [
{
test: /.(jsx?|tsx?)$/, // 正規表現で『.js, .jsx, .ts, .tsx』の全てを指定
exclude: /node_modules/,
use: {
loader: 'ts-loader', // ts-loader!
options: {
transpileOnly: true,
configFile: '../tsconfig.json',
},
},
},
],
},
};
webpack が『.ts』『.tsx』も読み込めるように extensions に追加します。module の rule では正規表現で『.js, .jsx, .ts, .tsx』の全てを指定しています。loader は先ほどインストールしたts-loaderを使用。オプションで tsconfig ファイルを指定します。transpileOnlyの項目は、型チェックを省くので早くコンパイルできるよ！というものらしいです。試しに、Hello コンポーネントを ts 化してみましょう
import React from 'react';
export const Hello = () => {
return <p>Hello World!!!!!!!!!!</p>;
};
『.jsx』から『.tsx』にしただけですが、React と TypeScript のコンポーネントです。さっきのように
node server.js
として、ブラウザで React コンポーネントが表示されていることを確認します。
ナイス Hello World!!!
ここまではこんな構造。
.
├── package.json
├── src
│ ├── index.html
│ ├── Hello.tsx
│ ├── app.js
│ ├── index.js
│ ├── server.js
│ └── tsconfig.json
└── webpack.config.js
以上！
Node.js + React + TypeScriptの開発環境を整えよう。でした！ここまで来れば、あとはゴリゴリと開発していくことができるんじゃないでしょうか。
最後に
webpack について色々と調べたり、謎のエラーと格闘したりとても大変でしたが、これでスムーズに開発しながら勉強できそうです。
では、Bye