フロントエンドの確認

フロントエンドを開発するためのプロジェクトを確認します。

フロントエンド開発プロジェクトを確認する

frontendディレクトリが、フロントエンド開発プロジェクトになります。

このプロジェクトは、create-next-appのデフォルトのテンプレートで作成しています。
（参考：create-next-app | Next.js）

実装を小さくするために、create-next-appで生成されたプロジェクトに次のような修正を加えた状態です。

• 開発に使用するDocker Composeの定義ファイルを追加
• HelloWorldを表示するだけの簡易なページに変更
• 不要ファイルの削除
• バリデーション用の共通部品を追加

ディレクトリ構造は、次のようになっています。

frontend
├── .gitignore
├── next.config.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── docker
│   ├── docker-compose.api-gen.yml
│   └── docker-compose.api-mock.yml
└── src
    ├── app
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   └── page.tsx
    └── validation
        ├── index.ts
        ├── Validation.tsx
        └── field
            ├── FieldConstraint.ts
            ├── NumberFieldConstraint.ts
            ├── StringArrayFieldConstraint.ts
            └── StringFieldConstraint.ts

.gitignore

Gitで管理対象外とするファイルを定義するためのファイルです。

create-next-appでアプリ作成時に生成されたものを使用しています。

next.config.ts

Next.jsの設定ファイルです。

create-next-appでアプリ作成時に生成されたものにReactのStrictModeを明示的に適用しています。

StrictModeとは、出力されるページのコンテンツには影響を与えることなく、開発時に有用となる警告等を表示してくれる機能です。（参考：next.config.js Options: reactStrictMode | Next.js）

package-lock.json

プロジェクトの依存関係を正確に記録し、ビルドを再現可能に保証するためのファイルです。

create-next-appでアプリ作成時に生成されたものを使用しています。

package.json

フロントエンドアプリのプロジェクト定義ファイルです。

create-next-appでアプリ作成時に生成されたものを使用しています。

tsconfig.json

TypeScript用のプロジェクト定義ファイルです。

create-next-appでアプリ作成時に生成されたものを使用しています。

docker/docker-compose.api-gen.yml

OpenAPI定義ファイルからクライアント実装を生成するための、Docker Composeの定義ファイルです。

docker/docker-compose.api-mock.yml

OpenAPI定義ファイルからモックサーバを起動するための、Docker Composeの定義ファイルです。

src/app/favicon.ico

ファビコン用のアイコンです。

create-next-appでアプリ作成時に生成されたものを使用しています。

src/app/globals.css

アプリケーション全体にスタイルを適用するためのCSSファイルです。
（参考：Getting Started: Global CSS | Next.js）

create-next-appでアプリ作成時に生成されたものですが、生成時のコードは使用しないため、削除して空のファイルにしています。

src/app/layout.tsx

複数のページで共有されるUIです。

create-next-appでアプリ作成時に生成されたものから、今回作成するToDoアプリに必要のない部分を削除し、ハンズオンの初期状態にしています。

この実装の中では、JSXと呼ばれるJavaScript構文の拡張を使用しています。JSXを使用することで、React要素をHTMLのマークアップに近しいイメージで記述することができます。
（参考：JSX でマークアップを記述する – React）

なお、TypeScriptファイルの拡張子は通常tsですが、後述のJSXを使用する場合はtsxとする必要があります。（参考：TypeScript - JSX）

src/app/page.tsx

インデックスページ（/）でレンダリングされるUIです。
（参考：Layouts and Pages | Next.js）

create-next-appでアプリ作成時に生成されたものを、<h1>Hello, world</h1>というHTML要素を表すReact要素を返すように変更しています。

src/validation

入力値バリデーション用の共通部品を格納しているディレクトリです。

example-chatのfrontend/src/framework/validationからコピーして追加しました。今回はこれを流用します。

フロントエンドのアプリを起動する

create-next-appでは、開発モードとしてアプリを起動することができます。
（参考：Run the development server | Next.js）

まず、依存モジュールをインストールするため、frontendディレクトリで次のコマンドを実行します。実行時にはいくつかの警告（npm WARN 〜）が出力されますが、ここでは無視してください。

$ npm install

続いて、アプリを起動するため次のコマンドを実行します。

$ npm run dev

起動が完了したら、ブラウザでトップページを開き、次の画面が表示されていることを確認します。

起動中はコマンドが実行中のままになりますので、確認が完了したら、Ctrl+Cで終了します。