Kaito Shibao

この作品は、「TVmaze API」を用いてテレビ番組を検索できるWebアプリケーションです。ユーザーが番組名を入力すると、そのキーワードに該当する番組の画像とリンク付きの検索結果が表示され、画像をクリックすることで番組の詳細ページに遷移できます。 開発にはHTMLとJavaScriptを使用し、API通信にはAxiosを採用しました。fetchと比較してレスポンス処理が簡潔で、エラーハンドリングも行いやすいため、今後より複雑なAPI実装を行う際にもスケーラブルな選択だと考えました。 主な工夫点としては、検索結果の画像を<a>タグでラップし、新しいタブで詳細ページを開くように設計することで、ユーザーが検索結果一覧に戻りやすくなるよう配慮しています。また、検索キーワードに対して非同期で即時に結果を取得・表示することで、簡易ながらスムーズなUXを実現しました。 デザインはまだ最低限の実装に留めていますが、今後はCSSやレスポンシブ対応を導入し、モバイル端末への最適化やアクセシビリティの強化を図る予定です。また、検索履歴機能やお気に入り登録機能を追加することで、より実用的なアプリケーションへ発展させたいと考えています。 このプロジェクトを通じて、Web APIの基本的な使い方、非同期処理、DOM操作の基礎を実践的に学びました。今後はVueやReactなどのフレームワークを使って、より高度なUIの実装や状態管理の経験を積んでいきたいと考えています。