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

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

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

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

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

当記事を通じて、

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

方法を解説します

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

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

筆者プロフィール

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

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

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

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

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

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

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

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/04/25 14:20:55時点 Amazon調べ-詳細)

コード

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
                })
            })
        }