AI任せのWeb開発奮闘記【第80話】

コードの分割で大混乱

今回は、videoDetails.jsのコードを整理して機能ごとに分割することになった。しかし、その過程で予期せぬエラーの嵐に見舞われることに…

TAKA: 「よし！コードの整理をするぞ！簡単そうだな！」

AI老師: 「まずは機能ごとに関数を分割していきましょう。getVideoId関数から始めて…」

TAKA: 「え？なんで分ける必要があるんですか？動いてるじゃないですか」

関数分割との格闘

AI老師: 「では、このように分割していきましょう」

function getVideoId() {
    const params = new URLSearchParams(window.location.search);
    return params.get('id');
}

function showError(message) {
    document.getElementById('video-details').innerHTML = `<p>${message}</p>`;
}

TAKA: 「うわ、めんどくさ…今のままでいいじゃないですか」

AI老師: 「コードの保守性と可読性を考えると…」

TAKA: 「そんなの知りません！とにかく動けばいいんです！」

エラー続出の悪夢

TAKA: 「あれ？エラーが出ました」

Uncaught ReferenceError: renderVideoDetails is not defined

AI老師: 「関数の定義順序を確認する必要がありますね。まず…」

TAKA: 「もういいです！元に戻しましょう！」

トースト通知の実装失敗

AI老師: 「エラーメッセージの表示方法も改善しましょう。showToast関数を実装して…」

TAKA: 「トースト？パンのことですか？」

AI老師: 「いいえ、画面に表示される通知のことです。このように実装します」

function showToast(message, type) {
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

TAKA: 「なんですかこれ…alertでいいじゃないですか」

コードの整理を断念

AI老師: 「ではここまでの変更を一度確認しましょう」

TAKA: 「もういいです！疲れました！」

AI老師: 「しかし、コードの整理は重要な…」

TAKA: 「動いてるものをわざわざ変える必要なんてないじゃないですか！」

【AI任せプログラマーTAKAの今日のひとこと】

TAKA:（心の声）「なにゆえ動いてるコードを分割しなきゃいけないの？？トーストって？結局何も完成しないし、むしろエラーばっかり出るようになったし…」