方針

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

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

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

• デプロイ構成の概要
• （tsx）
• CORS
• useEffect（Reactの節で説明をします）
• Viteでの環境変数の利用方法
• （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アプリのコードをある程度流用できる

ut.code(); Learn準拠サンプルプロジェクトからの変更点

• ut.code(); Learn準拠サンプルプロジェクトではnpm initコマンドでpackage.jsonファイルを作成した後に、typeプロパティの値を"module"にしていましたが、最新のnpmではnpm initの際にtypeプロパティの値を"module"にすることができるようになったためnpm initの際に指定することにしました。
• ut.code(); Learn準拠サンプルプロジェクトでは、npm startコマンドで実行される内容をnode --env-file=.env dist/main.jsとしていましたが、本番環境では.envファイルが存在せずエラーとなってしまうためnode dist/main.jsに書き換えました。