[React] バックエンドを考えずにREST APIを試す

ReactでREST APIを試したい

Reactを触っていると、バックエンドの情報をページに表示したい場面は多々ありますよね？（まあjs含めなんですが。）
しかし、バックエンドの設計はまだしてないし...というか自分携わらないし...

そんな時にJSON Placeholder × Axios です。

JSON Placeholder

JSONPlaceholder
このサイトが何かというと、超簡単にRESTで実装されたAPIを含んでいます。
更に以下の特徴があります。

• 必要な情報に合わせてダミーデータが返ってくる。（ex.userデータ）
• POSTやPATCHなど、データを登録・変更する作業が伴っても、実際に登録はされない

Axios

ReactでAPIにアクセスするためにはいくつか方法がありますが、手っ取り早く使うならAxiosと呼ばれるサードパーティがおすすめ。
インストールしておけば、getなど直感的にAPIと繋がれます。

今回はuserの情報で遊んでみます。

install

$ npm install axios

使い方の例

　App.js

import axios from "axios";

export default function App() {
  const onClickUsers = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        console.log(res.data);　//今回はconsoleにログを出す
      })
  };

  return (
    <div className="App">
      <button onClick={onClickUsers}>users</button>
    </div>
  );
}

上の例はボタンを押したらコンソールにuser情報をgetしてきます。

get

axios.get("https://jsonplaceholder.typicode.com/users")

POST

const user = { name: `test` }
axios.post("https://jsonplaceholder.typicode.com/users", {user})

PATCH

const user = { name: `test` }
axios.patch("https://jsonplaceholder.typicode.com/users/{id}", {user})// idは自分の好きなように設定

DELETE

axios.delete("https://jsonplaceholder.typicode.com/users/{id}", {user})// idは自分の好きなように設定

まとめ

とりあえずAPIを試したいとか、軽いモチベーションの時はJSON Placeholderは非常に有用そう。
Axios は設定も簡単なので、APIを使用するときは重宝するでしょう。