JavaScriptでTMDB APIを使ったMovieアプリを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、TMDBAPIを使って開発をします。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

TMDBのAPIのドキュメントを確認しながら、開発を進めていきましょう。

リクエスト先を定数で定義

最初にリクエスト先を定数で定義します。

今回使うのは、「Discover」、「Images」、「Search」の3つです。

API Discover: 特定の条件(カテゴリや人気)で絞り込んだ情報を取得
Images: 取得データに含まれるファイル格納場所などの情報を提供
Search: 映画を検索する

要素を取得

次に、HTMLのform要素を取得します。

async/awaitで非同期通信

次は、非同期関数のasync/awaitを使って、Movie情報を取得しましょう。

Chromeのデベロッパーツールを開くとMovie情報が取得できていることが確認できます。

formにSubmitイベントを登録

次に、formから検索を行えるようにしましょう。

これで、検索が行えるようになりました。

検索窓に「Test」と打ち込んで、取得したデータを確認してみましょう。

MovieパネルをHTMLに埋め込む

次に、APIから取得したデータをMovieパネルにして、HTMLに埋め込みます。

getClassByRate関数を作成していないため、まだ画面には表示されませんが、これでOKです。

getClassByRateの作成

getClassByRateは、映画の評価を示す数値の色分けをおこないます。

8.3が評価を示す数値

これで完成です。

おわりに

以前にもAPIを使ったアプリケーションを学習しましたが、やはり面白いですね。今回作成したものをフォーマット化すれば、TMDB API以外で提供されているAPIでも同じことができるはずです。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

オススメ書籍


コメントを残す