TAKA: 「老師！基本機能はだいたい動いたぞ！そろそろレビュー機能を追加しようかと思うんだけど、どうかな？」
AI老師: 「待ちなさい、TAKAよ。欲を出しすぎると全体のバランスを崩しますぞ。基礎を固めるのが先です。」
TAKA: 「えー、もうちょっと進めてもいいんじゃない？だって、レビュー機能があるとカッコいいし、みんな使いやすいだろ？」
AI老師: 「確かにレビュー機能は魅力的じゃが、基礎がしっかりしておらねば、新しい機能を載せてもすぐに崩れてしまう。シンプルな機能から確実に仕上げていくのが鉄則じゃ。」
問題点を整理してみた
AI老師: 「さて、ここまでの進捗を整理してみるとしよう。TAKA、現状の課題をどう捉えているか、言ってみなさい。」
TAKA: 「うーん、まずジャンル別の動画表示機能があるけど、これがまだちゃんと見栄えよくない感じ。あと、カテゴリ一覧が空っぽだし、ソート機能もテストできてないかな。」
AI老師: 「その通りじゃ。さらに、投稿機能の動作確認がまだで、全体の流れを通してチェックしておらぬ。今焦ってレビュー機能を入れるより、これらの基本をきちんと仕上げるべきじゃな。」
今回取り組む基本機能
TAKA: 「じゃあ、具体的にどんな順番で進めればいい？」
AI老師: 「よい質問じゃ。まずは以下のステップで行くのじゃ。」
カテゴリ一覧を表示できるようにする
現在、カテゴリデータが空じゃ。この問題を解決するため、サーバー側でカテゴリデータを登録し、フロントエンドで表示させる。
ジャンルごとの動画表示を磨き上げる
ジャンルに属する動画を表示する仕組みはあるが、ソート機能が未完成じゃ。これを仕上げて、登録者数、視聴回数、いいね数、アップロード日で並べ替えられるようにする。
動画投稿機能の確認
Postmanを使ってサーバーに動画を投稿し、期待通りに登録されるかテストする。
全体のUIを整える
見た目の完成度を少し上げて、ユーザーが使いやすい状態にする。カテゴリ一覧の実装
TAKA: 「カテゴリデータって、どうやって作ればいいんだ？」
AI老師: 「例えばPostmanを使うと簡単じゃ。以下のようなリクエストを送るがよい。」
メソッドをPOSTに設定し、URLをhttp://localhost:3000/api/categoriesにする。
以下のようなJSONデータを送信する：{
“name”: “Technology”,
“videos”: []
}
TAKA: 「それでカテゴリが登録されるのか。フロントエンドではどう表示する？」
AI老師: 「genre.htmlというページを用意しておるな。そこで、以下のようなスクリプトを使ってカテゴリを表示できる。」
document.addEventListener(‘DOMContentLoaded’, async () => {
try {
const response = await fetch(‘/api/categories’);
const categories = await response.json();
const genreList = document.getElementById(‘genre-list’);
categories.forEach(category => {
const listItem = document.createElement('li');
listItem.innerHTML = `<a href="videos.html?category=${category._id}">${category.name}</a>`;
genreList.appendChild(listItem);
});
} catch (error) {
console.error('Error loading categories:', error);
}});
ジャンルごとの動画表示とソート機能
TAKA: 「ジャンル内のソートはどうやって動かすの？」
AI老師: 「APIのクエリパラメータを活用すれば簡単じゃ。例えば、以下のエンドポイントを使ってみるがよい。」
URL: http://localhost:3000/api/videos/filter?genre=education&sort=likesこのリクエストでは、教育ジャンルの動画がいいね数でソートされるはずじゃ。
TAKA: 「へえ、これでサーバー側のコードはどうなるの？」
AI老師: 「以下のようにすれば良い。」
app.get(‘/api/videos/filter’, async (req, res) => {
const genre = req.query.genre;
const sortBy = req.query.sort || ‘title’;
const videos = await Video.find({ genre }).sort({ [sortBy]: 1 });
res.send(videos);
});
TAKA: 「ソート条件も自由に切り替えられるんだな！これは便利だ！」
動画投稿機能の確認
AI老師: 「さて、次は動画の投稿じゃが、これもPostmanを使うのがよい。」
メソッドをPOSTにして、URLをhttp://localhost:3000/api/videosにする。
以下のJSONデータを送信する：{
“title”: “AIの未来”,
“genre”: “technology”,
“description”: “AIに関するドキュメンタリー”,
“url”: “http://example.com/ai-video”,
“rating”: 5
}
TAKA: 「これで動画が追加されて、リストに表示されるわけか！」
AI老師: 「その通りじゃ。まずはシンプルに動作を確認し、問題がないかチェックするのじゃ。」
最後に
TAKA: 「老師、なんだかんだで基本が整ってきた気がする！」
AI老師: 「良い流れじゃ。急がば回れ。まずは動くものを確実に作り、そこから拡張していくのがWeb開発の基本じゃ。」
今回の進捗を通じて、基礎を固めることの重要性を再認識しました。次回は、カテゴリ機能の充実と動画投稿後の表示確認を進めていきます！
次回予告
カテゴリデータの整備と確認
動画投稿後の自動反映
見た目の改善とユーザー体験の向上小さく進めて、大きく飛躍する準備を整えましょう！