kaibukuroのブログ

HTML/CSS/JavaScript/PHPなどのアウトプット

【JS】映画情報を非同期処理で取得するWebアプリを実装

JavaScript

成果物

サイト:
https://kaiyoshida57.github.io/js_app_ajax/
Github:
https://github.com/kaiyoshida57/js_app_ajax

きっかけ

JavaScriptにおける新しいの非同期処理の学習をしようと思いました。
そこで、TMDB（https://www.themoviedb.org/）という映画情報サイトで無料で公開されているAPIを利用し（要登録）、「上映中」・「人気」・「高評価」などの条件で映画リストを非同期で表示させる事を目標にしました。

手順

※申請してすぐに発行されるので、待ったりする必要はありませんでした。


1
TMDBのサイトには、親切にもガイダンスがあるので、それを見ながら取得したいAPIのURLを参照します。

使い方やAPI:
https://developers.themoviedb.org/3/getting-started/introduction

例えば、「上映中の映画」を取得したいなら、このページにて、
https://developers.themoviedb.org/3/movies/get-now-playing
このようなURLの使用を示してくれます。

https://api.themoviedb.org/3/movie/now_playing?api_key=<<api_key>>&language=en-US&page=1

2
そのURLを、fetchメソッドを使い、responseオブジェクトをjson形式で受け取ります。

const url = `https://api.themoviedb.org/3/movie/${dir}?api_key=xxx&language=ja&page=1`;

const json = await fetch(url)
 	.then((response) => {
		console.log('これは非同期処理成功!');
		return response.json();
	}).catch(error => {
		console.error('これは非同期処理失敗!', error);
		return null;
	});


3
jsonの中のresultsキーの中に、配列として格納されているので、それを一つ一つ処理するようにします。

json.results.map((movie) => {


4
そこからは、「上映中」ボタンのdata属性の中に入れた値（上映中ならnow_playing）に応じてURLを取得し、サムネイル画像やタイトルを入れたHTMLタグを返すように、DOM操作の処理を記述していきます。

let listContent = `
	<li class="card isFade">
		<a href="https://www.themoviedb.org/movie/${movie.id}" target="_blank" rel="noopener">
			<p class="mvTitle">${movie.title}</p>
			<img src="${mvImgSrc}" class="mvImg">
		</a>
	</li>
`;


詳しくは、GithubのJSにコメント付きで記述してあるので、ご参照ください。

終わりに

JavaScriptにおける非同期処理（APIに絡めた処理）は、使いたいデータを含むURLがありさえすれば、それをfetchで取得し、async/awaitを使うことにより簡単に使用することが出来ました。

参考にさせていただいたサイト

非同期処理
qiita.com
TMDBでのAPI処理
chocolat5.com
JavaScriptでTMDB APIを使ったMovieアプリを作ろう! | セルフノート