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

computerReact

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

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

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

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

当記事を通じて、

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

方法を解説します

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

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

icon
icon

筆者プロフィール

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

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

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

【元】外資系金融機関の営業

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

ChatGPTでLINEボット

【今なら無料】ChatGPTでLINEボットを作りました!

友だち追加

コード

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/)は、非常に使い勝手が良いのと、他にもたくさんデータがありますのでぜひ使ってみて下さい!

✔当ブログは以下のような方に向けて書かれています

「Djangoでのアプリ開発を学びたい!」

「Djangoで開発したアプリをWebで公開するにはどうするの?」

✔当ブログ掲載の記事

  • Djangoで作る日報アプリ開発
  • WebアプリをWeb上に公開する方法
  • Webアプリ開発に必要なそのほかの情報
【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

ITCブログにご協力いただける方は、以下もご検討いただけると嬉しいです。

ITCへ投げ銭をする

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