
## API とは

外部サイトのデータを二次利用することができる「API（Application Programming Interface）」。

データの二次利用の例では、インスタグラムの投稿を自分のサイトに表示させるための「Instagram API」、Twitterが提供しているAPIを利用した「Togetterまとめ」などがあります。

## TMDbとは

[TMDb](https://www.themoviedb.org/) は映画やTV作品のデータベースを提供するWeb APIです。作品のタイトルやポスター画像、出演者、スタッフ以外に、ユーザーによる評価やレビューなどもサイト上で公開しており、それらの情報もAPIとして利用することが可能です。また、一部日本語でも提供されています。利用するにはアカウントの作成が必要ですが無料です。

## アカウントの作成

TMDbのAPIを利用するにはTMDbのアカウントが必要です。 [アカウント作成ページ](https://www.themoviedb.org/signup) で登録を行います。

![](./tmdb-api_01.png)

アカウント作成後、右上のプロフィールアイコンから `Profile and Settings > Settings` を開きます。

![](./tmdb-api_02.png)

Settings ページに移動したら、サイドメニューにある「 [API](https://www.themoviedb.org/settings/api) 」をクリックして、一番下の「Request an API Key」からAPIの利用申請を行います。

![](./tmdb-api_03.png)

承認後、API Key, API Read Access Token が付与され、利用申請を行なった [API](https://www.themoviedb.org/settings/api) ページで確認できるようになります。

## API からデータを取得する方法

JavaScriptでAPIを取得するには、Fetch APIの `fetch()` メソッドを使用します。  
[各ブラウザの対応状況はこちら](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7) でご確認ください。

`fetch()` の基本的な書き方です。

```jsx
fetch("http://sample.com/sample.json")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    // 取得したJSONデータの処理
    console.log(data);
  })
  .catch((error) => {
    // エラー発生時の処理
    console.log("error");
  });
```

## JavaScriptで表示するページを作成

サンプルとして [現在上映中の映画](https://developers.themoviedb.org/3/movies/get-now-playing) のリストを表示します。  
[Source & Demo（CodeSandbox）](https://codesandbox.io/s/tmdb-api-sample-6gnt0u)

index.htmlに情報を表示するための `div` を記述します。

```html
<div id="app"></div>
```

TMDbのAPIとAPI Keyを組み合わせたURLを、先ほどの基本的な書き方にあてはめてみて、情報が取得できるかどうかコンソールに出力してみます。件数が多いため1ページ分のみ取得します。
日本語で情報を取得したい場合は `language=en-US` の部分を `language=ja` にします。
取得する地域（Regions）を日本にする場合は `region=JP` にします。

```jsx
fetch(
  "https://api.themoviedb.org/3/movie/now_playing?api_key=<ここにAPI Key入れる>&language=en-US&region=US&page=1"
)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    // 取得したJSONデータの処理
    console.log(data);
  })
  .catch((error) => {
    // エラー発生時の処理
    console.log("error");
  });
```

問題なければコンソールにデータが表示されます。

![](./tmdb-api_04.png)

データが取得できたら、 `map()` メソッドで表示したい情報をさらに細かく取得していきます。ここではタイトルとポスター画像を表示します。作品群は `results` キーの値として定義されていますので、`data.results` に対して `map()` を実行します。

例では後ほど作成する `createItem()` にタイトルとポスターの path を渡しています。

```jsx
data.results.map((movie) => {
  createItem(movie.title, movie.poster_path);
});
```

データ表示用のコード。

```jsx
/** データを表示するdivを取得 */
const container = document.getElementById("app");

/** map()内で実行する、アイテム作成用のfunction */
const createItem = (titleName, imgPath) => {
  const row = document.createElement("div");
  row.setAttribute("class", "item");

  const title = document.createElement("p");
  title.setAttribute("class", "title");
  title.textContent = titleName;

  const poster = document.createElement("img");
  poster.src = `https://image.tmdb.org/t/p/w300_and_h450_bestv2/${imgPath}`;

  container.appendChild(row);
  row.appendChild(poster);
  row.appendChild(title);
};
```

画像とタイトルが表示されていれば完成です。

![](./tmdb-api_05.png)

[Source & Demo（CodeSandbox）](https://codesandbox.io/s/tmdb-api-sample-6gnt0u)

## 最後に

[TMDbのAPIドキュメントページ](https://developers.themoviedb.org/3/getting-started/introduction)では、取得したい情報ごとにコードジェネレーターが用意されています。左のサイドバーから利用したい情報を選び、「Try it out」のタブをクリックしてAPI Keyなど必要項目を入力すると「Response」のエリアに取得できるJSONが表示されます。 `language=ja` とすると日本語になります（日本語訳が登録されている場合のみ）。さらに下の「Code Generation」では各言語ごとのコードのサンプルも表示されます。

## 参照

- [Tania Rascia「How to Use the JavaScript Fetch API to Get JSON Data」](https://www.taniarascia.com/how-to-use-the-javascript-fetch-api-to-get-json-data/)（参照2019-08-23
- [Tania Rascia「How to Connect to an API with JavaScript」](https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/)（参照2019-08-23）
- [クロジ「映画ブログ作りました」, <[https://nanokamo.com/kinematos>](https://nanokamo.com/kinematos)（参照2017-09-30）](<https://nanokamo.com/kinematos>%5D(https://nanokamo.com/kinematos)%EF%BC%88%E5%8F%82%E7%85%A72017-09-30%EF%BC%89>)


TMDb API を利用して映画のポスターやあらすじを自分のサイトに表示する

Tags