詳細ページの実装で大苦戦
今回は、動画の詳細ページを実装することになった。しかし、URLパラメータの扱いという基本的な部分で大きく躓いてしまう…
TAKA: 「よっしゃ！詳細ページの実装、簡単そうだな！」
AI老師: 「まずは基本的なHTMLの構造から確認していこう」
TAKA: 「えっと…コピペでOKですよね？」
エラーとの初遭遇
TAKA: 「あれ？なんか『動画が見つかりませんでした』って出るんですけど…」
AI老師: 「URLパラメータにvideoIdが含まれていないようじゃな。URLの形式は正しいかな？」
TAKA: 「URLパラメータって何ですか？めんどくさそう…」
AI老師: 「URLの末尾に?id=などの形で付加される情報のことじゃ。例えば…」
TAKA: 「ちょっと待ってください！そんな難しい説明されても分かりません！」
原因究明への道のり
TAKA: 「とりあえずコンソールを見てみましょうか…」
// コンソール出力
const params = new URLSearchParams(window.location.search);
const videoId = params.get('id'); // undefined
AI老師: 「ここで大切なのは、URLパラメータの仕組みを理解することじゃ。まず…」
TAKA: 「もういいです！とにかく動くようにしてください！」
解決への一歩
AI老師: 「では、正しいURLの形式を教えよう。http://localhost:3000/video-details?id=videoIdという形式で…」
TAKA: 「はいはい。で、どこを書き換えればいいんですか？」
AI老師: 「まずは理解することが大切じゃ。なぜこの形式が必要なのか…」
TAKA: 「いや、もう理解とかいいんで、とにかく動けば…」
思わぬ発見
TAKA: 「あ！これですか？」
<http://localhost:3000/video-details?id=*********>
AI老師: 「そうじゃ！その形式が正しい。これでMongoDBから該当する動画のデータを…」
TAKA: 「おお！表示された！やっぱり私って天才？」
AI老師: 「いや、それは違うぞ。重要なのは仕組みを理解することで…」
TAKA: 「まあまあ、動いたんだからいいじゃないですか！」
未解決の謎
AI老師: 「しかし、なぜURLパラメータが必要なのか、どのようにしてMongoDBと連携しているのか、その仕組みを理解することも大切じゃ」
TAKA: 「えー、そんなの知らなくても動けばいいじゃないですか。次は何やります？」
AI老師: 「はぁ…。技術の根本を理解せずに進むのは危険じゃぞ」
TAKA:（心の声）「めんどくさいなぁ…とにかく動いたからいいじゃん」
【AI任せプログラマーTAKAの今日のひとこと】
TAKA:（心の声）「今日も理解せずに問題解決！AI老師が何か言ってたけど、どうせ理解なんて必要ないでしょ。動いたらそれでOK！…でも、なんでこれが動いてるんだろう…まあいいか！」
結局、TAKAは動画詳細ページの実装に成功したものの、その仕組みについては全く理解しようとしなかった。このままでは、似たような問題が発生した時に自力で解決することはできないだろう…