フロントエンドの確認
フロントエンドを開発するためのプロジェクトを確認します。
フロントエンド開発プロジェクトを確認する
frontendディレクトリが、フロントエンド開発プロジェクトになります。
このプロジェクトは、Create React App（以下CRA）のTypeScript用テンプレートで作成しています。（参考：CRA - Adding TypeScript）
実装を小さくするために、CRAで生成されたプロジェクトに次のような修正を加えた状態です。
- 開発に使用するDockerCompose定義ファイルを追加
- HelloWorldを表示するだけの簡易なページに変更
- ページ変更に伴う不要ファイルの削除
- アプリの実行時には使用しないライブラリをpackage.jsonのdependenciesからdevDependenciesに移動
ディレクトリ構造は、次のようになっています。
frontend
├── .gitignore
├── package.json
├── tsconfig.json
├── docker
│ ├── docker-compose.api-gen.yml
│ └── docker-compose.api-mock.yml
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── index.tsx
├── App.tsx
├── react-app-env.d.ts
└── setupTests.ts
.gitignore
Gitで管理対象外とするファイルを定義するためのファイルです。
CRAでアプリ作成時に生成されたものを使用しています。
package.json
フロントエンドアプリのプロジェクト定義ファイルです。
CRAでアプリ作成時に生成されたものを使用しています。
tsconfig.json
TypeScript用のプロジェクト定義ファイルです。
CRAでアプリ作成時に生成されたものを使用しています。
docker/docker-compose.api-gen.yml
OpenAPI定義ファイルからクライアント実装を生成するための、Docker Composeの定義ファイルです。
docker/docker-compose.api-mock.yml
OpenAPI定義ファイルからモックサーバを起動するための、Docker Composeの定義ファイルです。
public/favicon.ico
ファビコン用のアイコン。
CRAでアプリ作成時に生成されたものを使用しています。
public/index.html
CRAで作成したアプリでページ表示のエントリポイントとなるHTMLファイルです。コンテンツは動的に生成するため、<div>タグのみ定義しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Todo App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/index.tsx
CRAで作成したアプリでJavaScript実行のエントリポイントとなるsrc/index.jsのTypeScript実装です。
この実装の中では、JSXと呼ばれるJavaScript構文の拡張を使用しています。JSXを使用することで、React要素をHTMLのマークアップに近しいイメージで記述することができます。（参考：React - JSX でマークアップを記述する]）
なお、TypeScriptファイルの拡張子は通常tsですが、後述のJSXを使用する場合はtsxとする必要があります。（参考：TypeScript - JSX）
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
ReactDOM.createRoot()を使用してアプリのルートコンポーネントを作成しています。（参考：createRoot）
ReactDOM.createRoot()の引数にはレンダー先のDOM要素を指定します。ここではDocument.getElementById()の実行結果を渡しています。
ここでのdocumentは前述のpublic/index.htmlを指しており、そこで定義されている<div id="root"></div>を表すDOMに、引数に渡したReact要素がレンダーされることになります。
public/index.htmlの<body>には<div id="root"></div>しか無いため、コンテンツを全て更新していることになります。
root.render()を使用してReactコンポーネントを指定されたDOMにレンダリングします。（参考：root.render(reactNode)）
root.render()の引数にはReactコンポーネントを指定します。ここでは、上で説明したJSXを使用して、<React.StrictMode>とその子要素に<App>があるReact要素を定義しています。
<React.StrictMode>はReact.StrictModeのコンポーネントを指しており、React.StrictModeコンポーネントはReactが提供するコンポーネントです。このコンポーネントは、子要素でReactのstrictモードを有効にするためのコンポーネントになります。出力されるページのコンテンツには影響しませんが、開発時に有用となる警告等を表示してくれるようになります。（参考：StrictMode）
同様に、<App />はAppコンポーネントを指しています。このコンポーネントについては後述します。
src/App.tsx
Appコンポーネントを実装しています。このコンポーネントは、<h1>Hello, world</h1>というHTML要素を表すReact要素を返します。
import React from 'react';
function App() {
return (
<h1>Hello, world</h1>
);
}
export default App;
src/react-app-env.d.ts
TypeScript用の定義ファイルです。
CRAでアプリ作成時に生成されたものを使用しています。
src/setupTests.ts
テスト用の定義ファイルです。
CRAでアプリ作成時に生成されたものを使用しています。
フロントエンドのアプリを起動する
CRAでは、開発モードとしてアプリを起動することができます。（参考：CRA - Available Scripts）
まず、依存モジュールをインストールするため、frontendディレクトリで次のコマンドを実行します。実行時にはいくつかの警告（npm WARN 〜）が出力されますが、ここでは無視してください。
$ npm install
続いて、アプリを起動するため次のコマンドを実行します。
$ npm start
起動が完了したら、自動的にデフォルトブラウザでトップページが開きますので、次の画面が表示されていることを確認します。
起動中はコマンドが実行中のままになりますので、確認が完了したら、Ctrl+Cで終了します。