編集履歴

質問編集履歴

DBからの削除はできました。

2020/04/15 08:24

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -58,7 +58,7 @@
-！！実装したいのはここ！！
+！！実装したいのはここ！！→実装できました
 // Realtime Database の books から書籍を削除する
@@ -66,109 +66,255 @@
   // TODO: books から該当の書籍データを削除
+  if(window.confirm('削除してよろしいですか？')){
-  return firebase
+    return firebase
+      .database()
+      .ref(`books/${bookId}`)
+      .remove();
+    // キャンセル時の処理
+　} else {
+　　return;
+　}
+};
+// 書籍の表示用のdiv（jQueryオブジェクト）を作って返す
+const createBookDiv = (bookId, bookData) => {
+  // HTML内のテンプレートからコピーを作成する
+  const $divTag = $('#book-template > .book-item').clone();
+  // 書籍タイトルを表示する
+  $divTag.find('.book-item__title').text(bookData.bookTitle);
+  // 書籍の表紙画像をダウンロードして表示する
+  downloadBookImage(bookData.bookImageLocation).then((url) => {
+    displayBookImage($divTag, url);
+  });
+  // id属性をセット
+  $divTag.attr('id', `book-id-${bookId}`);
+  // 削除ボタンのイベントハンドラを登録
+  const $deleteButton = $divTag.find('.book-item__delete');
+  $deleteButton.on('click', () => {
+    deleteBook(bookId);
+  });
+  return $divTag;
+};
+// 書籍一覧画面内の書籍データをクリア
+const resetBookshelfView = () => {
+  $('#book-list').empty();
+};
+// 書籍一覧画面に書籍データを表示する
+const addBook = (bookId, bookData) => {
+  const $divTag = createBookDiv(bookId, bookData);
+  $divTag.appendTo('#book-list');
+};
+// 書籍一覧画面の初期化、イベントハンドラ登録処理
+const loadBookshelfView = () => {
+  resetBookshelfView();
+  // 書籍データを取得
+  const booksRef = firebase
     .database()
     .ref('books')
-    .removed(bookId.bookTitle);
+    .orderByChild('createdAt');
-};
+  // 過去に登録したイベントハンドラを削除
+  booksRef.off('child_removed');
+  booksRef.off('child_added');
-// 書籍の表示用のdiv（jQueryオブジェクト）を作って返す
+  // books の child_removedイベントハンドラを登録
+  // （データベースから書籍が削除されたときの処理）
+  booksRef.on('child_removed', (bookSnapshot) => {
+    const bookId = bookSnapshot.key;
-const createBookDiv = (bookId, bookData) => {
+    const $book = $(`#book-id-${bookId}`);
+    ！！！実装したい！！！
-  // HTML内のテンプレートからコピーを作成する
+    // TODO: 書籍一覧画面から該当の書籍データを削除する
-  const $divTag = $('#book-template > .book-item').clone();
-  // 書籍タイトルを表示する
-  $divTag.find('.book-item__title').text(bookData.bookTitle);
-  // 書籍の表紙画像をダウンロードして表示する
-  downloadBookImage(bookData.bookImageLocation).then((url) => {
-    displayBookImage($divTag, url);
   });
-  // id属性をセット
-  $divTag.attr('id', `book-id-${bookId}`);
-  // 削除ボタンのイベントハンドラを登録
+  // books の child_addedイベントハンドラを登録
-  const $deleteButton = $divTag.find('.book-item__delete');
+  // （データベースに書籍が追加保存されたときの処理）
-  $deleteButton.on('click', () => {
+  booksRef.on('child_added', (bookSnapshot) => {
+    const bookId = bookSnapshot.key;
+    const bookData = bookSnapshot.val();
+    // 書籍一覧画面に書籍データを表示する
-    deleteBook(bookId);
+    addBook(bookId, bookData);
   });
-  return $divTag;
-};
-// 書籍一覧画面内の書籍データをクリア
-const resetBookshelfView = () => {
-  $('#book-list').empty();
-};
-// 書籍一覧画面に書籍データを表示する
-const addBook = (bookId, bookData) => {
-  const $divTag = createBookDiv(bookId, bookData);
-  $divTag.appendTo('#book-list');
-};
-// 書籍一覧画面の初期化、イベントハンドラ登録処理
-const loadBookshelfView = () => {
-  resetBookshelfView();
-  // 書籍データを取得
-  const booksRef = firebase
-    .database()
-    .ref('books')
-    .orderByChild('createdAt');
+};
+/**
+ * ----------------------
+ * すべての画面共通で使う関数
+ * ----------------------
+ */
+// ビュー（画面）を変更する
+const showView = (id) => {
+  $('.view').hide();
+  $(`#${id}`).fadeIn();
+  if (id === 'bookshelf') {
+    loadBookshelfView();
+  }
+};
+/**
+ * -------------------------
+ * ログイン・ログアウト関連の関数
+ * -------------------------
+ */
+// ログインフォームを初期状態に戻す
+const resetLoginForm = () => {
+  $('#login__help').hide();
+  $('#login__submit-button')
+    .prop('disabled', false)
+    .text('ログイン');
+};
+// ログインした直後に呼ばれる
+const onLogin = () => {
+  console.log('ログイン完了');
+  // 書籍一覧画面を表示
+  showView('bookshelf');
+};
+// ログアウトした直後に呼ばれる
+const onLogout = () => {
+  const booksRef = firebase.database().ref('books');
@@ -180,45 +326,7 @@
-  // books の child_removedイベントハンドラを登録
-  // （データベースから書籍が削除されたときの処理）
-  booksRef.on('child_removed', (bookSnapshot) => {
-    const bookId = bookSnapshot.key;
-    const $book = $(`#book-id-${bookId}`);
-    ！！！ここも実装したい！！！
-    // TODO: 書籍一覧画面から該当の書籍データを削除する
-  });
-  // books の child_addedイベントハンドラを登録
-  // （データベースに書籍が追加保存されたときの処理）
-  booksRef.on('child_added', (bookSnapshot) => {
-    const bookId = bookSnapshot.key;
-    const bookData = bookSnapshot.val();
-    // 書籍一覧画面に書籍データを表示する
-    addBook(bookId, bookData);
+  showView('login');
-  });
 };
@@ -226,33 +334,125 @@
 /**
- * ----------------------
+ * ------------------
- * すべての画面共通で使う関数
+ * イベントハンドラの登録
- * ----------------------
+ * ------------------
  */
-// ビュー（画面）を変更する
+// ログイン状態の変化を監視する
-const showView = (id) => {
+firebase.auth().onAuthStateChanged((user) => {
+  // ログイン状態が変化した
+  if (user) {
-  $('.view').hide();
+    // ログイン済
-  $(`#${id}`).fadeIn();
-  if (id === 'bookshelf') {
-    loadBookshelfView();
+    onLogin();
+  } else {
+    // 未ログイン
+    onLogout();
   }
-};
+});
+// ログインフォームが送信されたらログインする
+$('#login-form').on('submit', (e) => {
+  e.preventDefault();
+  const $loginButton = $('#login__submit-button');
+  $loginButton.text('送信中…');
+  const email = $('#login-email').val();
+  const password = $('#login-password').val();
+  // ログインを試みる
+  firebase
+    .auth()
+    .signInWithEmailAndPassword(email, password)
+    .then(() => {
+      // ログインに成功したときの処理
+      console.log('ログインしました。');
+      // ログインフォームを初期状態に戻す
+      resetLoginForm();
+    })
+    .catch((error) => {
+      // ログインに失敗したときの処理
+      console.error('ログインエラー', error);
+      $('#login__help')
+        .text('ログインに失敗しました。')
+        .show();
+      // ログインボタンを元に戻す
+      $loginButton.text('ログイン');
+    });
+});
+// ログアウトボタンが押されたらログアウトする
+$('.logout-button').on('click', () => {
+  firebase
+    .auth()
+    .signOut()
+    .catch((error) => {
+      console.error('ログアウトに失敗:', error);
+    });
+});
@@ -260,7 +460,7 @@
  * -------------------------
- * ログイン・ログアウト関連の関数
+ * 書籍情報追加モーダル関連の処理
  * -------------------------
@@ -268,89 +468,43 @@
-// ログインフォームを初期状態に戻す
+// 書籍の登録モーダルを初期状態に戻す
-const resetLoginForm = () => {
+const resetAddBookModal = () => {
-  $('#login__help').hide();
+  $('#book-form')[0].reset();
+  $('#add-book-image-label').text('');
-  $('#login__submit-button')
+  $('#submit_add_book')
     .prop('disabled', false)
-    .text('ログイン');
+    .text('保存する');
-};
+};
-// ログインした直後に呼ばれる
-const onLogin = () => {
-  console.log('ログイン完了');
-  // 書籍一覧画面を表示
+// 選択した表紙画像の、ファイル名を表示する
-  showView('bookshelf');
+$('#add-book-image').on('change', (e) => {
-};
-// ログアウトした直後に呼ばれる
-const onLogout = () => {
+  const input = e.target;
-  const booksRef = firebase.database().ref('books');
+  const $label = $('#add-book-image-label');
-  // 過去に登録したイベントハンドラを削除
-  booksRef.off('child_removed');
-  booksRef.off('child_added');
+  const file = input.files[0];
-  showView('login');
-};
-/**
- * ------------------
- * イベントハンドラの登録
- * ------------------
- */
-// ログイン状態の変化を監視する
-firebase.auth().onAuthStateChanged((user) => {
-  // ログイン状態が変化した
-  if (user) {
+  if (file != null) {
-    // ログイン済
+    $label.text(file.name);
-    onLogin();
   } else {
-    // 未ログイン
+    $label.text('ファイルを選択');
-    onLogout();
   }
@@ -358,67 +512,111 @@
-// ログインフォームが送信されたらログインする
+// 書籍の登録処理
-$('#login-form').on('submit', (e) => {
+$('#book-form').on('submit', (e) => {
   e.preventDefault();
+  // 書籍の登録ボタンを押せないようにする
-  const $loginButton = $('#login__submit-button');
+  $('#submit_add_book')
+    .prop('disabled', true)
-  $loginButton.text('送信中…');
+    .text('送信中…');
+  // 書籍タイトル
-  const email = $('#login-email').val();
+  const bookTitle = $('#add-book-title').val();
-  const password = $('#login-password').val();
+  const $bookImage = $('#add-book-image');
+  const { files } = $bookImage[0];
+  if (files.length === 0) {
+    // ファイルが選択されていないなら何もしない
+    return;
+  }
+  const file = files[0]; // 表紙画像ファイル
+  const filename = file.name; // 画像ファイル名
+  const bookImageLocation = `book-images/${filename}`; // 画像ファイルのアップロード先
-  // ログインを試みる
+  // 書籍データを保存する
   firebase
-    .auth()
+    .storage()
+    .ref(bookImageLocation)
-    .signInWithEmailAndPassword(email, password)
+    .put(file) // Storageへファイルアップロードを実行
     .then(() => {
-      // ログインに成功したときの処理
+      // Storageへのアップロードに成功したら、Realtime Databaseに書籍データを保存する
+      const bookData = {
+        bookTitle,
+        bookImageLocation,
+        createdAt: firebase.database.ServerValue.TIMESTAMP,
+      };
+      return firebase
+        .database()
-      console.log('ログインしました。');
+        .ref('books')
-      // ログインフォームを初期状態に戻す
-      resetLoginForm();
+        .push(bookData);
     })
+    .then(() => {
+      // 書籍一覧画面の書籍の登録モーダルを閉じて、初期状態に戻す
+      $('#add-book-modal').modal('hide');
+      resetAddBookModal();
+    })
     .catch((error) => {
-      // ログインに失敗したときの処理
+      // 失敗したとき
-      console.error('ログインエラー', error);
+      console.error('エラー', error);
+      resetAddBookModal();
-      $('#login__help')
+      $('#add-book__help')
-        .text('ログインに失敗しました。')
+        .text('保存できませんでした。')
-        .show();
+        .fadeIn();
-      // ログインボタンを元に戻す
-      $loginButton.text('ログイン');
     });
@@ -426,199 +624,11 @@
-// ログアウトボタンが押されたらログアウトする
-$('.logout-button').on('click', () => {
-  firebase
-    .auth()
-    .signOut()
-    .catch((error) => {
-      console.error('ログアウトに失敗:', error);
-    });
-});
-/**
- * -------------------------
- * 書籍情報追加モーダル関連の処理
- * -------------------------
- */
-// 書籍の登録モーダルを初期状態に戻す
-const resetAddBookModal = () => {
-  $('#book-form')[0].reset();
-  $('#add-book-image-label').text('');
-  $('#submit_add_book')
-    .prop('disabled', false)
-    .text('保存する');
-};
-// 選択した表紙画像の、ファイル名を表示する
-$('#add-book-image').on('change', (e) => {
-  const input = e.target;
-  const $label = $('#add-book-image-label');
-  const file = input.files[0];
-  if (file != null) {
-    $label.text(file.name);
-  } else {
-    $label.text('ファイルを選択');
-  }
-});
-// 書籍の登録処理
-$('#book-form').on('submit', (e) => {
-  e.preventDefault();
-  // 書籍の登録ボタンを押せないようにする
-  $('#submit_add_book')
-    .prop('disabled', true)
-    .text('送信中…');
-  // 書籍タイトル
-  const bookTitle = $('#add-book-title').val();
-  const $bookImage = $('#add-book-image');
-  const { files } = $bookImage[0];
-  if (files.length === 0) {
-    // ファイルが選択されていないなら何もしない
-    return;
-  }
-  const file = files[0]; // 表紙画像ファイル
-  const filename = file.name; // 画像ファイル名
-  const bookImageLocation = `book-images/${filename}`; // 画像ファイルのアップロード先
-  // 書籍データを保存する
-  firebase
-    .storage()
-    .ref(bookImageLocation)
-    .put(file) // Storageへファイルアップロードを実行
-    .then(() => {
-      // Storageへのアップロードに成功したら、Realtime Databaseに書籍データを保存する
-      const bookData = {
-        bookTitle,
-        bookImageLocation,
-        createdAt: firebase.database.ServerValue.TIMESTAMP,
-      };
-      return firebase
-        .database()
-        .ref('books')
-        .push(bookData);
-    })
-    .then(() => {
-      // 書籍一覧画面の書籍の登録モーダルを閉じて、初期状態に戻す
-      $('#add-book-modal').modal('hide');
-      resetAddBookModal();
-    })
-    .catch((error) => {
-      // 失敗したとき
-      console.error('エラー', error);
-      resetAddBookModal();
-      $('#add-book__help')
-        .text('保存できませんでした。')
-        .fadeIn();
-    });
-});
 ```
-やりたいことは、削除ボタンが押されたら、そのデータのみをDBから削除してページを更新したいのですが、上記のようにremove(bookId.bookTitle)として削除ボタンを押すと、なぜかテーブル内の全データが削除されます。(bookIdだけではエラーが出てしまい、削除されませんでした)
+やりたいことは、削除ボタンが押されたら、そのデータのみをDBから削除してページを更新したいのですが、上記のようにremove(bookId.bookTitle)として削除ボタンを押すと、なぜかテーブル内の全データが削除されます。(bookIdだけではエラーが出てしまい、削除されませんでした)→できました。
-console.logで確認しましたが、bookIdは取得できています。
+console.logで確認しましたが、bookIdは取得できています。→できました。
@@ -626,4 +636,4 @@
-削除ボタンが押されたデータのみ(bookImageLocation,bookTitle,createdAt)を削除する方法と、削除後にページを更新する、またはhtmlから該当データを削除する方法について教えて頂けないでしょうか。よろしくお願いします。
+削除後にページを更新する、またはhtmlから該当データを削除する方法について教えて頂けないでしょうか。よろしくお願いします。

細かな修正を行いました

2020/04/15 08:24

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -622,8 +622,8 @@
-また、ページが更新されないため、自分でページ更新をしないと反映されません。ファイルを保存するときは、保存後にページがリロードされるのですが、その処理がどこに当たるのかが分かりません。
+また、削除後に該当のデータを表示している一覧からもデータを削除して再表示させたいのですが、削除ボタン押下後に更新されないため自分でページ更新をしないと反映されません。ファイルを保存するときは、保存後にページがリロードされる?のですが、その処理がどこに当たるのかが分かりません。
-削除ボタンが押されたデータのみ(bookImageLocation,bookTitle,createdAt)を削除する方法と、削除後にページを更新する方法について教えて頂けないでしょうか。よろしくお願いします。
+削除ボタンが押されたデータのみ(bookImageLocation,bookTitle,createdAt)を削除する方法と、削除後にページを更新する、またはhtmlから該当データを削除する方法について教えて頂けないでしょうか。よろしくお願いします。