【React学習用】fetch で外部APIを取得する

（最終更新月：2021年12月）

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

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

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

当記事を通じて、

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

方法を解説します

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

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

筆者プロフィール

【現職】プロマネ/システムプランニング

【副業】ブログ（月間7万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
                })
            })
        }