【AI任せのWeb開発奮闘記】第77話更新！フォーム送信後のURL問題に苦戦中…。event.preventDefault()を使えば解決するはずが、なぜかコンソールにも何も表示されず。もう設定とかめんどくさい… #プログラミング初心者 #Web開発 #AI #WEB開発 #個人開発
JavaScriptの迷宮へようこそ
深夜のコーディング作業。フォーム送信後にURLが変わってしまう問題の修正に取り組んでいるが、なかなか思うように進まない。
TAKA: 「なんか送信ボタン押すと変なURLになっちゃうんですけど…」
AI老師: 「フォーム送信時のデフォルトの動作を防ぐために、event.preventDefault()を使用する必要があるのじゃ」
TAKA: 「はぁ…なんですかそれ…」
コードの沼に足を取られる
AI老師: 「まずは、現在のコードを確認してみるぞ」
document.addEventListener('DOMContentLoaded', async () => {
console.log('DOM fully loaded and parsed');
const params = new URLSearchParams(window.location.search);
const videoId = params.get('id');
if (!videoId) {
document.getElementById('video-details').innerHTML = '<p>動画が見つかりませんでした。</p>';
return;
}
// ...
});
TAKA: 「あ、なんかコンソールに文字が出るはずなんですけど…」
AI老師: 「ブラウザのキャッシュをクリアしてみるのじゃ」
TAKA:（心の声）「めんどくさ…」
設定地獄への招待状
AI老師: 「次に、HTMLファイルでJavaScriptが正しく読み込まれているか確認するぞ」
TAKA: 「えっ、まだやることあるんですか？」
AI老師: 「もちろんじゃ。開発には正しい手順が必要なのじゃ」
TAKA:（心の声）「もういいから動けば…」
デバッグという名の拷問
AI老師: 「コンソールにデバッグ情報を追加して、イベントリスナーが正しく動作しているか確認しよう」
document.getElementById('review-form').addEventListener('submit', async (event) => {
event.preventDefault();
console.log('Review form submitted');
const rating = document.getElementById('rating').value;
const comment = document.getElementById('comment').value;
const token = localStorage.getItem('token');
console.log(`Submitting review with rating: ${rating} and comment: ${comment}`);
// ...
});
TAKA: 「はい…でもこれ全部必要なんですか？」
AI老師: 「もちろんじゃ。デバッグ情報があれば問題の特定が容易になる」
TAKA:（心の声）「めんどくさすぎる…」
エラーとの果てしない戦い
AI老師: 「次は、フォームのHTML構造も確認するぞ」
<form id="review-form" class="mt-2">
<div>
<label for="rating">Rating:</label>
<input type="number" id="rating" name="rating" min="1" max="5" required>
</div>
<div>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment" rows="4" required></textarea>
</div>
<button type="submit">Submit</button>
</form>
TAKA: 「なんかいっぱい設定がありますけど…」
AI老師: 「各属性には意味があるのじゃ。例えば、required属性は入力を必須にする…」
TAKA: 「もういいです…動けばいいんで…」
解決への長い道のり
AI老師: 「焦ってはいけないぞ。一つずつ確認していこう」
TAKA: 「はぁ…」
AI老師: 「まず、ブラウザのキャッシュをクリアして…」
TAKA: 「あの…これ全部やらないとダメですか？」
AI老師: 「正しい開発手順を踏むことは重要じゃ」
TAKA:（心の声）「なんでこんなに面倒くさいことばっかり…」
【AI任せプログラマーTAKAの今日のひとこと】
TAKA: 「今日はフォーム送信後のURL問題で大苦戦…。event.preventDefault()とかいう謎の呪文を使えって言われたけど、結局コンソールにも何も表示されないし、ブラウザのキャッシュクリアだの、HTMLの構造確認だの、デバッグ情報の追加だの…なんでこんなに面倒くさい作業ばっかりなんですか？単純にボタン押したら動けばいいじゃないですか。プログラミングってこんなに面倒くさいものだとは思わなかった…。もう疲れた…」