JavaScriptの関数を利用してfirebase databaseへデータを挿入したいが、firebase databaseへのアクセス方法がわからず、困っています。

Question

前提・実現したいこと

firebase databaseにユーザー情報を登録したいと思い、HTMLのボタンを押すと、JSがformの値を読み取ってデータベースに入れるという関数を実行したいのですが、データベース操作でエラーが発生しました。

発生している問題・エラーメッセージ

Uncaught ReferenceError: require is not defined

該当のソースコード

  <template id="userreg.html">
    <ons-page>
      <form>
        <input id="username" type="text">
        <input id="email" type="text">
        <input type="button" value="新規登録" onclick="onButtonClick()">
      </form>
    </ons-page>
  </template>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
      https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-database.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "AIzaSyCOnYUzi7EE9RAsKvZHYmVPLMFYb-8mypI",
      authDomain: "web-assignment-83658.firebaseapp.com",
      databaseURL: "https://web-assignment-83658.firebaseio.com",
      projectId: "web-assignment-83658",
      storageBucket: "web-assignment-83658.appspot.com",
      messagingSenderId: "756570131771",
      appId: "1:756570131771:web:d1a6ecf16c3a2d57023b1e",
      measurementId: "G-W64KNL5WJ8"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>
  <script src="auth.js"></script>
</body>
</html>

var admin = require("firebase-admin");

// Fetch the service account key JSON file contents
var serviceAccount = require("../web-assignment-83658-firebase-adminsdk-xny6w-811cfe9648.json");

// Initialize the app with a service account, granting admin privileges
admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://web-assignment-83658.firebaseio.com"
  });

var db = admin.database();
var ref = db.ref('/')
C:\Users\gojin\Documents\webassignment\pages\public\home.html
function onButtonClick() {
    var userelement = document.getElementById('username');
    var emailelement = document.getElementById('email');
    var user = userelement.value;
    var email = emailelement.value;
    ref.set({
        user: {
            username: user,
            useremail: email
        }
    });
    console.log(user);
    console.log(emal)
};

試したこと

1.requireを含む部分のみを削除して実行→"Uncaught ReferenceError: admin is not defined"

2.requireを含む部分を削除してadmin.initializeAppをfirebase.admin.initializeAppとして実行→"Uncaught TypeError: Cannot read property 'initializeApp' of undefined"

3.initializeAppの部分も消す（adminが消える）→データベースで書き込み不可のルールにはじかれて実行不可。

補足情報（FW/ツールのバージョンなど）

バックエンドをfirebaseで構築
フロントはHTMl, CSS, JavaScriptで構築。フレームワークはONSENUIを使用。
IDEはVSCode

Comments

[m.ts10806]

タイトルがタグにある単語を並べただけで要件が何もありません。タイトルは要件を記載してください。
https://teratail.com/help/question-tips#questionTips3-1

また、2つ目のコードブロックができていませんので、調整してください。

[JinGoda]

すみません。修正いたしました。

[m.ts10806]

こちらの伝え方が悪かったかもしれないですが、「タグがある」ということは「タイトルにわざわざ書かなくても伝わる」という意味です。その分、要件を書くことに振ってください。

[JinGoda]

たしかにそうですね...すみません、編集しなおしました。
まだ少し抽象的ではあるのですが、自分の思っていることが伝わればうれしいです。

[hoshi-takanori]

require is not defined というのは JavaScript の実行方法 (というか、モジュールの読み込み) に関するエラーで、データベース操作は関係ありません。require はブラウザの JavaScript では直接は使えないので、webpack などを使ってモジュールのバンドル化をする必要があります。
https://qiita.com/kamykn/items/45fb4690ace32216ca25

[JinGoda]

HTMLにCDNで読み込んでいるので必要が無いという情報を見つけて削除したのですが、｢試したこと｣にも書いたように他のエラーが出てしまって詰まっていました。
HTMLで読み込んでいてもモジュールのバンドル化をして実行するのが正しいですか？

Answer 1

adminを含むコードを削除し、db, refの宣言とonButtonClick関数を残しました。
作成しているホームページでログインをしてこの関数を実行したところ、思っていたとおりの挙動をしました。