React Hooks + TypeScriptによるAPIデータ取得(axios + fetch)

はじめに

React Hooks + TypeScriptによるAPIデータ取得(axios + fetch)のアウトプットになります。
ReactでのAPIにアクセスする方法の学習です。
バックエンドのAPIにアクセスしDBのCRUD処理などをする為に必要。
接続にaxios(サードパーティー)やfetch(JavaScript)を使用して、jsonオブジェクトをfetchしてブラウザに表示してみます。
前回はReact Hooks + TypeScriptによるUseEffect(Cleanup)の使い方を学習し、その続きになります。

学習に使用した教材・参考資料

[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発

JSONPlaceholder

ゴール

以下のように、jsonplaceholderより取得したjsonオブジェクトをブラウザに表示できればゴールです。
axiosとfetchどちらを使用しても表示は同じです。

学習手順

1. TimerContainerをコメントアウト
2. ApiFetch.tsx をcomponetsフォルダに作る
3. json placeholderにアクセスしてResourcesの/posts から100個のjsonオブジェクトを確認
4. useStateとuseEffectをインポートする　
5. axiosをインストールする
6. axiosをインポートしてuseStateとuseEffectを実装する
7. App.tsxにApiFetchコンポーネントを登録する
8. axiosの動作確認
9. fetchメソッドも試してみる

ファイル構造

# react-sample-app -> react-ts-app -> src

src
├── App.css
├── App.test.tsx
├── App.tsx
├── components
│   ├── ApiFetch.tsx              <-- 新規作成
│   ├── Hello1.tsx
│   ├── Hello2.tsx
│   ├── BasicUseEffect.tsx
│   ├── Timer.tsx
│   └── TimerContainer.tsx
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

1. TimeContainerをコメントアウト

---

前回、学習した「React Hooks + TypeScriptによるUseEffect(Cleanup)の使い方」の続きでタイマーが動いているので、この機能をコメントアウトしておきます。
App.tsxファイルの<TimerContainer />をコメントアウト。

# App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

// import Hello2 from './components/Basic2';
// import BasicUseEffect from './components/BasicUseEffect';
// import TimerContainer from './components/TimerContainer';        <-- コメントアウト



function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* <Basic2  /> */}
        {/* <BasicUseEffect /> */}
        {/* <TimerContainer /> */}          //<-- コメントアウト
       
      </header>
    </div>
  );
}

export default App;

2. ApiFetch.tsx をcomponetsフォルダに作る

---

componentsフォルダの中にApiFetch.tsxファイルを作成する。
rafceと入力すると補完機能が働くので、そのテンプレートを使用する。

# ApiFetch.tsx


import React from 'react'
const ApiFetch = () => {
    return (
        <div>

        </div>
    )
}

export default ApiFetch

3. json placeholderにアクセスしてResourcesの/posts から100個のjsonオブジェクトを確認

---

json placeholderにアクセスして、取得する100個のjsonオブジェクトを確認する。

JSONPlaceholder - Free Fake REST API

4. useStateとuseEffectをインポートする　

---

先程作成した、ApiFetch.tsxファイルにuseStateとuseEffectをインポートする。

# ApiFetch.tsx


import React, {useState, useEffect} from 'react'     //<-- インポート


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

export default ApiFetch

5. axiosをインストールする

---

ローカルサーバーが動いているようであれば、一旦停止してからインストールする。

$ npm install axios

インストールができたら、再度サーバーを起動しておく。

6. axiosをインポートしてuseStateとuseEffectを実装する

---

以下のコードのように、axiosをインポートしてuseStateとuseEffectを実装する。
TypeScriptを使用しているので、型も指定しておく。

# ApiFetch.tsx


import React, {useState, useEffect} from 'react'
import axios from 'axios';            //<-- インポート

type Fetch = {　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//<-- 型を指定
    id: number,
    title: string,
};

const ApiFetch = () => {
    
    const [posts, setPosts] = useState<Fetch[]>([])
    
    useEffect(() => {
         axios.get('https://jsonplaceholder.typicode.com/posts')　　　　　　　//<-- 取得する100個のjsonオブジェクトのURL
         .then(res => {
             setPosts(res.data)   
         })
    },[])   //<--最初の１回だけjsonオブジェクトを取得できればいいので、,[]を記述しておく

  return (
    <div>
        <ul>
            {
                posts.map(post => <li key={post.id}>{post.title}</li>)　　　//<-- ブラウザにtitleをリスト表示させる
            }
        </ul>
    </div>
  )
}

export default ApiFetch

7.  App.tsxにApiFetchコンポーネントを登録する

---

以下のようにApiFetchをインポートして、ブラウザにjsonオブジェクトを描画させる為に<ApiFetch />を記述する。

# App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import ApiFetch from './components/ApiFetch';          //<-- インポート
// import Hello2 from './components/Basic2';
// import BasicUseEffect from './components/BasicUseEffect';
// import TimerContainer from './components/TimerContainer';        



function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* <Basic2  /> */}
        {/* <BasicUseEffect /> */}
        {/* <TimerContainer /> */}          
        <ApiFetch />            //<-- 追加
      </header>
    </div>
  );
}

export default App;

8. axiosの動作確認

---

axiosがjsonオブジェクトを取得してブラウザに反映させられているか確認する。
localhost:3000にアクセスして確認できれば問題なし。
しっかり取得元のjson placeholderのtitleがリストで表示できているか確認してみる。

9. fetchメソッドも試してみる

---

importとuseEffectのaxiosメソッドの部分をコメントアウトする。
fetchの場合はhtmlでレスポンスが返ってくるので、.json()メソッドを呼び出してjsonに変換してあげる。
ブラウザでの描画はaxiosと変わりないので、問題なく表示できていればとりあえずOK!

# ApiFetch.tsx


import React, {useState, useEffect} from 'react'
//import axios from 'axios';           <-- コメントアウト

type Fetch = {
    id: number,
    title: string,
};

const ApiFetch = () => {
    
    const [posts, setPosts] = useState<Fetch[]>([])
    
    useEffect(() => {
        // axios.get('https://jsonplaceholder.typicode.com/posts')　　　　<-- コメントアウト
        // .then(res => {
        //     setPosts(res.data)   
        // })

        fetch('https://jsonplaceholder.typicode.com/posts',{method: 'GET'})　　　　<-- fetchメソッドを追加
        .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

おわりに

React Hooks + TypeScriptによるAPIデータ取得(axios + fetch)の学習でした。
次回はReact Hooks + TypeScriptによるAPIデータ取得(axios + fetch):idです。