無料で映画情報を取得するAPI「TMDb」の使い方(実践編)

前回の記事でTMDbのWEBAPIの利用方法について書きましたので、今回は実際にAPIにアクセスして自身のWEBアプリに表示させてみる部分をやっていきます。

前提。今回はdockerで構築したreactアプリ（create react app） を利用した例でやっていきます。

まずは公式に掲載されている一例のAPIを叩いてみる

componentDidMountでAPIを叩く関数を追加する。
axiosによる非同期通信を実行する（axiosのパッケージをnpmで追加しておくこと）

  componentDidMount() {
    this.getMovieList()
  }

  getMovieList(){
    axios.get('https://api.themoviedb.org/3/movie/550?api_key=xxxxxxxxxxxxxxxxxxxxx&language=ja')
    .then(response => {
      console.log(response.data)
    }).catch(err => {
      console.log('err:', err);
    });
  }

実行結果
無事にJSON形式のデータを取得することができました。

※クロスドメイン通信を許可するために、以下の記述が必要になります

axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

あとはレスポンスをstateに入れてrender内でいい感じに成形して表示してあげればよさそう。

実際の運用に役立てるためには様々なパターンでのリクエストの方法をドキュメントを読んで身に着けていくしかないですね。

次回はTMDbでのAPIリクエストの方法を一覧で書いていきたいと思います。