『深夜のフィルタリング機能改修』
残業を終えて帰宅したTAKAは、いつものように自宅のデスクトップPCの前に座っていた。今夜はフィルタリング機能の改修に取り組むことになっている。
TAKA: 「えーと、フィルタリングが動かないって…どうしよう」
TAKA:（心の声）「めんどくさいなぁ…AI老師さん、助けて！」
AI老師: 「また安易な依存かね。フィルタリング機能は重要な機能だ。自分で考えてみたらどうかな？」
TAKA: 「でも、JavaScriptのイベントリスナーとか難しくて…」
『AI老師、今日は厳しめの指導』
AI老師: 「君はいつも理解を避けようとする。今日は少し厳しく指導させてもらおう」
TAKA: 「え？いつもみたいにコードを教えてくれればいいじゃないですか…」
AI老師: 「いいや、それではダメだ。まず、なぜフィルタリング機能が必要なのか、考えてみたまえ」
TAKA: 「え？それは…ユーザーが見たい動画を探しやすくするため…ですか？」
AI老師: 「その通り。では、どんな条件でフィルタリングすると便利だと思う？」
『予想外の気づき』
TAKA: 「うーん…そういえば、昨日Amazonで商品を探すとき、評価と価格でフィルターかけましたよ」
AI老師: 「おや？良い気づきだね。では、動画の場合は何でフィルタリングすると便利かな？」
TAKA: 「評価とか…再生回数とか？あと、新しい順とか古い順とか？」
AI老師: 「その通り！身近な例から機能を考えることができたね」
『深夜のコーディング』
TAKA: 「じゃあ、コードをコピペして…」
AI老師: 「待ちなさい！今回は一緒に考えながら実装していこう。まず、HTMLのセレクトボックスから考えてみよう」
TAKA: 「えー…でも」
AI老師: 「さっきのAmazonを思い出してごらん。フィルターはどんな見た目だった？」
TAKA: 「あ！確かにプルダウンメニューでしたね。selectタグを使えばいいんだ！」
『イベントリスナーの謎』
TAKA: 「でも、JavaScriptのイベントリスナーって何をすればいいんですか？」
AI老師: 「そうだな…例えば、Amazonでフィルターを変更したとき、何が起こる？」
TAKA: 「商品の一覧が…あ！表示が変わりますね！」
AI老師: 「その通り！つまり、セレクトボックスの値が変更されたときに、表示を更新する処理が必要というわけだ」
『深夜の発見』
TAKA: 「なるほど！じゃあ、addEventListener(‘change’, …)みたいな感じですかね？」
AI老師: 「おや？随分詳しいじゃないか」
TAKA: 「いや、これは…前にコピペしたコードに書いてあって…」
AI老師: 「はは、でも今回は理解して使おうとしているね。その調子だ」
『予想外の展開』
TAKA: 「よし、イベントリスナーを追加して…あれ？」
AI老師: 「どうしたんだい？」
TAKA: 「なんか、フィルターを選んでも表示が変わらないです…」
AI老師: 「そうだね。では、デベロッパーツールを開いてエラーを確認してみよう」
TAKA: 「え？デベロッパーツール？」
AI老師: 「ブラウザのF12キーを押してごらん。エラーメッセージが表示されているはずだ」
『深夜のデバッグ』
TAKA: 「あ！本当だ。”Cannot read properties of null”…って出てます」
AI老師: 「よし、これは要素が見つからないというエラーだ。HTMLの要素とJavaScriptの参照が合っているか確認してみよう」
TAKA: 「あ！idの名前が違ってました！」
AI老師: 「その通り！デバッグの基本を学んだね」
『深夜の成長』
AI老師: 「今日は随分と成長したね。コピペではなく、理解しながら実装することができた」
TAKA: 「はい…なんか、身近なものと比べて考えると、少し分かった気がします」
AI老師: 「そう、プログラミングは特別なものではない。日常生活の中にヒントがたくさんあるんだよ」
【AI任せプログラマーTAKAの今日のひとこと】
「今日は珍しく自分で考えて実装できた…かも。Amazonのフィルター機能を参考にしたら、なんとなく理解できた。デバッグも怖くなくなってきた？でも明日からはやっぱりAI老師さん頼みかな…いや、でも、ちょっとだけ自分でも考えてみようかな…」なんで心にもないことをつぶやいてみた丑三つ時。