AIが全部解決してくれた（追記：エラーは）
『セイト先生が教えるプログラミング入門』最終章の写経が第9節まで終わり、一応日報アプリが出来ました。しかし正しく動きません。F12でコンソールを見てみたところ、CORSに関して何か問題があるようです。おそらく1-3節で説明された環境構築のどこかで間違えたのだろうと思い、原因をBingのCopilotに尋ねてみることにしました。以下にこのAIと私との会話を記します。
1. ローカルファイルの直接読み込み
私はWindows PCでCursor, Vite, Firebaseを使ってwebアプリを作ろうとしています。ところが、index.htmlをChromeで開き、Consoleを確認したところ、以下のようなエラーが出ていました。HTMLファイルとJavaScriptファイルのバグ以外で考えられる原因を教えてください。
index.html:1 Access to script at 'file:///C:/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
ローカルファイルの直接読み込み:
file:// プロトコルでファイルを開くと、CORSポリシーによりスクリプトの読み込みがブロックされます。
対策: ローカルサーバーを使用してファイルを提供する。例えば、Viteの開発サーバーを使用することで、http://localhost:3000 のようなURLでアクセスできます。
2. パスの書き方の問題
そこで、LiveServerを使ってみました。ところが別のエラーが出ました。
ローカルサーバーを立ち上げたところ、その問題は解決しました。しかし、今度は以下のようなエラーが出てきました。どうすればいいですか？
index.html:1 Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".
相対パスを使用:
インポート文を相対パスに変更します。例えば、import { initializeApp } from 'firebase/app'; を import { initializeApp } from './node_modules/firebase/app'; のように変更します。
3. キャッシュの問題
指示通りにmain.jsのインポート文のパスを書き直しました。ところが、「GoLive」ボタンを押して再びファイルを開くと、また別のエラーが出てしまいました。
インポート文を相対パスに変更したところ、上述のエラーは解決しました。ところが、新たに以下のようなエラーが出ました。どうすればいいですか？
Failed to load resource: the server responded with a status of 404 (Not Found)
ブラウザのキャッシュ:
ブラウザのキャッシュが原因で古いファイルを参照している可能性があります。キャッシュをクリアして再度試してみてください。
同じブラウザの同じアカウントで同じURLを入力していたためかもしれないと思い、別のアカウントを使ってみました（シークレットウィンドウは使ってみたのですがキャッシュは反映されているようでした）。すると、ようやくエラーの無いコンソールが見られました。
ChatGPT-4、すごい！！！
追記：エラー以外の問題
エラーは直りました。けれども履歴ページにもCloud Firestoreのデータにも送信が反映されません。この問題は昨晩、一度main.jsを書き終えたつもりになった段階ですでにありました。
下記のミスを見つけた時点で写経は終わったのですが、その前にCloud Firestoreのデータを消してしまったり、npmコマンドをデタラメに打ち込んだりしました。多分そのせいです。やはり環境構築の問題だったか......
// Cloud Firestoreにデータを送信する
const dJsForm = document.getElementById("js-form");
if (dJsForm) {
dJsForm.addEventListener("submit", (e) => submitData(e, addDoc, collection));
}; // submitData関数にe以外の引数を渡しているのは、submitData関数の中でそれらを改めて定義しなくてよいようにするため
（修正後のコード。修正前はsubmitData()の括弧の中にeしか書いていませんでした）
まだNode.js, npm, Vite, Firebass, それからCursorのTerminalの使い方がよく分かっていないので、今の自分の場合、解決したいなら教科書の指示に従って最初からやり直した方が早い気がします。
まだ「リファクタリング」と「ホスティング」の章が残っていますが、ひとまず別の教科書に"""転進"""することにしました。