2021-02-142022-11-03IT

【React】fetchメソッドでREST APIを叩く方法

当ページのリンクには広告が含まれています。

Reactでfetchメソッドを用いて外部のREST APIを叩き、取得した情報をブラウザ上に出力する方法をまとめました。

実行環境

使用端末: M1 MacbookPro
以下の通りM1 MacでHomebrewをインストール済であることを前提としています。

・ M1 Macbookpro
・ Homebrewはインストール済

利用するAPIは「Json Placeholder」を使用します。
JSONPlaceholder - Free Fake REST API

ReactでAPIにアクセスする方法は2つある

ReactでAPIにアクセスする方法は以下の2通りがあります。

・axiosという3rd Partyのアプリを使用する方法

・JavaScriptのfetchメソッドを使う方法

本記事では、fetchメソッドを方法をまとめます。

axiosを使う方法は以下の記事を参照ください。

Reactの開発環境作成

まずは、Reactの開発環境を作成していきましょう。

Node.jsのインストール含め、Reactの開発環境整備については以下の記事に詳細をまとたのでこちらを参照ください。以下の記事でまとめた開発環境構築が完了している前提で以降まとめていきます。

まずは以下のコマンドでReactでAPIにアクセスするアプリの雛形を作成します。

terminal

1	npx create-react-app react-fetch

作成したreact-fetchフォルダに移動して、npm startコマンドで、Reactを起動させてみましょう。

npm startコマンドで表示されるReactの画面

コンポーネントの作成

まずはsrcフォルダ配下にcomponentsという名前のフォルダを作成します。

terminal

1	mkdir src/components

componentsフォルダ配下にApiFetch.jsというファイルを作成し、以下のようなコードを記載します。

src/components/ApiFetch.js

import React from 'react'

const ApiFetch = () => {
    return (
        <div>
            
        </div>
    )
}

export default ApiFetch

ちなみにこちらのコードはVisal Studio Codeの拡張機能であるes7 reactをインストールしておくと、rafceと入力するだけでコードを生成してくれます。

es7 react

アクセスするAPIの確認

今回はJSON Placeholderの/postsを呼び出します。

https://jsonplaceholder.typicode.com/posts

このAPIには、1〜100までのidが割り当てられた投稿が含まれています。

このAPIを叩くことでJSONオブジェクトが取得できます。

ApiFetch.jsファイルを編集

以下のようなコードになります。

import React, {useState, useEffect} from 'react'

const ApiFetch = () => {

    const [posts, setPosts] = useState([])

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts', {method: 'GET'})
        .then(res => res.json())
        .then(data => {
            setPosts(data)
        })
    },[])

    return (
        <div>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
            
        </div>
    )
}

export default ApiFetch

コードの解説をします。

まず、ApiFetch.jsファイルでuseStateとuseEffectをimportします。

今回は、JSON Placeholderの/postsのデータを格納するpostsというStateを定義し、postsを更新するsetPostsというメソッドを定義します。初期値は空のリストにしておきます。

useEffectでブラウザ起動時にAPIが1度だけ叩くようにしたいので、13行目のように第荷引数に空のリストを記述します。

fetch('')の文字列の部分に、叩きたいREST APIのURLを記述します。

fetchメソッドを使う場合、メソッドの指定は{}を使います。

今回はGETメソッドなので{method: 'GET'}としておきます。

.thenでレスポンスを取得します。

fetchメソッドの場合は、HTML形式でレスポンスが返ってきます。

そのため、HTML形式をJSON形式に変換する必要があります。

JSON形式に変換するためにはjsonというメソッドを使えばOKです。

JSONに変換したレスポンスはdataという変数に代入し、それを引数にsetPostを用いてpostsというステートに結果を代入しています。

App.jsファイルの編集

先程作成したApiFetchコンポーネントをApp.jsファイルに登録します。

ApiFetchをimportし、10行目に<ApiFetch />を追記しています。

import logo from './logo.svg';
import './App.css';
import ApiFetch from './components/ApiFetch';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <ApiFetch />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Reactを起動して確認

npm startコマンドを実行してReactを起動しましょう。

以下の通り、APIを叩いてレスポンスをブラウザ上に表示できたことが確認できるはずです。

Reactを起動するとAPIを叩いてブラウザ上に表示できていることが確認できる

以上がfetchメソッドを用いたAPIアクセス方法になります。

この記事が役に立った！という方はTwitterのフォローや記事の共有など、よろしくおねがいします。

Reactのプロとして稼げるようになりたい方

RaiseTechのReactコースがおすすめです。なぜならRaiseTechは卒業後も最新のReact技術が学び放題だから。しかも、メンターへの質問も無期限で無制限にできます。アフターサポートが最高レベルなので、自分のペースで確実に現場で活躍できるプロになれます。

RaiseTechのReactsコース

#React