ワイヤーフレームから実装への挑戦
今回は、kakaku.comを参考にしたワイヤーフレームを基に、実際のコードへと落とし込んでいく作業に取り組むことになった。しかし、その道のりは想像以上に険しいものとなった…
TAKA: 「よっしゃ！ワイヤーフレームができたぞ。あとは実装するだけだな！」
AI老師: 「まずは必要なファイルとコンポーネントの構成を整理するのじゃ」
TAKA: 「えっと…HTMLとCSSとJavaScriptが必要ってことですよね？AI老師さん、コード作ってください！」
AI老師: 「君自身で考えることも大切じゃぞ。まずはHTMLの基本構造から始めてみてはどうかね？」
TAKA: 「面倒くさいなぁ…じゃあ、とりあえずコピペで」
コードの実装に四苦八苦
TAKA: 「あれ？なんかバグってます！」
document.addEventListener('DOMContentLoaded', async () => {
const params = new URLSearchParams(window.location.search);
const videoId = params.get('id');
if (!videoId) {
document.getElementById('video-details').innerHTML = '<p>動画が見つかりませんでした。</p>';
return;
}
AI老師: 「JavaScriptのテンプレートリテラルの記法が間違っているようじゃな。バッククォートを使用する必要があるぞ」
TAKA: 「バッククォート？普通のクォートじゃダメなんですか？」
AI老師: 「テンプレートリテラルを使用する場合は、バッククォート（`）を使用する必要があるのじゃ。これにより、変数を文字列内に埋め込むことができるのじゃ」
エラーの嵐との戦い
TAKA: 「次は『Cannot read properties of null』って出てきました…」
AI老師: 「要素が見つからないというエラーじゃな。HTMLファイルに対応するIDの要素が存在するか確認してみるのじゃ」
TAKA: 「めんどくさいなぁ…全部AI老師さんにやってもらえませんか？」
AI老師: 「自分で考え、理解することも大切じゃ。ここは一緒に確認していこう」
コードの整理と修正
TAKA: 「あ！video-details.htmlにscriptタグ忘れてました！」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Details</title>
<link href="<https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css>" rel="stylesheet">
<script defer src="/js/videoDetails.js"></script>
</head>
<body>
<!-- 内容省略 -->
</body>
</html>
AI老師: 「そうじゃ。JavaScriptファイルを読み込むscriptタグは重要な要素じゃ。これがないと、動的な処理が実行できないのじゃ」
TAKA: 「へー、そうなんですね。（理解せずに頷く）」
最後の仕上げ
TAKA: 「よっしゃ！これで動くはず！」
画面をリロードすると、今度は正しく表示された。
AI老師: 「良かったじゃな。しかし、なぜ動いたのか、その理由を理解することも大切じゃぞ」
TAKA: 「えーと…scriptタグを追加したからですかね？（適当に答える）」
AI老師: 「それも一因じゃが、全体の構造やデータの流れを理解することが重要なのじゃ。次回は自分で考えて実装してみてはどうかね？」
TAKA:（心の声）「めんどくさそー…次も絶対AI老師さんに頼っちゃおう」
【AI任せプログラマーTAKAの今日のひとこと】
TAKA:（心の声）「今日もAI老師さんのおかげでなんとか実装できた。コードの意味？そんなの知らなくても動けばいいでしょ！やっぱり全部AI任せが一番楽チン！」
結局、TAKAは何も学ばず、ただコードをコピペするだけで終わってしまった。果たして、このままでよいのだろうか…