AI任せのWeb開発奮闘記【第108話】ソート機能の復活とキャッシュ戦略で進化するMyTubeNavi！

TAKA: 「AI老師！また問題が発生したんだ。昨日キャッシュ機能を追加したら、ソート機能が動かなくなったよ！」

AI老師: 「ほほう、キャッシュ機能とソート機能が喧嘩を始めたか。しかし焦るでない、全てを共存させる策を講じようぞ。」
ソート機能とキャッシュ機能の問題点

TAKAは、app.py にキャッシュ制御コードを追加しましたが、これが原因でソート機能が正しく動作しなくなりました。その理由をAI老師が解説します。

AI老師: 「キャッシュはデータの読み込みを効率化するが、動的に変更されるべきデータにも適用されてしまうと問題が起きるのじゃ。つまり、ソート結果がキャッシュされた状態で固定されてしまった可能性があるのじゃ。」

TAKA: 「ああ、なるほど！だからソートが効かなくなったのか。」

AI老師: 「その通り。これを解決するには、キャッシュの対象を静的リソースや固定データに限定し、ソート結果には適用しないようにする必要があるのじゃ。」
解決策：キャッシュとソートの調和

キャッシュ設定の修正

キャッシュの対象を制限し、ソート機能に影響を与えないようにします。

修正前のキャッシュコード:

@app.after_request
def add_header(response):
response.cache_control.max_age = 300
return response

修正後のキャッシュコード:

@app.after_request
def add_header(response):
# 静的リソースにのみキャッシュを適用
if request.path.startswith(‘/static/’):
response.cache_control.max_age = 300
else:
response.cache_control.no_cache = True
return response

AI老師: 「これで動的なリクエストにはキャッシュが適用されなくなり、ソート機能が正常に動作するはずじゃ。」

ソート機能の強化

さらに、sort_videos 関数を確認し、どのような条件でも正しく動作するように改善します。

def sort_videos(videos, sort):
if sort == ‘date’:
videos.sort(key=lambda x: x.get(‘date’, ”), reverse=True)
elif sort == ‘views’:
videos.sort(key=lambda x: x.get(‘views’, 0), reverse=True)
return videos

AI老師: 「これにより、date や views の値が欠けているデータがあってもエラーを防げるようになるぞ。」

フロントエンドの修正

フロントエンドでのソートリクエストも確認します。JavaScriptを活用し、ソート時に常に新しいデータをサーバーから取得するように設定します。

function applyFilters() {
const sort = document.getElementById(‘sort’).value;
const urlParams = new URLSearchParams(window.location.search);
urlParams.set(‘sort’, sort);
window.location.search = urlParams.toString();
}

TAKA: 「これでユーザーがソートを切り替えるたびに新しいリクエストが送信されるんだね。」
動作確認

TAKA: 「じゃあこれで確認してみるよ！」

TAKAは、修正したコードをローカルで実行して以下を確認しました。

ソート機能の復活
    日付順、視聴回数順の切り替えが正しく動作。
キャッシュの適用
    静的リソースにのみキャッシュが適用され、動的なデータは最新の情報を取得。

学びと次へのステップ

TAKA: 「やった！問題が解決したよ。今回はキャッシュと動的データの調和について深く学べた気がする。」

AI老師: 「素晴らしい！この学びを活かして次は何を目指すか考えるのじゃ。」

TAKA: 「そうだね…次はユーザー体験をさらに向上させるため、検索結果にページネーションを追加しようかな！」

AI老師: 「良い目標じゃ。では、ページネーションの仕組みについて次回共に学ぶとしよう。」
次回予告

検索結果のページネーションに挑戦！MyTubeNaviはますます進化する。次回もお楽しみに！

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル