【FetchAPI】React/TypeScriptでGET,POST,PUT,DELETEをする【C#】

はじめに

Reactを利用して、APIをGET,POST,PUT,DELETEする方法をまとめます。
Axiosは比較的多く情報があったのですが、Fetch APIは日本語であまりなかったので、まとめておきます。
本記事では、【C#】SQL Serverと.NETのAPIをDockerで動かす方法で作成したAPIを使うことがあります。
良ければこちらもご覧ください。

プロジェクトを作る

今回は、Viteを使ってプロジェクトを作りました。

1. 以下を実行

npm create vite

2. 以下を選択
   Reactと、TypeScriptを選択します。

GET

まず、基本のGetからやってみましょう。

Sampleコードで試してみる

1. ファイルを作る
   今回はGetAPI.tsxとしました。
2. GetAPI.tsxに以下を書く
   参考サイトでは、型定義をしていなかったので、型定義をしたものに変更しています。
   また、constからfunctionに変更しています。
   （＋にしている部分です）

import { useState, useEffect } from 'react'

+ type Sample = {
+     id: number;
+     title: string;
+ }
- const Fetch = () => {
+ function GetAPI() {

-   const [posts, setPosts] = useState([])
+  const [posts, setPosts] = useState<Sample[]>([])

    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 Fetch;
+ export default GetAPI;

3. App.tsxに以下を書く

<GetAPI />

自分のAPIにつなげてみよう

【C#】SQL Serverと.NETのAPIをDockerで動かす方法で作成したAPIを使っている方は、URLの部分を、http://localhost:XXXX/api/booksとすればOKです。

GetAPIの全コード

import { useState, useEffect } from 'react'

type Sample = {
    id: number;
    title: string;
}

function GetAPI() {

    const [posts, setPosts] = useState<Sample[]>([])

    useEffect(() => {
        fetch('http://localhost:XXXX/api/books', { method: 'GET' })
            .then(res => res.json())
            .then(data => {
                setPosts(data.items)
            })
    }, [])

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

export default GetAPI;

POST

次に、Postをやってみましょう。

Sampleコードで試してみる（axiosからfetchへ）

1. ファイルを作る
   今回は、PostAPI.tsxとしました。
2. PostAPI.tsxに以下を書く
   以下のコードは、参考サイトからの引用です。
   axiosでやっていますが、まず動作確認としてaxiosでやってみましょう。

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

ブラウザのコンソールで、以下のように表示されればOKです。

3. 2つのデータを送信できるようにする

以下の様に変更します。

  state = {
-        name: '',
+        name: '',
+        age: ''
     }

     handleChange = event => {
-        this.setState({ name: event.target.value });
+        const { name, value } = event.target;
+        this.setState({ [name]: value });
     }

   const user = {
-            name: this.state.name
+            name: this.state.name,
+            age: this.state.age
         };

+                    <label>
+                        Person Age:
+                        <input type="text" name="age" onChange={this.handleChange} />
+                    </label>

4. axiosからfetchに変更する

-        axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
-            .then(res => {
-                console.log(res);
-                console.log(res.data);
-            })
+        fetch('https://jsonplaceholder.typicode.com/users', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(user)
+        })
+        .then(data => {
+            console.log(data);
+        })

PostAPI.tsxの全コード

import React from 'react';

export default class PersonList extends React.Component {
    state = {
        name: '',
        age: '',
    }

    handleChange = event => {
        const { name, value } = event.target;
        this.setState({ [name]: value });
    }

    handleSubmit = event => {
        event.preventDefault();

        const user = {
            name: this.state.name,
            age: this.state.age
        };

        fetch('https://jsonplaceholder.typicode.com/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(user)
        })
            .then(data => {
                console.log(data);
            })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Person Name:
                        <input type="text" name="name" onChange={this.handleChange} />
                    </label>
                    <label>
                        Person Age:
                        <input type="text" name="age" onChange={this.handleChange} />
                    </label>
                    <button type="submit">Add</button>
                </form>
            </div>
        )
    }
}

参考にしたコードでは、パラメーター 'event' の型は暗黙的に 'any' になります。と表示されています。
これを解決したい方は、以下にするとよいでしょう。（クイック修正そのままです）
※本当はanyではなく、きちんと型指定したほうがいいです。

- handleChange = event => {
+ handleChange = (event: { target: { name: any; value: any; }; }) => {

- handleSubmit = event => {
+ handleSubmit = (event: { preventDefault: () => void; }) => {

自分のAPIにつなげてみよう

APIは以下を使っています。
【C#】SQL Serverと.NETのAPIをDockerで動かす方法

【C#】SQL Serverと.NETのAPIをDockerで動かす方法のAPIのコードを使っている方は、POSTのコードを足す必要があります。

コード

    [HttpPost]
    public void Post([FromBody] Book book)
    {
        context.Books.Add(book);
        context.SaveChanges();
    }

1. 変数を書き換える
   以下のように書き換えます。
   なお、authorやtitleなどは、【C#】SQL Serverと.NETのAPIをDockerで動かす方法のAPIを使用しているので、ご自分のコードがある方は、適切な変数に変更してください。

import React from 'react';

export default class BookList extends React.Component {
    state = {
        author: '',
        title: '',
    }

    handleChange = (event: { target: { name: any; value: any; }; }) => {
        const { name, value } = event.target;
        this.setState({ [name]: value });
    }

    handleSubmit = (event: { preventDefault: () => void; }) => {
        event.preventDefault();

        const book = {
            author: this.state.author,
            title: this.state.title
        };

        fetch('http://localhost:XXXX/api/books', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(book)
        })
            .then(data => {
                console.log(data);
            })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Book title:
                        <input type="text" name="title" onChange={this.handleChange} />
                    </label>
                    <label>
                        Book author:
                        <input type="text" name="author" onChange={this.handleChange} />
                    </label>
                    <button type="submit">Add</button>
                </form>
            </div>
        )
    }
}

今回紹介したコードは、class App extends Componentという方式で書かれています。
ただ、近年は、関数コンポーネントを使って書いたほうがいいようです。
（参考：https://qiita.com/cotomonaga/items/89a4e1a4733cb2cfc248 ）
今回のコードを、ChatGPTによって関数コンポーネントに書き換えてもらったものを以下に貼っておきます。
参考にしてください。

関数コンポーネントにしたPostAPIの全コード

import { useState } from 'react';

function PostAPI() {
    const [author, setAuthor] = useState('');
    const [title, setTitle] = useState('');

    const handleChange = (event: { target: { name: any; value: any; }; }) => {
        const { name, value } = event.target;
        if (name === 'author') {
            setAuthor(value);
        } else if (name === 'title') {
            setTitle(value);
        }
    }

    const handleSubmit = (event: { preventDefault: () => void; }) => {
        event.preventDefault();

        const book = {
            author: author,
            title: title
        };

        fetch('http://localhost:XXXX/api/books', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(book)
        })
            .then(data => {
                console.log(data);
            })
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label>
                    Book title:
                    <input type="text" name="title" onChange={handleChange} />
                </label>
                <label>
                    Book author:
                    <input type="text" name="author" onChange={handleChange} />
                </label>
                <button type="submit">Add</button>
            </form>
        </div>
    )
}

export default PostAPI;

PUT

Sampleコードで試してみる（axiosからfetchへ）

【C#】SQL Serverと.NETのAPIをDockerで動かす方法のAPIのコードを使っている方は、PUTのコードを足す必要があります。

コード

[HttpPut("{id}")]
    public void Put(int id, [FromBody] Book book)
    {
        var target = context.Books.Find(id);
        if (target == null)
        {
            return;
        }
        target.Title = book.Title;
        target.Author = book.Author;
        context.SaveChanges();
    }

1. ファイルを作る
   今回は、PutAPI.tsxとしました。
2. PutAPI.tsxに以下を書く
   Put / Update Request with Axios | Update Data with Axios and React JSより引用したコードです。
   idは固定になっていますが、Update出来ます。

import axios from "axios"
import { useEffect, useState } from "react"

function PutAPI() {

   const [post,setPost]  = useState({
       title: '',
       body: ''
   })
   useEffect(() => {
       axios.get('https://jsonplaceholder.typicode.com/posts/1')
           .then(res => console.log(res.data))
   }, [])

   const handleInput = (event) =>{
       setPost({...post,[event.target.name]: event.target.value})
   }

   function handleSubmit(event){
       event.preventDefault()
       axios.put('https://jsonplaceholder.typicode.com/posts/1',{post})
           .then(res => console.log(res.data))
           .catch(err => console.log(err))
   }

   return (
       <div>
           <div>
               <form onSubmit={handleSubmit}>
                   Title:<input type="text" onChange={handleInput} name="title" />
                   Body:<input type="text" onChange={handleInput} name="body" />
                   <button type="submit">Submit</button>
               </form>
           </div>
       </div>
   )
}

export default PutAPI

3. fetchに変える
   2個所を変える必要があります。
   Getの方にcatchをどちらも加えています。
   まず、Getの部分です。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

次に、Putの部分です。

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ post })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

4. idをformの値で指定できるようにする
   以下の部分を変更します。

+    const [id, setId] = useState(1);
    useEffect(() => {
-        fetch('https://jsonplaceholder.typicode.com/posts/1', {
+        fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.log(error));
-    }, [])
+    }, [id])
~~~
+ const handleIdChange = (event) => {
+        setId(event.target.value);
+    }
~~~
- fetch('https://jsonplaceholder.typicode.com/posts/1', {
+ fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
~~~
                <form onSubmit={handleSubmit}>
+                    ID:<input type="number" onChange={handleIdChange} value={id} />

自分のAPIにつなげてみよう

【C#】SQL Serverと.NETのAPIをDockerで動かす方法のAPIのコードを使っている方は、DELETEのコードを足す必要があります。

コード

    [HttpGet("{id}")]
    public ActionResult<Book> Get(int id)
    {
        var book = context.Books.Find(id);
        if (book == null)
        {
            return NotFound();
        }
        return Ok(book);
    }

1. PutAPI.tsxのコードを書き換える
   【C#】SQL Serverと.NETのAPIをDockerで動かす方法で作成したAPIを使っている方は、以下を変更すればOKです。

• URLの部分を、http://localhost:XXXX/api/books
• 変数の部分をBodyからAuthor，idからbookIdにする
• .then(response => response.json())を削除する

PutAPIの全コード

import { useEffect, useState } from "react"

function PutAPI() {

    const [items, setItem] = useState({
        title: '',
        author: ''
    })
    const [bookId, setId] = useState(1);
    useEffect(() => {
        fetch(`http://localhost:XXXX/api/books/${bookId}`)
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.log(error));
    }, [bookId])

    const handleInput = (event) => {
        setItem({ ...items, [event.target.name]: event.target.value })
    }
    const handleIdChange = (event) => {
        setId(event.target.value);
    }

    function handleSubmit(event) {
        event.preventDefault()
        fetch(`http://localhost:XXXX/api/books/${bookId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(items)
        })
            .then(data => {
                console.log(data);
            })
            .catch(error => console.log(error));
    }

    return (
        <div>
            <div>
                <form onSubmit={handleSubmit}>
                    ID:<input type="number" onChange={handleIdChange} value={bookId} />
                    Title:<input type="text" onChange={handleInput} name="title" />
                    Author:<input type="text" onChange={handleInput} name="author" />
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>
    )
}

export default PutAPI

今回紹介したコードは、class App extends Componentという方式で書かれています。
ただ、近年は、関数コンポーネントを使って書いたほうがいいようです。
（参考：https://qiita.com/cotomonaga/items/89a4e1a4733cb2cfc248 ）
今回のコードを、ChatGPTによって関数コンポーネントに書き換えてもらったものを以下に貼っておきます。
参考にしてください。

関数コンポーネントにしたPostAPIの全コード

import { useEffect, useState } from "react";

function PutAPI() {
    const [items, setItems] = useState({
        title: '',
        author: ''
    });
    const [bookId, setId] = useState(1);

    useEffect(() => {
        fetch(`http://localhost:5009/api/books/${bookId}`)
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.log(error));
    }, [bookId]);

    const handleInput = (event) => {
        setItems({ ...items, [event.target.name]: event.target.value });
    };

    const handleIdChange = (event) => {
        setId(event.target.value);
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        fetch(`http://localhost:5009/api/books/${bookId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(items)
        })
            .then(data => {
                console.log(data);
            })
            .catch(error => console.log(error));
    };

    return (
        <div>
            <div>
                <form onSubmit={handleSubmit}>
                    ID:<input type="number" onChange={handleIdChange} value={bookId} />
                    Title:<input type="text" onChange={handleInput} name="title" />
                    Author:<input type="text" onChange={handleInput} name="author" />
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>
    );
};

export default PutAPI;

DELETE

Sampleコードで試してみる（axiosからfetchへ）

【C#】SQL Serverと.NETのAPIをDockerで動かす方法のAPIのコードを使っている方は、DELETEのコードを足す必要があります。

コード

    [HttpDelete("{id}")]
    public void Delete(int id)
    {
        var book = context.Books.Find(id);
        if (book == null)
        {
            return;
        }
        context.Books.Remove(book);
        context.SaveChanges();
    }

1. ファイルを作る
   今回は、DeleteAPI.tsxとしました。
2. コードに追記する
   以下のコードは、参考サイトからの引用です。
   axiosでやっていますが、まず動作確認としてaxiosでやってみましょう。

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
 state = {
   id: '',
 }

 handleChange = event => {
   this.setState({ id: event.target.value });
 }

 handleSubmit = event => {
   event.preventDefault();

   axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
     .then(res => {
       console.log(res);
       console.log(res.data);
     })
 }

 render() {
   return (
     <div>
       <form onSubmit={this.handleSubmit}>
         <label>
           Person ID:
           <input type="text" name="id" onChange={this.handleChange} />
         </label>
         <button type="submit">Delete</button>
       </form>
     </div>
   )
 }
}

2. Fetchにしてみる

-   axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
-      .then(res => {
-        console.log(res);
-        console.log(res.data);
-      })
+   fetch(`https://jsonplaceholder.typicode.com/users/${this.state.id}`, {
+                method: 'DELETE',
+            })
+                .then(data => {
+                    console.log(data);
+                })        

今回紹介したコードは、class App extends Componentという方式で書かれています。
ただ、近年は、関数コンポーネントを使って書いたほうがいいようです。
（参考：https://qiita.com/cotomonaga/items/89a4e1a4733cb2cfc248 ）
今回のコードを、ChatGPTによって関数コンポーネントに書き換えてもらったものを以下に貼っておきます。
参考にしてください。

関数コンポーネントにしたPostAPIの全コード

import { useState } from 'react';

function DeleteAPI() {
    const [id, setId] = useState('');

    const handleChange = (event: { target: { value: any; }; }) => {
        setId(event.target.value);
    };

    const handleSubmit = (event: { preventDefault: () => void; }) => {
        event.preventDefault();

        fetch(`http://localhost:5009/api/books/${id}`, {
            method: 'DELETE',
        })
            .then(data => {
                console.log(data);
            });
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label>
                    Book ID:
                    <input type="text" name="id" onChange={handleChange} />
                </label>
                <button type="submit">Delete</button>
            </form>
        </div>
    );
};

export default DeleteAPI;

自分のAPIにつなげてみよう

【C#】SQL Serverと.NETのAPIをDockerで動かす方法で作成したAPIを使っている方は、URLの部分を、http://localhost:XXXX/api/booksとすればOKです。

参考サイト

Getのコードは以下から引用しました。
【React】fetchを使ってapiからjsonデータを取得する（GETメソッド）
Post,Deleteのコードは以下から引用しました。
React でAxios を使用する方法
Putのコードは以下から引用しました。
Put / Update Request with Axios | Update Data with Axios and React JS
本記事で出てくる、自分のAPIにつなげてみようのAPIは以下を使用しています。
【C#】SQL Serverと.NETのAPIをDockerで動かす方法
関数コンポーネントとclass App extends Componentについては以下を参照すると良いと思います。
React入門でつまづいた ～function App()とclass App extends Componentの違い～