TAKA:
「老師、コメント投稿機能がようやくリロードなしで動くようになりました！でも……コメント削除がエラーになるんです。」
AI老師:
「うむ、次の課題が見えてきたようじゃな。コメント削除時のエラー内容を確認したかの？」
TAKA:
「はい、ログを見るとこんな感じです。ObjectId が絡んでいるようで……。」
AI老師:
「その推測は正しいぞ。ObjectId はMongoDBが生成するユニークな識別子じゃが、そのままではJSON形式で処理できぬ。削除機能が正しく動かない原因もこれじゃろうな。」
- エラー内容を分解して理解する
TAKA:
「ということは、削除時にエラーが起きるのは、ObjectId が文字列として処理されていないからですか？」
AI老師:
「その通りじゃ。ObjectId を文字列に変換して扱う必要がある。おぬし、先ほどコメント投稿時には ObjectId を文字列に変換していたな？」
TAKA:
「はい！投稿時には str(ObjectId()) を使って変換しました。でも削除では気にしていませんでした。」
AI老師:
「よし、その問題に気づけたのは大きな進歩じゃ。次に、削除処理を修正していこうか。」
- app.py の削除処理を修正する
AI老師:
「まずは app.py の削除処理を見直すぞ。削除時に渡されるコメントIDが文字列であることを想定し、比較も文字列で行うようにするのじゃ。」
修正後のコード例を示します。
@app.route(‘/video//comment//delete’, methods=[‘POST’])
@login_required
def delete_comment(video_id, comment_id):
video = videos.find_one({‘video_id’: video_id})
if video:
# コメントIDを文字列として比較
updated_comments = [comment for comment in video[‘comments’] if comment[‘_id’] != comment_id]
videos.update_one({‘video_id’: video_id}, {‘$set’: {‘comments’: updated_comments}})
return jsonify({‘success’: True}) # JSONで成功レスポンスを返す
return jsonify({‘success’: False}), 404 # エラー時のレスポンス
- フロントエンドの修正
AI老師:
「次に、フロントエンドの削除処理がサーバーからのレスポンスを正しく受け取るように調整するぞ。」
video_detail.html の修正例を示します。
- 実行とテスト
TAKA:
「これで動くようになったはず……早速テストしてみます！」
AI老師:
「うむ、テストでは以下を確認するのじゃ。」
リロードなしでコメントが削除されること
削除後のコメントリストが正しく更新されること
エラーハンドリングが動作することTAKA:
「老師、動きました！削除してもエラーが出ませんし、リロードしなくてもコメントが消えます！」
AI老師:
「素晴らしいぞ、おぬし。この修正を通して、動的UIとサーバー間通信の基本を学べたはずじゃ。」
- 今回の学び データの形式と整合性を意識する
ObjectId のような特殊なデータ型は、JSONで扱える形式に変換する必要がある。 リロードなしのUI更新の重要性
動的UIを実現するには、フロントエンドとバックエンドの連携が不可欠。 エラー処理の実装
ユーザーが操作中にエラーが発生した場合でも、適切に通知する仕組みを設ける。
TAKA:
「老師、これでようやくコメント機能が完成形に近づきました！」
AI老師:
「うむ、だがこれで満足してはならぬぞ。次はさらなる機能拡張を目指すのじゃ！」