JavaScript には HTTP リクエストを実行できる優れたモジュールやメソッドがあり、サーバー側のリソースにデータを送受信するために使えます。この記事では、JavaScript で HTTP リクエストを実行する方法のうち、よく使われるものをいくつか紹介します。

Ajax

Ajax は非同期の HTTP リクエストを行う古典的な方法です。データは HTTP POST メソッドを使って送信され、HTTP GET メソッドを使って受信されます。GET リクエストの実行方法を見てみましょう。ここでは、ランダムなデータを JSON 形式で返してくれる、開発者向け無料オンライン REST API「JSONPlaceholder」を使用します。

Ajax で HTTP リクエストを実行するには、まず XMLHttpRequest() で新しくオブジェクトを初期化して、次に URL エンドポイントと HTTP メソッド (この例では GET) を指定します。最後に、open() メソッドを使って HTTP メソッドと URL エンドポイントを結び付け、send() メソッドを呼び出してリクエストを実行します。

この例では XMLHTTPRequest.onreadystatechange プロパティを使用して、HTTP レスポンスをコンソールログに出力します。このプロパティには readystatechange イベントが発生した時に呼び出されるイベントハンドラーを含めます。

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

ブラウザーコンソールを確認すると、データの配列が JSON 形式で返されているのが分かります。では、リクエストが完了したかどうかを知るにはどうしたらいいのでしょうか？言い換えれば、Ajax でレスポンスを扱うにはどのようにしたらいいのでしょうか。

onreadystatechange プロパティには readyState と status という 2 つのメソッドがあります。これを使ってリクエストの状態が確認できます。

readyState が 4 の場合は、リクエストが完了したことを意味します。readyState プロパティには 5 種類のレスポンスがあります。詳しくはこちらを参照してください。

JavaScript で直接 Ajax を呼び出す以外にも、HTTP 呼び出しの実行に便利なメソッドには、jQuery メソッドの $.Ajax などがあります。次はそちらを紹介します。

jQuery メソッド

jQuery には HTTP リクエストの扱いを楽にする多くのメソッドがあります。このメソッドを使えるようにするには、プロジェクトに jQuery ライブラリを追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.ajax

jQuery Ajax は、HTTP 呼び出しを行う最もシンプルなメソッドの一つです。

$.ajax メソッドには多くのパラメーターが指定でき、必須の物もそうでない物もあります。その中には、受け取ったレスポンスを扱うための success と error という 2 種類のコールバックオプションがあります。

$.get メソッド

$.get メソッドは、GET リクエストを実行するために使われます。このメソッドは 2 つのパラメーターを受け付けます。エンドポイント (URL) と、コールバック関数です。

$.post

$.post メソッドはサーバーにデータを POST する方法です。これは 3 つのパラメーターを受け付けます。URL、POST したいデータ、そしてコールバック関数です。

$.getJSON

$.getJSON メソッドは、JSON 形式のデータのみを取得します。これは 2 つのパラメーターを受け付けます。URL とコールバック関数です。

jQuery にはこのように、リモートサーバーにデータを要求したり送信したりする各種メソッドが備わっています。しかし、これらのメソッドは実は $.ajax メソッドだけで実行できます。その例が下記です。

fetch

fetch は、非同期リクエストを実行できる新しい強力なウェブ API です。実のところ、HTTP リクエストの方法としてベストな、筆者のお気に入りでもある方法の 1 つが fetch です。fetch は、ES6 の特徴である「プロミス」を返します。ES6 に馴染みがないなら、こちらの記事 (英語) で詳しく解説していますので参考にしてください。プロミスを使うと、非同期リクエストをスマートに扱うことができます。では fetch がどのように動作するか見ていきましょう。

fetch 関数は、1 つ必須のパラメーターとしてエンドポイントの URL をとります。その他にも下記の例のように、オプションのパラメーターがあります。

fetch には多くの利点があります。詳しくはこちらを参照してください。また、fetch の他にもサーバーへのリクエスト送受信を可能にするモジュールやプラグインがあります。例えば Axios です。

Axios

Axios は、HTTP リクエストを実行するためのオープンソースのライブラリで、たくさんの便利な機能を備えています。使い方を見ていきましょう。

使用方法:

まず、Axios を追加します。プロジェクトに Axios を追加する方法は 2 種類あります。

1 つ目は、npm を使う方法です。

npm install axios --save

上記コマンドを実行後、Axios をインポートします。

import axios from 'axios'

2 つ目は、CDN を使って Axios を追加する方法です。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios でリクエストを実行する:

Axios でサーバーに対してデータの送受信を行うには GET と POST を使用します。

GET:

axios は 1 つの必須パラメーターと、オプションで 2 つ目のパラメーターを取ることができます。上の例ではシンプルなクエリーのデータを渡しています。

POST:

Axios は「プロミス」を返します。プロミスについて詳しい人は、プロミスを使うと複数のリクエストを実行できることをご存じかもしれません。Axios でも同じように、複数のリクエストを同時に実行できます。

Axios では他にも多くのメソッドやオプションがサポートされています。こちらを参照してください。

Angular HttpClient

Angular には、Angular アプリで動作する独自の HTTP モジュールがあります。非同期リクエストの処理には RxJS ライブラリが使用され、HTTP リクエストを実行するための多数のオプションが提供されています。

Angular HttpClient を使用してサーバーと通信する

Angular HttpClient を使用してリクエストを実行するには、Angular アプリ内でコードを実行する必要があります。そのためのサンプルアプリを作成しました (訳注: リンクは後述)。Angular に詳しくない方は、筆者の記事 Learn how to create your first Angular app in 20 minutes を参考にしてください。

まず、app.module.ts で HttpClientModule をインポートします。

次に、リクエストを扱うためのサービスを作成します。Angular CLI を使用すれば、簡単にサービスを生成できます。

ng g service  FetchdataService

次に、fetchdataService.ts サービスで HttpClient をインポートし、コンストラクターで注入 (inject) します。

そして app.component.ts で fetchdataService をインポートします。

//import
import { FetchdataService } from './fetchdata.service';

最後に、サービスを呼び出して実行します。

app.component.ts:

サンプルアプリのデモは Stackblitz で確認できます。

まとめ

この記事では、JavaScript における HTTP リクエストの実行方法で最もよく使われる物を見てきました。

ここまでお読みいただきありがとうございました。この記事を気に入っていただけましたら筆者の Twitter までご連絡ください。

React を扱っていれば、API リクエストを理解し実装するのはとても難しいと感じられるでしょう。

そこでこの記事では、React 、React Hooks、React Router、Axios を用いて CRUD 操作を実装することにより、そのすべてがどのように機能するかを学んでいきます。

さあはじめましょう。

Node と npm をインストールする方法

まず最初に、Node をシステム内にインストールしましょう。私たちは主にそれを用いて JavaScript のコードを実行します。

Node をダウンロードするには、https://nodejs.org/en/ にアクセスしてください。

Node上に構築された Node パッケージマネージャー (npm) も必要です。それを用いることで、JavaScript アプリ用のパッケージをインストールできます。幸い、npm は Node に備わっているため、個別にダウンロードする必要はありません。

両方のダウンロードが終了したら、ターミナルかコマンドプロンプトを開いて、node -v と入力してみましょう。これでダウンロードした Node のバージョンを確認します。

React アプリケーションを作成する方法

次に、React アプリケーションを作成するには、ターミナル内で npx create-react-app <Your app name> と入力しますが、今回は npx create-react-app react-crud と入力します。

そうすると、パッケージのインストール状態が表示されます。

パッケージのインストールが終わったら、プロジェクトフォルダーへ移動して、npm start と入力します。

すると、次のような初期状態の React テンプレートが表示されます:

React 用の Semantic UI パッケージをインストールする方法

次に、Semantic UI React パッケージをインストールしましょう。Semantic UI は、React 用に作られた UI (ユーザーインターフェース) ライブラリーです。Semantic UI には、テーブル、ボタンなどの機能をもつ多くの UI コンポーネントが、あらかじめ構築されています。

以下のコマンドを、ご自身のパッケージマネージャーに応じて入力すれば、Semantic UI をインストールできます。

yarn add semantic-ui-react semantic-ui-css

npm install semantic-ui-react semantic-ui-css

また、アプリケーションのメインエントリーファイルである index.js に、インストールしたライブラリーをインポートします。

import 'semantic-ui-css/semantic.min.css'

CRUD アプリケーションを構築する方法

では、React を用いて CRUD アプリケーションの構築を始めましょう。

最初に、アプリケーションにヘッダーを追加しましょう。

以下のようにして、App.js ファイル内にヘッダーを追加します:

import './App.css';

function App() {
  return (
    <div>
      React Crud Operations
    </div>
  );
}

export default App;

次に、ヘッダーを中央に配置しましょう。

親要素 div の、className 属性の値を main に設定してください。それから、App.css ファイル内でフレックスボックスを使用して、ヘッダーを中央に配置しましょう。

import './App.css';

function App() {
  return (
    <div className="main">
      React Crud Operations
    </div>
  );
}

export default App;

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
}

これでヘッダーは完全に中央に配置されました。

見た目が少し良くなるように、ヘッダーをより目立たせて、かっこいいフォントを設定する必要があります。そのために、まずは以下のようにして見出しタグをヘッダーの周りに追加します:

import './App.css';

function App() {
  return (
    <div className="main">
      <h2>React Crud Operations</h2>
    </div>
  );
}

export default App;

次に Google Fonts からフォントをインポートしましょう。 https://fonts.google.com/ にアクセスし、1 つ選択します。

お好みのフォントを選択してください。ただし、この記事の中では Montserrat フォントファミリーを使用します。

フォントを選択したら、次のようにして App.css ファイル内でフォントをインポートしてください:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

では、ヘッダーのフォントを変更しましょう。

    <div className="main">
      <h2 className="main-header">React Crud Operations</h2>
    </div>

このように、見出しタグの className 属性の値を、main-header に設定してください。

それから、App.css 内で、Montserrat フォントファミリーを追加してください:

.main-header{
  font-family: 'Montserrat', sans-serif;
}

これでヘッダーが変更されたのが確認できます。

CRUD コンポーネントを作成する方法

これから、4 つの CRUD 操作 (Create - 生成、Read - 読み取り、Update - 更新、Delete - 削除) に対応するコンポーネントを作成してみましょう。

src フォルダーの中に、components というフォルダーを作成してください。それから、このフォルダーの中に create、read、update という 3 つのファイルを作成してください。delete については、コンポーネントを追加する必要はありません。

では、Create (生成) 操作を実装しましょう。

ただそのためには、Mock API を使用する必要があります。この API は作成したデータを偽のサーバーへ送信するもので、単に学習目的で使用します。

それでは、https://mockapi.io/ へアクセスし、アカウントを作成してください。

プラスボタンをクリックしてプロジェクトを作成してください。

プロジェクトの名前を入力して、CREATE ボタンをクリックしてください。

NEW RESOURCE ボタンをクリックして新しいリソースを作成してください。

Resorce Name の欄へ名前を入力することを求められますので、使用する名前を入力してください。

name、avatar、createdAt などの余分な欄は必要ありませんので削除してください。その後で、CREATE をクリックしてください。

これで、fakeData という名前の、偽の API を作成できました。

fakeData の上でクリックすると、新しいタブで API が開くのを確認できます。現在データベースは空です。

Create コンポーネント用のフォームを作成する方法

次に、Semantic UI ライブラリーが提供しているフォームを使用してみましょう。

Semantic UI React へアクセスし、左側の検索バーの中で Form を検索してください。

このようなフォームが表示されるので、上部左側の Try it をクリックして、コードを取得してください。

コードをコピーしたら、次のように create.js ファイルの中に貼り付けてください:

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    <Form>
        <Form.Field>
            <label>First Name</label>
            <input placeholder='First Name' />
        </Form.Field>
        <Form.Field>
            <label>Last Name</label>
            <input placeholder='Last Name' />
        </Form.Field>
        <Form.Field>
            <Checkbox label='I agree to the Terms and Conditions' />
        </Form.Field>
        <Button type='submit'>Submit</Button>
    </Form>
)

export default Create;

では、Create コンポーネントを App.js ファイルの中でインポートしてください。

import './App.css';
import Create from './components/create';

function App() {
  return (
    <div className="main">
      <h2 className="main-header">React Crud Operations</h2>
      <div>
        <Create/>
      </div>
    </div>
  );
}

export default App;

そうすると次のようになります:

しかし、ここで問題が発生します – 項目が適切にそろえられていませんし、テキスト入力欄のラベルの色が黒になってしまっています。では、これを修正してみましょう。

create.js ファイルの中で、Form の className の値を create-form に設定してください。

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    <Form className="create-form">
        <Form.Field>
            <label>First Name</label>
            <input placeholder='First Name' />
        </Form.Field>
        <Form.Field>
            <label>Last Name</label>
            <input placeholder='Last Name' />
        </Form.Field>
        <Form.Field>
            <Checkbox label='I agree to the Terms and Conditions' />
        </Form.Field>
        <Button type='submit'>Submit</Button>
    </Form>
)

export default Create;

そして、 App.css ファイルの中に以下のクラスセレクターを追加してください:

.create-form label{
  color: whitesmoke !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px !important;
}

このクラスセレクターはフォームの各欄のラベルを指定して、文字色を whitesmoke に設定しています。また、フォントを変更して、フォントサイズを大きくしています。

では、main という className のセレクターの中で、flex-direction プロパティーを追加してください。このプロパティーの値を column 方向に設定することで、className が main である要素の中の各要素が、垂直にそろえられます。

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
  flex-direction: column;
}

これで、フォームの外観が改善されるのが確認できます。

では次に、フォーム欄からデータを取得してコンソールの中で表示してみましょう。そのために、React の useState フックを使用します。

create.js ファイルの中で、React から useState をインポートしてください。

import React, { useState } from 'react';

その後で、First Name、Last Name、チェックボックス用のステート (state) を作成してください。各ステートは、空のストリングまたは false で初期化します。

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' />
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' />
                </Form.Field>
                <Button type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

現在、Create コンポーネントは関数コンポーネントとして機能しているのが確認できます。フックは、関数コンポーネントの中だけで使用できるので、コンポーネントを関数コンポーネントに変更する必要があります。

では、First Name、Last Name、チェックボックスの各欄の値を、setFirstName、setLastName、setCheckbox プロパティーを用いて、それぞれ設定しましょう。

<input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>

<input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>

<Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>

それから、firstName、lastName、checkbox の各ステートの値を取得してみましょう。

ここで、後から API へデータを送信するのに使用する、postData という名の関数を作成します。その関数の中に、次のコードを記述してください:

const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
}

では、First Name、Last Name、チェックボックスの値をコンソールに出力してみましょう。

Submit ボタンに、onClick イベントを使用してこの関数を割り当てることによって、Submit ボタンを押したときに、この関数が呼び出されるようにします。

<Button onClick={postData} type='submit'>Submit</Button>

これまでの内容をすべて含んだ、create ファイル用のコードはこちらです:

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
    }
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button onClick={postData} type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

First name と Last name の中に値を入力して、チェックボックスにチェックを入れてください。その後で、Submit ボタンをクリックしてみてください。すると次のように、コンソールの中にデータがポップアップするのが確認できます:

Axios を使って API リクエストを Mock API へ送信する方法

今度は、Axios を使ってフォームのデータを偽のサーバーへ送信してみましょう。

しかしまずは、Axios をインストールする必要があります。

npm i axios と入力して、パッケージをインストールしてください。

パッケージのインストールが終了したら、Create 操作の実装を開始しましょう。

Axios をファイルの先頭でインポートしてください。

import axios from 'axios';

postData 関数の中で、Axios を使用して POST リクエストを送信します。

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        })
}

ご覧のとおり、ここでは axios.post を使用しています。また axios.post の中に、先ほど作成した API のエンドポイントがあります。その後に、中括弧で囲まれたフォームの項目があります。

Submit をクリックした時に、この関数が呼び出され API サーバーにデータを送信します。

では、First Name と Last Name を入力して、チェックボックスにチェックを入れたら、Submit をクリックしてください。

その後で API を確認してみると、オブジェクトの中に囲まれた状態で、入力した First Name と Last Nameの値と、true という値に設定された checkbox を取得できます。

Read 、Update、Delete の各操作を実装する方法

Read (読み取り) 操作の実装を開始するために、Read ページを作成する必要があります。また、React Router パッケージを用いて、ユーザーをさまざまなページへ案内する必要があります。

https://reactrouter.com/web/guides/quick-start へアクセスし、また、npm i react-router-dom@5 を使用してパッケージをインストールしてください。

パッケージのインストールが済んだら、React Router からコンポーネントをいくつかインポートします:

import { BrowserRouter as Router, Route } from 'react-router-dom'

App.js の中で、return の中のコードをすべて Router でラップしてください。基本的に Router の内部にあるものは、 React の中でルーティングを使用できることを意味しています。

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Create />
        </div>
      </div>
    </Router>
  );
}

export default App;

現在、App.js は上のような状態でしょう。

では、return 内の Create を置き換えて、以下のコードを追加してください:

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Route exact path='/create' component={Create} />
        </div>
      </div>
    </Router>
  );
}

export default App;

ここでは、Create をルートコンポーネントとして使用しています。Create のパスは '/create' に設定しました。そのため、http://localhost:3000/create へアクセスすれば、Create ページを見ることができます。

同じように、read と update に対応するルートが必要です。

import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Route exact path='/create' component={Create} />
        </div>
        <div style={{ marginTop: 20 }}>
          <Route exact path='/read' component={Read} />
        </div>

        <Route path='/update' component={Update} />
      </div>
    </Router>
  );
}

export default App;

上のコードで確認できるように、read と update のルートを作成します。

ここで http://localhost:3000/read へアクセスすると、Read ページが次のように表示されます:

また、http://localhost:3000/update では、次のように Update コンポーネントが表示されます:

Read 操作

Read 操作には、テーブルコンポーネントが必要です。そのため、React Semantic UI にアクセスし、ライブラリーが提供しているテーブルを、以下のように使用してください。

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Registration Date</Table.HeaderCell>
                        <Table.HeaderCell>E-mail address</Table.HeaderCell>
                        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>John Lilki</Table.Cell>
                        <Table.Cell>September 14, 2013</Table.Cell>
                        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
                        <Table.Cell>No</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <Table.Cell>Jamie Harington</Table.Cell>
                        <Table.Cell>January 11, 2014</Table.Cell>
                        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <Table.Cell>Jill Lewis</Table.Cell>
                        <Table.Cell>May 11, 2014</Table.Cell>
                        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

ここではテーブルの中にいくつかのダミーデータが用いられていますが、1 列分のデータだけが必要なので、残りは削除しましょう。

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Registration Date</Table.HeaderCell>
                        <Table.HeaderCell>E-mail address</Table.HeaderCell>
                        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>John Lilki</Table.Cell>
                        <Table.Cell>September 14, 2013</Table.Cell>
                        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
                        <Table.Cell>No</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

これが Read ページの出力画面です。テーブルには列が 4 つありますが、必要なのは 3 つだけです。

余分な項目の列を削除してから、次のように項目の名前をつけなおしてください:

すると現在、Read ページはこのように見えます:

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>First Name</Table.HeaderCell>
                        <Table.HeaderCell>Last Name</Table.HeaderCell>
                        <Table.HeaderCell>Checked</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>Nishant</Table.Cell>
                        <Table.Cell>Kumar</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

では、API から GET リクエストを送信してデータを取得してみましょう。

アプリケーションがマウントされる時に、取得したデータが必要になるので、useEffect フックを使用して実装してください。

import React, { useEffect } from 'react';

 useEffect(() => {
       
 }, [])

ステートを 1 つ作成して、取得したデータを格納します。取得するデータは配列です。

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

const [APIData, setAPIData] = useState([]);
useEffect(() => {
       
}, [])

では、useEffect フックの中で、GET リクエストを送信してみましょう。

 useEffect(() => {
        axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

ここでは axios.get を使用して、GET リクエストを API へ送信しています。その後で、リクエストが resolve (成功) すれば、レスポンスデータを APIData ステート内に格納します。

続いて、取得した API データに応じてテーブルの行をマッピングしましょう。

そのために Map 関数を使用します。Map 関数は配列を反復処理して、データを出力画面内に表示します。

<Table.Body>
  {APIData.map((data) => {
     return (
       <Table.Row>
          <Table.Cell>{data.firstName}</Table.Cell>
           <Table.Cell>{data.lastName}</Table.Cell>
           <Table.Cell>{data.checkbox ? 'Checked' : 'Unchecked'}</Table.Cell>
        </Table.Row>
   )})}
</Table.Body>

API 内のデータに応じて、firstName, lastName, checkbox のそれぞれのデータをマッピングしています。また、ここでは三項演算子 ('?') を使用しています。data.checkbox が true である場合は、Checked と表示され、そうでない場合は Unchecked と表示されます。

Update 操作

それでは、テーブルに Update (更新) 用のヘッダーをもう 1 つ作成し、Update ボタン用の列を、Table.Row の中に作成してください。Update ボタンには、Semantic UI React が提供している Button コンポーネントをインポートして使用してください。

<Table.HeaderCell>Update</Table.HeaderCell>

<Table.Cell> 
  <Button>Update</Button>
</Table.Cell>

ここで、Update ボタンがクリックされた時に、 Update ページにリダイレクトされる必要があります。そのためには React Router が提供している Link が必要です。

では、React Router から Link をインポートしてください。それから、Link タグの中へ Update ボタン用の Table.Cell をラップしてください。

import { Link } from 'react-router-dom';

<Link to='/update'>
  <Table.Cell> 
     <Button>Update</Button>
   </Table.Cell>
</Link>

これで、Update ボタンをクリックした時に、Update ページへリダイレクトされるようになりました。

また、Update ボタンをクリックした時に、各列のデータを更新するには、API が提供している、それぞれの ID が必要です。

setData という名前の関数をコンポーネントの先頭に作成してください。それから、その関数を Update ボタンにバインドしてください。

 <Button onClick={() => setData()}>Update</Button>

ここでは、先頭の関数へ引数としてデータを渡す必要があります。

 <Button onClick={() => setData(data)}>Update</Button>

そして、先頭の関数の中で、データをコンソール内に表示させます:

const setData = (data) => {
   console.log(data);
}

では、update ボタンをクリックして、コンソールを確認してみてください。テーブルの各項目のデータを取得しています。

今度は、このデータをローカルストレージへ格納しましょう。

const setData = (data) => {
        let { id, firstName, lastName, checkbox } = data;
        localStorage.setItem('ID', id);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('Checkbox Value', checkbox);
}

このようにして、データを id、firstName、lastName、checkbox に分割してから、ローカルストレージへ格納しています。ローカルストレージを使用することで、ブラウザー内でローカルにデータを保存できます。

今ここで、Update コンポーネント内に update 操作用のフォームが 1 つ必要です。Create コンポーネントで用いたフォームを再利用しましょう。関数名を単に Create から Update へ変更するだけです。

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';

export default function Update() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit'>Update</Button>
            </Form>
        </div>
    )
}

useEffect フックを Update コンポーネント内で作成してください。このフックを使い、前もってローカルストレージへ格納したデータを取り出します。さらに、ID 項目用のステートをもう一つ作成します。

const [id, setID] = useState(null);

useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'))
}, []);

それから、ローカルストレージから取り出したデータを、キーに応じて配置します。フォームの各欄の中に、取り出した値を配置する必要があります。Update ページがロードされた時に、各欄の中にデータが自動的に配置されるようにしましょう。

<Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit'>Update</Button>
            </Form>

これで、Read ページ内の Update ボタンをクリックすると、Update ページへリダイレクトされ、そこで自動的に配置されたフォームデータを見ることができます。

それでは、Update リクエストを実装してデータを更新してみましょう。

updateAPIData という名前の関数を作成してください。この関数の中で、axios.put を用いて PUT リクエストを送信し、データを更新します。

const updateAPIData = () => {
    axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
        firstName,
         lastName,
         checkbox
	})
}

ここでは API エンドポイントに id 項目を添えているのが確認できます。

Read ページで、項目の Update ボタンをクリックした時に、その ID がローカルストレージの中に格納され、その後に Update ページ で取り出した ID を id ステートの中に格納しています。

そうした後に、id をエンドポイントへ渡しています。こうすることで、渡している ID の項目を更新できます。

次に、updateAPIData 関数を Update ボタンにバインドしてください。

<Button type='submit' onClick={updateAPIData}>Update</Button>

Read ページにあるテーブルの中の、Update ボタンをクリックしてから、Last name を変更し、Update ページにある Update ボタンをクリックしてください。

API を確認してみるか、または Read ページへ戻ってみると、last name が変更されているのを確認できます。

Delete 操作

まずは、Read ページのテーブルに、Delete  (削除) 操作用のボタンを 1 つ追加しましょう。

<Table.HeaderCell>Delete</Table.HeaderCell>

<Table.Cell>
   <Button>Delete</Button>
</Table.Cell>

次に、onDelete という名前の関数を作成してから、Delete ボタンにその関数をバインドしてください。この関数は、Delete ボタンをクリックした時に ID パラメータを受け取ります。

const onDelete = (id) => {

}

<Table.Cell>
   <Button onClick={() => onDelete(data.id)}>Delete</Button>
</Table.Cell>

では、axios.delete を使用して、それぞれの項目を削除する操作を実装しましょう。

const onDelete = (id) => {
  axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
}

Delete ボタンをクリックしてから API を確認してみてください。クリックした項目のデータが削除されているのを確認できます。

ここで、クリックした項目のデータが削除された後に、テーブルのデータをロードし直す必要があります。

そのために、API のデータを読み込む関数を作成してください。

const getData = () => {
    axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
        .then((getData) => {
             setAPIData(getData.data);
         })
}

そして onDelete 関数の中で、項目を削除した後に更新された API のデータを読み込む必要があります。

const onDelete = (id) => {
        axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
     .then(() => {
        getData();
    })
}

これで、今は各項目の Delete ボタンをクリックすることでその項目が削除され、テーブルが自動的に最新の情報に更新されます。

CRUD アプリを少し改善してみましょう

これまで、Create ページの中でデータを投稿 (post) する時には、単にデータを偽のデータベースの中へ入れていましたが、その際に Read ページへリダイレクトする必要があります。

それではまず、React Router から useHistory をインポートしてください。

import { useHistory } from 'react-router';

次に、let 文で history という名前の変数を作成して、その変数の中に useHistory を格納してください。

let history = useHistory();

その後で、post API が呼び出されてから、POST リクエストが resolve した時に、history.push 関数を使用して Read ページへ移動します。

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }

このように useHistory フックを用いることで Read ページへ移動できます。

Update ページについても同じことを行ってください。

import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useHistory } from 'react-router';

export default function Update() {
    let history = useHistory();
    const [id, setID] = useState(null);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'));
    }, []);

    const updateAPIData = () => {
        axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={() => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit' onClick={updateAPIData}>Update</Button>
            </Form>
        </div>
    )
}

以上で、React と React フックを使用して CRUD 操作を実行する方法について理解できました！

学習内容を補足したい場合は、React CRUD Operations という YouTube のビデオ を、この記事の代わりに見ることができます。

さらに、コードをテストしてみたい場合は、GitHubでコードを見つけることができます。

ハッピーラーニング

このガイドでは、React フックを盛り込んだ多くの実例を使用することによって、React で Axios.js を正しく使用する方法がわかります。

まず、なぜデータの取り込みライブラリとして Axios を使用すべきなのかについてお伝えし、React で Axios を設定する方法と、主要な 4 つのタイプの HTTP リクエストを Axios で送信する方法について見ていきます。

その後、再利用性を良くするために Axios インスタンスを作成し、わかりやすくするために async-await を使用する方法や、カスタムフックとして Axios を使用する方法など、より高度な機能について触れます。

さっそくはじめましょう！

プログラムの写しが必要ですか?‬ 📄

PDF 形式のチートシートをダウンロードするにはこちらをクリックしてください (5 秒で終わります)。

このチートシートは、この記事の重要な情報をすべて含んでいる、便利な PDF ガイドです。

目次

• Axios とは?
• なぜ React の中で Axios を用いるのか？
• React で Axios を設定する方法
• GET リクエストを送信する方法 (データの取得)
• POST リクエストを送信する方法 (データの作成)
• PUT リクエストを送信する方法 (データの更新)
• DELETE リクエストを送信する方法 (データの削除)
• Axios でエラーを扱う方法
• Axios インスタンスを作成する方法
• Axios で Async-Await 構文を使用する方法
• カスタム useAxios フックを作成する方法

Axios とは？

Axios とは、特定のエンドポイントへのリクエストを送信できるようにする、HTTP クライアントライブラリです:

たとえば、外部 API や独自のバックエンド Node.js サーバーを、Axios で実装できます。

リクエストを送信することで、API に、そのリクエストに応じた処理の実行を要求します。

たとえば、GET リクエストを送信した場合は、アプリケーションの中で表示するデータを返信するように要求します。

なぜ React の中で Axios を用いるのか？

HTTP リクエストの送信に使用できる、さまざまなライブラリが数多く存在しているにもかかわらず、なぜ Axios を選択するのでしょうか？

HTTP リクエストを送信するクライアントとして、 Axios を使用すべき 5 つの理由を、以下に挙げます:

1. Axios は、初期設定で JSON 形式のデータをうまく扱うことができます。Fetch API などの別のものと違い、多くの場合はヘッダーを設定する必要がありません。また、リクエストボディを JSON 文字列へ変換するといった、面倒な作業を行う必要がありません。
2. Axios には、主な HTTP メソッドと一致する名前の関数が用意されています。GET リクエストを送信する時は、.get() メソッドを使用します。
3. Axios は、より少ないコードでより多くのことを行います。Fetch API と違い、一度だけ .then() コールバックを用いれば、リクエストした JSON データにアクセスできます。
4. Axios にはより良いエラー処理機能があります。ステータスコードをチェックして、エラーを自分で返さなければならない Fetch API と違い、Axios は 400 番台と 500 番台のエラーレスポンスステータスコードを返します。
5. Axios は、クライアント側でもサーバー側でも使用できます。Node.js でアプリケーションのコードを記述している場合は、ブラウザーとは別の環境の中でも Axios を使用できることに注意してください。

React で Axios を設定する方法

React で Axios を使用する手順はとても簡単です。以下の 3 つのことが必要です:

1. React のプロジェクトを作成してあること
2. npm または yarn で Axios をインストールすること
3. リクエストを送信するための API エンドポイント

新しい React アプリケーションを最も早く作成する方法は、react.new を訪れることです。

すでに React のプロジェクトがある場合は、Axios を npm (または他のパッケージマネージャー) でインストールする必要があるだけです:

npm install axios

また、このガイドでは JSON Placeholder API を使って、投稿 (post) データを取得し、変更します。

リクエストを送信できる全てのルートについて、それぞれにふさわしい HTTP メソッドと一緒に記載したものの一覧がこちらです:

Axios と API のエンドポイントを使用して行う操作 (投稿の取得、作成、更新、削除) の手短な例がこちらです:

GET リクエストを送信する方法

データを取得したり検索するには、GET リクエストを送信します。

最初に、個々の投稿に対してリクエストを送信してみましょう。エンドポイントを見てみると、 /posts/1 エンドポイントから最初の投稿を取得できます:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

useEffect フックを使って、コンポーネントがマウントされた時点でこのリクエストを送信します。これには Axios をインポートし、.get() メソッドを用いて GET リクエストをエンドポイントへ送信し、.then() コールバックを用いてすべてのレスポンスデータを取得することが伴います。

レスポンスはオブジェクトとして返されます。データ (この場合、 id、title、body プロパティーを伴う投稿データ) は post と呼ばれるステートに格納され、コンポーネントの中で表示されます。

レスポンスの中の .data プロパティーから、常にリクエストされたデータを見つけることができるということに注意してください。

POST リクエストを送信する方法

新しいデータを作成するには、POST リクエストを送信します。

JSON Placeholder API の仕様に従い、POST リクエストを /posts エンドポイントに送信する必要があります。以下のコードを見てみると、投稿データを作成するボタンがあるのを確認できます:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function createPost() {
    axios
      .post(baseURL, {
        title: "Hello World!",
        body: "This is a new post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={createPost}>Create Post</button>
    </div>
  );
}

ボタンをクリックすると、createPost 関数を呼び出します。

Axios で POST リクエストを送信するには、.post() メソッドを使用します。作成しようとしている新しい投稿データを、オブジェクトのプロパティーとして記述し、第二引数として渡します。

もう一度 .then() コールバックを使ってレスポンスデータを取得し、最初に取得した投稿を、リクエストした新しい投稿 に置き換えます。

‌‌これは .get() メソッドとよく似ていますが、作成しようとしている新しいリソースが、API エンドポイントの後ろに第二引数として渡されています。

PUT リクエストを送信する方法

特定のリソースを更新するには、PUT リクエストを送信します。

以下の例では、最初の投稿を更新します。

そのためにもう一度ボタンを作成しましょう。ただし今回は、投稿を更新するための関数を、ボタンで呼び出します:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function updatePost() {
    axios
      .put(`${baseURL}/1`, {
        title: "Hello World!",
        body: "This is an updated post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={updatePost}>Update Post</button>
    </div>
  );
}

上のコードの中では、Axois の PUT メソッドを使用します。POST メソッドの場合と同じように、更新しようとしているリソースをオブジェクトのプロパティーとして記述し、第二引数として渡しています。

ここでまた .then() コールバックを用いて、返ってきたデータで JSX を更新します。

DELETE リクエストを送信する方法

最後に、リソースを削除するために、DELETE メソッドを使用します。

その例として、最初の投稿を削除してみましょう。

このリクエストを送信する時に、第二引数には何も必要ないことに注意してください:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

ほとんどの場合、.delete() メソッドから返ってきたデータは必要ありません。

ただし上のコードの中では、リクエストが正常に resolve (成功) したことを確かめるために、.then() コールバックがさらに用いられています。

上のコードの中で、投稿が削除された後に、ユーザーはうまく削除されたことを通知されます。それから、ステートの post の値が、初期値である null に設定されます。

また、一度投稿が削除されると、「No post」というテキストがアラートメッセージの後にすぐに表示されます。

Axios でエラーを扱う方法

Axios でエラーを扱うとはどういうことについて言うのでしょうか？

リクエストの送信中にエラーが発生するとどうなるでしょうか？例えば、誤ったデータを送信したり、誤ったエンドポイントへリクエストを送信したり、ネットワークエラーが発生したりする場合があるかもしれません。

エラーのシミュレーションを行うために、/posts/asdf というような存在しない API エンドポイントにリクエストを送信してみましょう。

このリクエストを送信すると、404 ステータスコードが返ってきます:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);
  
  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

この場合、.then() コールバックを実行する代わりに、Axios はエラーを返して、.catch() コールバック関数を実行します。

この関数の中で、エラーデータを取得してステートに保存することで、エラーについてユーザーに通知します。つまり、エラーが発生したらエラーメッセージを表示します。

このコードを実行したときに、「Error: Request failed with status code 404」というテキストが見えます。

Axios インスタンスを作成する方法

これまでの例を見てみると、各リクエストを送信するために用いる Axios のエンドポイントの一部として、 baseURL があるのを確認できます。

とはいえ、すべてのリクエストに対してひとつずつ baseURL を記述し続けるのはちょっと面倒ですよね。いつも似たようなエンドポイントを含んでいるのですから、使用している baseURL を、単に Axios に覚えさせることはできないものでしょうか？

実はできます。.create() メソッドでインスタンスを作成した場合、Axios は baseURL を記憶し、さらに、すべてのリクエストに対して指定し得る、ヘッダーを含めた他の値を記憶します:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

上のコードでは、設定用オブジェクトのプロパティーは baseURL だけであり、それにエンドポイントを渡しています。

この場合では、.create() 関数は client と呼ばれる、新しく作られたインスタンスを返します。

そうすることで、今後は、これまでと同じすべてのメソッドを用いるときに、第一引数として baseURL を渡す必要が無くなります。例えば、/、/1 などの必要な特定のルートを、単に参照するだけで済みます。

Axios で Async-Await 構文を使用する方法

JavaScript (React アプリケーションを含む) の中でプロミスを用いることの大きな利点は、async-await 構文が使用できることです。

async-await は、より簡潔なコードを記述できるようにしてくれます。さらに、async-await を用いたコードは、同期コードにとてもよく似ていますし、わかりやすいです。

では、どのようにして Axios で async-await 構文を用いればよいのでしょうか？

以下の例において、投稿が取得されてから、さらにその投稿を削除するボタンがあります:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);

  async function deletePost() {
    await client.delete("/1");
    alert("Post deleted!");
    setPost(null);
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

ここでは useEffect の中に、getPost と呼ばれる async 関数があります。

関数を async にしたことにより、await キーワードを用いて GET リクエストを resolve させ、次の行でそのデータをステートに設定することが可能になりました。これで .then() コールバックを使わずに書くことができます。

getPost 関数が、作成された後ですぐに呼び出されていることに注意してください。

さらに、deletePost 関数も async になっています。これは、promise を resolve する await キーワードを使用するために必要です (Axios メソッドはすべて、resolve すべき promise を返します) 。

‌‌DELETE リクエストと一緒に await キーワードを使用した後で、ユーザーは投稿が削除されたことを通知され、ステートの post の値を null に設定します。

ご覧になったとおり、async-await はコードを大幅に整理し、とても簡単に、Axios と一緒に使用できます。

カスタム useAxios フックを作成する方法

async-await は、コードをわかりやすくする素晴らしい方法ですが、これをさらにもう一歩進めることができます。

コンポーネントがマウントされる際に useEffect を用いてデータを取得する代わりに、Axios で同じ処理を実行できる独自のカスタムフックを、再利用できる関数として作成できます。

カスタムフックは自分で作れますが、その一方で、use-axois-client と呼ばれるとても良いライブラリが、カスタム useAxios フックを提供しています。

まずは、パッケージをインストールします:

npm install use-axios-client

フックを使用するために、JavaScript ファイルの先頭で、use-axios-client から useAxios をインポートします。

もう useEffect は必要ないため、React のインポートは削除できます:

import { useAxios } from "use-axios-client";

export default function App() {
  const { data, error, loading } = useAxios({
    url: "https://jsonplaceholder.typicode.com/posts/1"
  });

  if (loading || !data) return "Loading...";
  if (error) return "Error!";

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  ) 
}

これで、useAxios を App コンポーネントの先頭で呼び出してから、リクエストを送信しようとしている URL を渡すことができます。また、このフックは、いろいろな状態を扱うのに必要となる、すべての値 (loading、error、そして resolve した data) を含むオブジェクトを返します。

このリクエストの実行中は、 loading の値は true です。エラーが発生した場合は、エラー状態を表示しましょう。そうでなければ、返ってきたデータがある場合は UI (ユーザーインターフェース) の中でそれを表示できます。

このようなカスタムフックの利点は、コードを実際に削減し、全体的に簡素化できることです。

Axios でより単純にデータを取得する方法を探しているなら、試しに今回のようにカスタム useAxios フックを使ってみてください。

その次は？

おめでとうございます！ 最も強力な HTTP クライアントライブラリのひとつを使用して、React アプリケーションを強化する方法を今、知ることができました。

このガイドから、多くのことを学んでいただけるよう願っています。

後で参照できるように、このガイドを PDF チートシートとしてダウンロードできることを覚えておいてください。

さらに多くの学びをご希望でしょうか？ React Bootcamp にご参加ください

React Bootcamp は、Reactの学習について知っておくべきことをすべて取り入れ、ビデオ、チートシート、特別なボーナスなどを、1つのわかりやすいパッケージにまとめています。

React のプロになり、夢の仕事を得て、自分の未来を管理するために、何百人もの開発者がすでに使用している内部関係者向けの情報をこちらで手に入れてください:

通知を受け取るにはこちらをクリックしてください