実現したいこと
ブラウザのデータ入力画面で入力しsubmit押すと、
データが保存されCloud Firestore上でもデータが保存されたのを確認できる
発生している問題・分からないこと
データ入力画面で入力しsubmitしても、データが保存されていないようでブラウザのHistoryページにデータが現れず、Cloud Firestore上でも新規のデータが確認できない
エラーメッセージ
error
1コンソール上のエラー 2history.html:1 Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".
該当のソースコード
html
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <link rel="icon" type="image/svg+xml" href="/vite.svg" />6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />7 <title>Vite App</title>8 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">9 <link rel="stylesheet" href="./sanitize.css">10 <link rel="stylesheet" href="./style.css">11 </head>12 <body>13 <form class="form" action="" id="js-form">14 <div class="form-list">15 <label for="name" class="form-title">Name:</label>16 <div class="form-field">17 <input type="text" class="input-field" id="name" name="name">18 </div>19 </div>20 <div class="form-list">21 <label for="work" class="form-title">Work:</label>22 <div class="form-field">23 <input type="text" class="input-field" id="work" name="work">24 </div>25 </div>26 <div class="form-list">27 <label for="comment" class="form-title">Comment:</label>28 <div class="form-title">29 <textarea class="input-field" name="comment" id="comment" rows="4" cols="50"></textarea>30 </div>31 </div>32 <div class="form-button">33 <button class="button" type="submit">Submit</button>34 </div>35 </form>36 37 <div class="history-link">38 <a href="./">Home</a>39 <a href="./history.html">History</a>40 </div>41 <script type="module" src="/main.js"></script>42 </body>43</html>44
css
1body {2 font-family: "Noto Sans JP", Helvetica, arial, sans-serif;3 padding: 20px;4}5/* 6form 7*/8.form {9 border: 2px solid #000;10 padding: 20px;11 max-width: 780px;12 width: 100%;13 margin: 0 auto;14 /* width値を持つブロック要素に指定すると要素が中央揃えになる */15}16.form-list {17 display: flex;18 margin-bottom: 10px;19}20.form-title {21 font-weight: bold;22 cursor: pointer;23 width: 30%;24}25.form-field {26 width: 70%;27}28.form-button {29 text-align: center;30}31/* 32input, textarea 33*/34.input-field {35 width: 100%;36 padding: 10px;37 border: 1px solid #000;38}39/* 40button 41*/42.button {43 border: 0;44 font-size: 18px;45 padding: 10px 20px;46 font-weight: bold;47 cursor: pointer;48 background-color: #333;49 color: #fff;50 border-radius: 5px;51 transition: opacity 0.25s;52}53.button:hover {54 opacity: 0.8;55}56/* 57history-link 58*/59.history-link {60 margin-top: 20px;61 text-align: right;62}63.history-link > a {64 margin: 0 5px;65 color: #000;66}67/* 68table 69*/70.table {71 width: 100%;72}73.table-head {74 background-color: #eee;75}76.table-head th {77 border: 1px solid #000;78 text-align: center;79 padding: 5px;80 width: 15%;81}82.table-head th:nth-child(4) {83 width: 55%;84}85.table-head td {86 text-align: left;87 border: 1px solid #000;88 padding: 10px;89}90 91 92 93
html
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <link rel="icon" type="image/svg+xml" href="/vite.svg" />6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />7 <title>Vite App</title>8 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">9 <link rel="stylesheet" href="./sanitize.css">10 <link rel="stylesheet" href="./style.css">11 </head>12 <body>13 <table class="table">14 <thead class="table-head">15 <tr>16 <th>Date</th>17 <th>name</th>18 <th>work</th>19 <th>comment</th>20 </tr>21 </thead>22 <tbody class="table-body" id="js-history">23 <tr>24 <td>2024/01/01 10:00</td>25 <td>山田</td>26 <td>コーディング</td>27 <td>TOPページの作成およびABOUTページの修正を実施</td>28 </tr>29 </tbody>30 </table>31 <div class="history-link">32 <a href="./">Home</a>33 <a href="./history.html">History</a>34 </div>35 <script type="module" src="/main.js"></script>36 </body>37</html>38
JavaScript
1import { initializeApp } from "firebase/app";2import { getFirestore, collection, getDocs, addDoc } from "firebase/firestore"; 3 4// Initialize Firebase5const app = initializeApp(firebaseConfig);6// Cloud Firestoreの初期化7const db = getFirestore(app);8// Cloud Firestoreから取得したデータを表示する9const fetchHistoryData = async () => {10 let tags = "";11//reportsコレクションのデータを取得12 const querySnapshot = await getDocs(collection(db, "reports"));13//データをテーブル表の形式に合わせてHTMLに挿入14 querySnapshot.forEach((doc) => {15 console.log(`${doc.id} => ${doc.data()}`); 16 tags += `<tr><td>${doc.data().date}</td><td>${doc.data().name}</td><td>${doc.data().work}</td><td>${doc.data().comment}</td></tr>` 17 });18 document.getElementById("js-history").innerHTML =tags;19};20// Cloud Firestoreから取得したデータを表示する21if(document.getElementById("js-history")) {22 fetchHistoryData(getDocs, collection, db); 23}24// Cloud Firestoreにデータを送信する25const submitData = async (e) => {26 e.preventDefault();27 const formData = new FormData(e.target);28 29 try {30 const docRef = await addDoc(collection(db, "reports"),{31 date: new Date(),32 name: formData.get("name"),33 work: formData.get("work"),34 comment: formData.get("comment")35 });36 console.log("Document written with ID: ", docRef.id);37 } catch(e) {38 console.error("Error adding document: ", e);39 }40};41// Cloud Firestoreにデータを送信する42if(document.getElementById("js-form")) {43 document.getElementById("js-form").addEventListener("submit", (e) => submitData(e, addDoc, collection, db));44};
試したこと・調べたこと
上記の詳細・結果
（（上記JavaScriptの方はconst firebaseConfigという情報は外しております。
また文字数の関係で、他1cssファイルは載せれておりません。））
コンソール上のエラーは様々な要因が関係られるとの情報を拝見し問題の特定ができるエラーではなさそうでしたので、
Java Script上のFirestoreに波線が入っておりUnknown wordと出ておりそれが何か原因かと思い、エディタのCursor上でのAIによるとeslintというファイル等に関する指示がありずっと指示に沿って試しておりましたが解決できておりません。
補足
特になし
0 コメント