【TypeScriptあり】Node.jsとReactでWebアプリを作る【Express使います】

この記事では以下のようなWebアプリを作る手順を解説します。
バックエンドはNode.js
フロントエンドはReact
バックエンドもフロントエンドもTypeScript使用
完成するWebアプリは、画像と文字だけを表示する簡単なものです。
その代わりに、より確実なコードを書いていくことを重視する内容となっております。
解説の流れは以下です。
Node.jsをインストールする
プロジェクトフォルダを作る
バックエンドを作る準備
tsconfig.jsonを作る
Expressを導入する
Expressを使ってみる
ts-nodeでサーバーを起動
nodemonでサーバーをリアルタイムで更新
バックエンドをデータの置き場にする
Reactプロジェクトを作る
Expressサーバーにアクセスする
proxyを設定する
では、順番にやっていきます。
Node.jsをインストールする
Node.jsやReactを使って開発するには「Node.js」をパソコンにインストールします。
Windowsの場合は、Node.jsの公式サイトからパッケージをダウンロードしてインストールしてください。
ダウンロードするのは「推奨版」でいいです。
Macの場合も、Windowsのやり方でNode.jsをインストールできます。
ですが、Macならもっと便利な方法でNode.jsをインストールできます。
もしMacをお使いなら、以下の記事を参考にされてください。

プロジェクトフォルダを作る
では、好きな場所にフォルダを作ってください。
そのフォルダの中に2つのフォルダを作ります。
名前は何でもいいです。
今回は例として「nodejs_react_app」というフォルダを作り、その中に「frontend」と「backend」という名前のフォルダを作りました。
そして「nodejs_react_app」をエディタで開きます。
この記事では、エディタとしてVSCodeを使っていきます。

VSCodeだと、上の画像のような感じになっているかと思います。
バックエンドを作る準備
まずはNode.jsでバックエンドを作っていきます。
Windowsならコマンドプロンプト、Macならターミナルを開いてくだ さい。
そして、「backend」に移動します。
cd nodejs_react_app/backend
移動したら、以下を実行します。
npm init -y
yarnを使う場合は以下です。
yarn init -y

すると、「backend」の中に「package.json」が作られます。
tsconfig.jsonを作る
次にTypeScriptを使う準備をします。
2つのパッケージをインストールします。
typescript
@types/node
npm install -D typescript @types/node
yarnなら以下。
yarn add -D typescript @types/node
次に、以下のコマンドを実行します。
npx tsc --init
yarnなら以下。
yarn tsc --init
すると、「backend」の中に「tsconfig.json」が作られます。
「tsconfig.json」はTypeScriptに関する設定を書くところです。
「tsconfig.json」の中身を見てみると、すでにいくつか記述があるかと思います。
しかし、コメントアウトばかりでごちゃごちゃしてますよね。
「tsconfig.json」の中身をいったん全部消してください。
そして、今回は以下のように書 きます。
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
デフォルトのままほとんど変えていません。
変えたのは「"target": "esnext"」の部分だけです。
tsconfig.jsonの中身をどう書くべきかは、色々な考え方があります。
今回は必要最低限な設定だけにしました。
Expressを導入する
「Express」はNode.jsのフレームワークです。
Expressがあれば、Node.jsとReactの接続が簡単です。
では、Expressをインストールします。
ターミナルで以下のコマンドを実行しましょう。
npm install express
yarnの場合は以下。
yarn add express
今回はTypeScriptを使うため、以下も実行 します。
npm install -D @types/express
yarnの場合は以下。
yarn add -D @types/express
そして、「backend」の中に「server.ts」というファイルを作ります。

VSCodeだと、上の画像のような状態になります。
別に名前は「server.ts」じゃなくても構いません。
ただ、Expressを使った開発では「server.ts(server.js)」という名前のファイルをメインに使うことが多いような気がします。
「server.ts」がメインのファイルとなるので、「package.json」にもそれを明示しておきましょう。

「package.json」の中に、「"main": "index.js"」と書かれているところがあると思います。
そこを、「"main": "server.ts"」に書き換えます。
これを書かないことで何かエラーが出るわけではないです。
具体的には 、「パッケージとしてnpmに公開するとき」に必要になってくる記述です。
今回はあまり気にしなくていいです。
では、「server.ts」にコードを書いていきます。
/* server.ts */
import express from "express";
const app: express.Express = express();
これで、Expressを使う準備が整いました。
Expressを使ってみる
では、Expressを使って簡単な文字列を出力するアプリを作ってみます。
「server.ts」にコードを追加しましょう。
/* server.ts */
import express from "express";
const app: express.Express = express();
const port = 8000;
app.get("/", (req: express.Request, res: express.Response) => {
res.send("Hello, world!");
});
app.listen(port, () => {
console.log(`port ${port} でサーバー起動中`);
});
このコードはExpressの公式サイトで紹介されているものをアレンジしました。
portは「3000」でも「4000」でも「5000」でも何でもいいです。
ただ、「3000」にすると話がややこしくなります。
できれば「3000」以外がいいです。
ここでは「8000」にしました。
では、サーバーを起動してみます。
ターミナルで以下のコマンドを実行します。
node server.ts
これでサーバーが起動するはずです。
しか し、エラーが出たかと思います。
import express from "express";
^^^^^^
SyntaxError: Cannot use import statement outside a module
上記のような内容のエラーです。
「import express from "express";」の部分がエラーになっているようです。
これは、「package.json」に記述を追加することでとりあえず解消できます。

追加するのは「"type": "module"」という記述です。
これでもう一度サーバーを起動してみます。
先ほどのエラーは出なくなるはずです。
ですが、またエラーになったかと思います。
以下のような内容のエラーです。
node:internal/errors:477
ErrorCaptureStackTrace(err);
^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ...
普通のJavaScriptであれば上手くはずなんです。
ですが、今回はTypeScriptを使っています。
そのため「サーバーが起動しない」という状態です。
そこで「ts-node」を使います。