【React学習用(コピペ可)】fetch() 外部APIを取得する

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2021年12月)

「React fetch()を使って、外部APIから値を取得したい!」

「React fetch()ってどうやって使うの?」

というReactビギナーの方への記事となります

当記事を通じて、

  • 外部APIからデータを取得して表示する

方法を解説します

今回は、スターウォーズAPI(https://swapi.dev/)を使い、コードを書いてみました!

fetch()、componentDidMount()で、下記のように取得→表示を行なっていきます

icon
icon

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

コード

import React, {Component} from "react"

class App extends Component {
    constructor(){
        super()
        this.state = {
            loading:false,
            character: {},
        }
    }
    
    componentDidMount(){
        this.setState({
            loading: true
        })
        fetch("https://swapi.dev/api/people/1")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    character: data,
                    loading: false
                })
            })
        }

    render() {
        const displayText = this.state.loading ? "now loading...." : this.state.character.name
        return (
            <div>
                {displayText}
            </div>
        )
    }
}
export default App

解説

fetchメソッドは「ComponentDidMount関数」内で行います

fetch(APIのURI)

によりAPIを取得する

取得した値は、Promise型になりますので、

.then(response => response.json())

とし、json化

さらに、

.then(data => …)

とし、「…」で必要な処理を行っていきましょう!

componentDidMountを抜き出すと下記のとおりです

componentDidMount(){
        this.setState({
            loading: true
        })
        fetch("https://swapi.dev/api/people/1")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    character: data,
                    loading: false
                })
            })
        }

まとめ

fetch(APIのURI) .then

とすることでfetch()を使い、APIを受け取り使うことができます

今回のコードで使用した、スターウォーズAPI(https://swapi.dev/)は、非常に使い勝手が良いのと、他にもたくさんデータがありますのでぜひ使ってみて下さい!

タイトルとURLをコピーしました