方針

• 「トランスパイラとモジュールバンドラ」の節を再整理する #879 で削除された「トランスパイラとモジュールバンドラ」の節の「フロントエンドとバックエンドの統合」の項で扱っていた内容を記述する → 現在ではフォームではなくFetch APIを使用してデータの送受信をするように教えていることを鑑みると、この方法を教える必要性が薄いため、削除することになりました
• ut.code(); Learn準拠サンプルプロジェクト（https://github.com/ut-code/utcode-learn-template ）に相当するものを作成する上で必要となる情報を記述する

ut.code(); Learn準拠サンプルプロジェクト内で使用されている未履修の内容

ut.code(); Learn準拠サンプルプロジェクト内でデプロイをするために使用せざるをえないが、未履修であるような内容は次が挙げられます。特に、デプロイ構成についての概要、Viteでの環境変数の利用方法、CORSについてはある程度詳しい説明を要します。

• デプロイ構成の概要
• （tsx）
• CORS
• useEffect（Reactの節で説明をします）
• Viteでの環境変数の利用方法
• （.env.sampleの役割）
• （prisma generateコマンド）
• （Renderを用いたデプロイ方法）

節の構成

ボツ

1. 全体構成
2. バックエンドを準備する
3. フロントエンドから通信する
4. ローカルで動作を確認する
5. デプロイする
   1. 本番ビルドを確認する

   2. Render にデプロイする

最終版

1. フロントエンドとバックエンドを連携する
   1. バックエンドを作成する
   2. フロントエンドを作成する
2. デプロイする
   1. ビルドの設定をする
   2. Renderにデプロイする

作成するアプリ

ut.code(); Learn準拠サンプルプロジェクト（https://github.com/ut-code/utcode-learn-template ）では、チャットアプリを作成していましたが、ここでは掲示板サービスを作成することとしました。理由としては次が挙げられます。

• チャットアプリではなく掲示板サービスであれば、setIntervalを使用して定期的に新しい情報を取得せずにページ読み込み時に新しい情報を取得するだけでも問題が少ない
• データベースの節で掲示板サービスを作成しており、ここでも掲示板サービスを作成することで、データベースの節のコードをそのまま流用できる（バックエンドの場合はCORSに関する2行のコードを除くと全く同一にすることができます）
• Reactの節ではToDoアプリを作成しており、ToDoアプリのコードをある程度流用できる