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

computerReact

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

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

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

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

当記事を通じて、

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

方法を解説します

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

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

初期費用ゼロ/月9,800円でWebデザインが学べる

デザインを習得するためには、客観的なフィードバックと改善が不可欠です。

以下の記事ではこんなWebデザインスクールをご紹介しています。

  • 初期費用ゼロで、月々9,800円のみ
  • オンラインで、教材が使い放題
  • コンテストや実務案件にチャレンジして報酬もGETできる

デザナルはトップデザイナーからレビューがもらえる、格安の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/)は、非常に使い勝手が良いのと、他にもたくさんデータがありますのでぜひ使ってみて下さい!

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

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

という方は必見です!

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