ReactとExpressを利用してTypeScriptでSingle Page Applicationのサンプルを作成してみた。
開発環境はvscodeとDockerで共有できるようにしており、WindowsでもLinuxでも開発できる。
バックエンドでのTypeScriptの利用例は少ないかもしれないが、フロントエンドとバックエンドの両方をTypeScriptで書いていると頭の中を切り替えずに開発することができるので、ちょっとしたアプリの開発ならスムーズに進められるのが利点である。
開発環境の構築から画面の作成、APIの実装まで行うのでだいぶ長くなってしまったが、ある程度は動作するサンプルを作成するところまで解説したかったので複数回に分けて投稿している。
記事一覧
VScode+Dockerでreactの開発環境を共有してみた
vscodeのRemote-Container機能（Remote-Development機能の一部）を使ってreactの開発環境を構築し、共有できるようにする。
VScode+Dockerでexpressの開発環境を共有してみた
前回と同様に、1つのプロジェクトでExpressも開発できるようにする。
Reactで画面を実装してみた
Reactの画面を追加し画面遷移できるようにする。
ReactからExpress側のWebAPIを呼び出してみた（その1）
APIを追加し画面から呼び出してみる。
ReactからExpress側のWebAPIを呼び出してみた（その2）
RESTに準拠したデータ作成・更新・削除APIを作成する。
開発環境・ツール・ライブラリ
- Windows 10 Pro または Fedora 36
- vscode ver 1.71
- docker-desktop または docker, docker-compose
- git
- Node.js ver 16
- Typescript ver 4.7
- React ver 18
- Express ver 4