この記事では、Socket.io と HarperDB を使用して、チャットルームを備えたフルスタックのリアルタイム・チャットアプリケーションを作成します。

このプロジェクトを通して、フルスタックアプリケーションの作り方や、バックエンドがフロントエンドとリアルタイムで通信できるウェブアプリの作り方を学ぶことができます。

通常、HTTP リクエストを使用する場合、サーバーはリアルタイムでデータをクライアントにプッシュすることはできません。しかし、Socket.io を使用することで、サーバーはサーバー上で発生したいくつかのイベントに関するリアルタイム情報をクライアントにプッシュすることができるようになります。

これから作成するウェブアプリには 2 つのページがあります。

チャットルームに参加するページ。

そしてチャットルームのページ。

このウェブアプリ作成に使用するものは次のとおりです。

• フロントエンド: React (インタラクティブなアプリケーションを構築するためのフロントエンド JavaScript のフレームワークです)
• バックエンド: Node と Express (Express は、API とバックエンドを簡単に作成できる非常に人気のある NodeJS のフレームワークです)
• データベース: HarperDB (SQL または NoSQL を使用してデータをクエリできるデータ + アプリケーションのプラットフォーム。HarperDB には API も組み込まれているため、大量にバックエンドのコードを書く必要がなくなります)
• リアルタイム通信: Socket.io (以下を参照してください！)

ソースコードはここをご覧ください。(星を付けるのをお忘れなく⭐)

目次

1. Socket.io とは
2. プロジェクトのセットアップ
3. 「チャットルームに参加する」ページ作成方法
4. サーバーの設定方法
5. サーバー上で最初の Socket.io イベントリスナーを作成する方法
6. Socket.io のルームの仕組み
7. チャットページを作成する方法
8. メッセージコンポーネント (B) を作成する方法
9. HarperDB でスキーマとテーブルを作成する方法
10. メッセージ送信コンポーネント (C) の作成方法
11. HarperDB の環境変数を設定する方法
12. Socket.io を利用してユーザーが相互にメッセージを送信できるようにする方法
13. HarperDB からメッセージを取得する方法
14. クライアントで最新メッセージ 100 件を表示する方法
15. チャットルームとユーザー (A) の表示方法
16. Socket.io のルームからユーザーを削除する方法
17. Socket.io 接続を切断するイベントリスナーを追加する方法

Socket.io とは

Socket.IO を使用することで、サーバー上でイベントが発生したときに、サーバーはリアルタイムで情報をクライアントにプッシュすることができます。

たとえば、マルチプレイゲームをしているとします。「友達」があなたに対してものすごいゴールを決めてしまうというイベントが発生するかもしれません。

Socket.IO を使用することで、失点について (ほぼ) 瞬時に知ることができるのです。

Socket.IO を使用しない場合では、クライアントはサーバーでイベントが発生したかどうかを確認するために複数のポーリング AJAX 呼び出しを行う必要があります。例えば、クライアントは JavaScript を使用して、サーバー上のイベントを 5 秒ごとに確認することも可能でしょう。

Socket.IO を使用することで、クライアントはサーバー上でイベントが発生したかどうかを確認するために複数のポーリング AJAX 呼び出しを行う必要がなくなります。代わりに、サーバーは情報を取得したら直ちにそれをクライアントに送信します。はるかに効率的ですね。👌

そのため、Socket.IO を使用すると、チャットアプリやマルチプレイヤーゲームなどのリアルタイムアプリケーションを簡単に構築することができます。

プロジェクトのセットアップ

1. フォルダーの設定方法

お好みのテキストエディター (私の場合は VS Code) で新しいプロジェクトを立ち上げ、ルートフォルダーにクライアント (client) とサーバー (server) という 2 つのフォルダーを作成します。

フロントエンド React アプリケーションをクライアントフォルダーに、Node/Express バックエンドをサーバーフォルダーに作成していきます。

2. クライアントの依存関係をインストールする方法

プロジェクトのルートディレクトリでターミナルを開きます。(VS Code では、Ctrl+' を押すか、ターミナル -> 新しいターミナルを選択してください。)

次に、React をクライアントディレクトリにインストールします。

$ npx create-react-app client

React がインストールされたら、ディレクトリをクライアントフォルダーに変更し、次の依存関係をインストールします。

$ cd client
$ npm i react-router-dom socket.io-client

React-router-dom を使用することで、さまざまな React コンポーネントへのルートを設定でき、それによって色々なページを作成することができます。

Socket.io-client は、socket.io のクライアント版であり、イベントをサーバーに「送信」できます。サーバーが受信すると、socket.io のサーバー版を使用して、送信者と同じルーム内のユーザーにメッセージを送信したり、ユーザーをソケットルームに参加させたりすることができます。

後で実際にコードを使って実践してみると、それが何を意味するのか、もっとわかるかと思います。

3. React アプリの起動方法

クライアントディレクトリから次のコマンドを実行して、すべてが順調に稼働していることを確認してみましょう。

$ npm start

Webpack は React アプリをビルドし、http://localhost:3000 で起動します。

次に、ユーザーが送信したメッセージを永続的に保存するために使用する HarperDB データベースを設定しましょう。

HarperDB のセットアップ方法

まず、HarperDB でアカウントを作成します。

次に、新しい HarperDB クラウドインスタンスを作成します。

クラウドインスタンスを選択すると、設定が楽になるのでおすすめです。

クラウドプロバイダーを選択します (私は AWS を選択しました)。

クラウドインスタンスに名前を付け、インスタンスの認証情報を作成します。

HarperDB には、有難いことに充分な無料枠があるため、このプロジェクトにはそれを選択します。

全ての詳細が正しいことを確認してから、インスタンスを作成します。

インスタンスの立ち上げには数分かかるので、早速最初の React コンポーネントを作成してみましょう！

「チャットルームに参加する」ページ作成方法

私たちのホームページは最終的には次のようになる予定です。

ユーザーはユーザー名を入力し、ドロップダウンからチャットルームを選択して、Join Room (ルームに参加) をクリックします。すると、ユーザーはチャットルームのページへ移動します。

ということで、早速このホームページを作ってみましょう。

1. HTML フォームの作成とスタイルの追加方法

新しいファイル、src/pages/home/index.js を作成します。

CSS モジュールを使用してアプリに基本的なスタイルを追加するため、新しいファイル src/pages/home/styles.module.css を作成します。

ディレクトリの構成は次のようになります。

次に、基本的な HTML のフォームを作成しましょう。

// client/src/pages/home/index.js

import styles from './styles.module.css';

const Home = () => {
  return (
    <div className={styles.container}>
      <div className={styles.formContainer}>
        <h1>{`<>DevRooms</>`}</h1>
        <input className={styles.input} placeholder='Username...' />

        <select className={styles.input}>
          <option>-- Select Room --</option>
          <option value='javascript'>JavaScript</option>
          <option value='node'>Node</option>
          <option value='express'>Express</option>
          <option value='react'>React</option>
        </select>

        <button className='btn btn-secondary'>Join Room</button>
      </div>
    </div>
  );
};

export default Home;

上では、ユーザー名を取得するための単純なテキスト入力と、ユーザーが参加するチャットルームを選択するためのいくつかのデフォルトオプションを含む select ドロップダウンがあります。

このコンポーネントを App.js にインポートし、react-router-dom パッケージを使用してコンポーネントのルートを設定します。これはホームページとなるため、パスは単に「/」になります。

// client/src/App.js

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/home';

function App() {
  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route path='/' element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

次に、アプリの見栄えを良くするためにいくつか基本のスタイルを追加していきます。

/* client/src/App.css */

html * {
  font-family: Arial;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(63, 73, 204);
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
.btn {
  padding: 14px 14px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
}
.btn-outline {
  color: rgb(153, 217, 234);
  border: 1px solid rgb(153, 217, 234);
  background: rgb(63, 73, 204);
}
.btn-primary {
  background: rgb(153, 217, 234);
  color: rgb(0, 24, 111);
}
.btn-secondary {
  background: rgb(0, 24, 111);
  color: #fff;
}

ホームページコンポーネントに固有のスタイルも追加していきます。

/* client/src/pages/home/styles.module.css */

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(63, 73, 204);
}
.formContainer {
  width: 400px;
  margin: 0 auto 0 auto;
  padding: 32px;
  background: lightblue;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.input {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid rgb(63, 73, 204);
  font-size: 0.9rem;
}
.input option {
  margin-top: 20px;
}

また、スタイル属性を追加して、「ルームに参加」ボタンを全幅にしてみましょう。

// client/src/pages/home/index.js

<button className='btn btn-secondary' style={{ width: '100%' }}>Join Room</button>

なかなか良くなってきましたね。

2. ルーム参加フォームに機能を追加する方法

基本的なフォームとスタイルができたので、次に機能を追加して行きたいと思います。

ユーザーが「ルームに参加」ボタンをクリックしたときに起きて欲しい事項を、以下にまとめました。

1. ユーザー名と部屋のフィールドが入力されていることを確認する。
2. 確認できたら、ソケットイベントをサーバーに送信する。
3. ユーザーをチャットページ (後で作成予定) にリダイレクトする。

username と room の値を保存する state の作成が必要です。また、ソケットインスタンスの作成も必要です。

これらの state をホームコンポーネント内で直接作成することもできますが、チャットページもユーザー名、ルーム、ソケットにアクセスする必要があります。そこで、state を App.js に引き上げ、そこでこれらの変数をホームページコンポーネントとチャットページコンポーネントの両方に渡します。

なのでまず、App.js 内で state の作成とソケットの設定をし、これらの変数を props として <Home /> コンポーネントに渡しましょう。<Home /> から state の値を更新できるように、state の set 関数も渡します。

// client/src/App.js

import './App.css';
import { useState } from 'react'; // Add this
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client'; // Add this
import Home from './pages/home';

const socket = io.connect('http://localhost:4000'); // Add this -- our server will run on port 4000, so we connect to it from here

function App() {
  const [username, setUsername] = useState(''); // Add this
  const [room, setRoom] = useState(''); // Add this

  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route
            path='/'
            element={
              <Home
                username={username} // Add this
                setUsername={setUsername} // Add this
                room={room} // Add this
                setRoom={setRoom} // Add this
                socket={socket} // Add this
              />
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

これで、Home コンポーネント内でもこれらの props にアクセスできるようになりました。以下のように、分割代入 (デストラクチャリング) を使って、props にアクセスします。

// client/src/pages/home/index.js

import styles from './style.module.css';

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    // ...
  );
};

export default Home;

ユーザーがユーザー名を入力するか、チャットルームを選択したとき、ユーザー名とルームの state を更新する必要があります。

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    <div className={styles.container}>
      // ...
        <input
          className={styles.input}
          placeholder='Username...'
          onChange={(e) => setUsername(e.target.value)} // Add this
        />

        <select
          className={styles.input}
          onChange={(e) => setRoom(e.target.value)} // Add this
        >
         // ...
        </select>

        // ...
    </div>
  );
};

export default Home;

ユーザーが入力したデータを取得しているので、ユーザーが「ルームに参加」ボタンをクリックしたときのコールバック関数、joinRoom() を作成できます。

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  
  // Add this
  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }
  };

  return (
    <div className={styles.container}>
      // ...
      
        <button
          className='btn btn-secondary'
          style={{ width: '100%' }}
          onClick={joinRoom} // Add this
        >
          Join Room
        </button>
      // ...
    </div>
  );
};

export default Home;

上では、ユーザーがボタンをクリックすると、ユーザーのユーザーネームと選択したルームを含むオブジェクトとともに、join_room というソケットイベントが発行されます。このイベントはその後サーバーに聞き取りされます。

ホームページコンポーネントを完成するには、ユーザーを /chat ページに誘導するリダイレクトロジックを joinRoom() 関数の最後に追加する必要があります。

// client/src/pages/home/index.js

// ...
import { useNavigate } from 'react-router-dom'; // Add this

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  const navigate = useNavigate(); // Add this

  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }

    // Redirect to /chat
    navigate('/chat', { replace: true }); // Add this
  };

 // ...

テストしてみましょう: ユーザー名を入力してルームを選択し、[ルームに参加] をクリックします。現在は空のページですが、http://localhost:3000/chat というルートに転送されるはずです。

フロントエンドのチャットページを作成する前に、まずは少しサーバーの立ち上げをしてみましょう。

サーバーの設定方法

サーバー側は、イベントリスナーを使ってフロントエンドで発生したソケットイベントの通知を待ちます。現在、React に発生しているイベントは join_room のみなので、まずはこのイベントリスナーを追加します。

ただその前に、サーバーの依存関係をインストールし、サーバーを起動して実行する必要があります。

1. サーバーの依存関係をインストールする方法

新しいターミナルを開き (VS コード: [ターミナル] -> [新しいターミナル])、​​ディレクトリをサーバーフォルダーに変更し、package.json ファイルを初期化し、次の依存関係をインストールします。

$ cd server
$ npm init -y
$ npm i axios cors express socket.io dotenv

• Axios は、API へのリクエストを簡易化するために一般的に使用されているパッケージです。
• Cors を使用すると、クライアントは他のオリジンにもリクエストを送ることができます。これは socket.io が適切に作動するために不可欠です。CORS についてまだ聞いたことがない方は、ぜひ「CORS とは」を参照してみてください。
• Express は、少ないコードでより簡単にバックエンドを作成できる NodeJS のフレームワークです。
• Socket.io は、標準の HTTP リクエストでは実現不可能な、クライアントとサーバーのリアルタイム通信を可能にするライブラリです。
• Dotenv は、秘密キーとパスワードを安全に保管し、必要に応じてコードに読み込むことができるようにするモジュールです。

また、nodemon を開発依存関係としてインストールすることで、コードを変更するたびにサーバーを再起動する必要がなく、時間と労力を節約することができます。

$ npm i -D nodemon

2. サーバーを起動する方法

サーバーディレクトリのルートに index.js というフォルダーを作成し、次のコードを追加してサーバーを起動して実行します。

// server/index.js

const express = require('express');
const app = express();
const http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

server.listen(4000, () => 'Server is running on port 4000');

サーバー上の package.json ファイルを開き、開発で nodemon を使用できるようにするスクリプトを追加します。

{
  ...
  "scripts": {
    "dev": "nodemon index.js"
  },
  ...
}

次に、下記のコマンドでサーバーを起動しましょう。

$ npm run dev

GET リクエストハンドラーを追加することで、サーバーが正しく実行されていることをすぐに確認することができます。

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

// Add this
app.get('/', (req, res) => {
  res.send('Hello world');
});

server.listen(4000, () => 'Server is running on port 3000');

http://localhost:4000/ に移動します。

サーバーは問題なく稼働しています。今度は、サーバー側の Socket.io の作業を行います。

サーバー上で最初の Socket.io イベントリスナーを作成する方法

クライアント側から、join_room イベントを送りましたね。これからそのイベント情報をサーバー側で聞き取り、ユーザーをソケットルームに追加していきます。

しかしまず、クライアントが Socket.io のクライアント経由でサーバーに接続したかを確認する必要があります。

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');
const { Server } = require('socket.io'); // Add this

app.use(cors()); // Add cors middleware

const server = http.createServer(app); // Add this

// Add this
// Create an io server and allow for CORS from http://localhost:3000 with GET and POST methods
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST'],
  },
});

// Add this
// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // We can write our socket event listeners in here...
});

server.listen(4000, () => 'Server is running on port 3000');

これで、クライアントがフロントエンドから接続すると、バックエンドが接続イベントをキャプチャし、その特定のクライアントの一意のソケット ID を使用して User connected とログに記録します。

一度、サーバーがクライアントからの接続イベントをキャプチャしているかどうかをテストしてみましょう。http://localhost:3000/ にある React アプリに移動し、ページを更新してみてください。

サーバー端末コンソールに次のログが表示されているはずです。

見事、クライアントが socket.io 経由でサーバーに接続しました。これでクライアントとサーバーがリアルタイムで通信できるようになりました。

Socket.io のルームの仕組み

Socket.io ドキュメントより:

「ルームとは、ソケットが出入り (join と leave) できる任意のチャネルです。クライアントのサブセットにイベントをブロードキャストするために使用できます。」

したがって、ユーザーをルームに参加させると、サーバーはそのルーム内のすべてのユーザーにメッセージを送信できるため、ユーザーはリアルタイムで相互にメッセージを送信できるようになるのです。素晴らしい！

ユーザーを Socket.io ルームに参加させる方法

ユーザーが Socket.io を介して接続したら、クライアントから通知されたイベントを聞き取るために、サーバー上でソケットイベントリスナーを追加することができます。また、サーバー上でイベント情報を発行し、クライアント上で聞き取ることもできます。

早速 join_room イベントの発生を待ち、データ (ユーザー名とルーム) をキャプチャして、ユーザーをソケットルームに追加しましょう。

// server/index.js

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add this
  // Add a user to a room
  socket.on('join_room', (data) => {
    const { username, room } = data; // Data sent from client when join_room event emitted
    socket.join(room); // Join the user to a socket room
  });
});

ルーム内のユーザーにメッセージを送信する方法

まずは、参加したばかりのユーザー以外のルーム内すべてのユーザーにメッセージを送信して、新しいユーザーが参加したことを通知しましょう。

// server/index.js

const CHAT_BOT = 'ChatBot'; // Add this
// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add a user to a room
  socket.on('join_room', (data) => {
    const { username, room } = data; // Data sent from client when join_room event emitted
    socket.join(room); // Join the user to a socket room

    // Add this
    let __createdtime__ = Date.now(); // Current timestamp
    // Send message to all users currently in the room, apart from the user that just joined
    socket.to(room).emit('receive_message', {
      message: `${username} has joined the chat room`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

上記では、現在のユーザーが参加したばかりのルーム内にいる全クライアントに、receive_message イベントを発行しています。そしてそのイベントには、メッセージ本文、メッセージを送信したユーザー名、メッセージの送信時刻などのデータが含まれています。

少し後で React アプリケーションにイベントリスナーを追加して、このイベントをキャプチャし、画面にメッセージを出力します。

新しく参加したユーザーにも、ウェルカムメッセージを送信しましょう。

// server/index.js

io.on('connection', (socket) => {
  // ...

    // Add this
    // Send welcome msg to user that just joined chat only
    socket.emit('receive_message', {
      message: `Welcome ${username}`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

ユーザーを Socket.io のルームに追加すると、Socket.io は各ユーザーのソケット ID のみを保存します。しかし今後、ルーム名だけでなく、ルームにいる全員のユーザー名も必要になってきます。そこで、これらのデータをサーバー上の変数に保存しておきましょう。

// server/index.js

// ...

const CHAT_BOT = 'ChatBot';
// Add this
let chatRoom = ''; // E.g. javascript, node,...
let allUsers = []; // All users in current chat room

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    // ...
    
    // Add this
    // Save the new user to the room
    chatRoom = room;
    allUsers.push({ id: socket.id, username, room });
    chatRoomUsers = allUsers.filter((user) => user.room === room);
    socket.to(room).emit('chatroom_users', chatRoomUsers);
    socket.emit('chatroom_users', chatRoomUsers);
  });
});

上記では、chatroom_users イベントを介して全ユーザー (chatRoomUsers) の配列もクライアントに送り返しています。それによって、フロントエンドでルーム内のすべてのユーザー名をリストすることができるようになります。

サーバーにもっとコードを追加する前に、フロントエンドに戻ってチャットページを作成しましょう。そうすることによって、receive_message イベントをフロントエンドできちんと受信できて​​いるかどうかをテストすることができます。

チャットページを作成する方法

クライアントフォルダーに、2 つの新しいファイルを作成します。

1. src/pages/chat/index.js
2. src/pages/chat/styles.module.css

まずはチャットページとコンポーネントで使用するスタイルをいくつか追加しましょう。

/* client/src/pages/chat/styles.module.css */

.chatContainer {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 20px;
}

/* Room and users component */
.roomAndUsersColumn {
  border-right: 1px solid #dfdfdf;
}
.roomTitle {
  margin-bottom: 60px;
  text-transform: uppercase;
  font-size: 2rem;
  color: #fff;
}
.usersTitle {
  font-size: 1.2rem;
  color: #fff;
}
.usersList {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 60px;
  color: rgb(153, 217, 234);
}
.usersList li {
  margin-bottom: 12px;
}

/* Messages */
.messagesColumn {
  height: 85vh;
  overflow: auto;
  padding: 10px 10px 10px 40px;
}
.message {
  background: rgb(0, 24, 111);
  border-radius: 6px;
  margin-bottom: 24px;
  max-width: 600px;
  padding: 12px;
}
.msgMeta {
  color: rgb(153, 217, 234);
  font-size: 0.75rem;
}
.msgText {
  color: #fff;
}

/* Message input and button */
.sendMessageContainer {
  padding: 16px 20px 20px 16px;
}
.messageInput {
  padding: 14px;
  margin-right: 16px;
  width: 60%;
  border-radius: 6px;
  border: 1px solid rgb(153, 217, 234);
  font-size: 0.9rem;
}

追加できたら、チャットページが下のようになるかを見てみましょう。

このページのすべてのコードとロジックを 1 つのファイルにまとめてしまうと、読みにくく管理が難しくなってしまうため、せっかく便利なフロントエンドフレームワーク (React) を使用しているので、このページをコンポーネントに分けます。

チャットページのコンポーネント:

A: チャットルーム名、そのチャットルーム内にいるユーザーリスト、およびユーザーをチャットルームから削除する「退出」ボタンが含まれる部分。

B: 送信されたメッセージ。最初のレンダリング時に、そのチャットルームで送信された最新 100 件のメッセージがデータベースから取得され、ユーザーに表示されます。

C: メッセージを入力して送信するための入力フィールドとボタン。

まずはコンポーネント B を作成して、ユーザーにメッセージを表示できるようにします。

メッセージコンポーネント (B) を作成する方法

新しいファイル src/pages/chat/messages.js を作成し、次のコードを追加してください。

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  // Runs whenever a socket event is recieved from the server
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

	// Remove event listener on component unmount
    return () => socket.off('receive_message');
  }, [socket]);

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    <div className={styles.messagesColumn}>
      {messagesRecieved.map((msg, i) => (
        <div className={styles.message} key={i}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span className={styles.msgMeta}>{msg.username}</span>
            <span className={styles.msgMeta}>
              {formatDateFromTimestamp(msg.__createdtime__)}
            </span>
          </div>
          <p className={styles.msgText}>{msg.message}</p>
          <br />
        </div>
      ))}
    </div>
  );
};

export default Messages;

上記には、ソケットイベントが受信されるたびに実行される useEffect フックがあります。次に、receive_message というイベントリスナーに渡されたメッセージデータを取得します。そこから、messagesReceived の state を設定します。これは、メッセージ、送信者のユーザー名、メッセージが送信された日付を含むメッセージオブジェクトの配列です。

今作ったこのメッセージコンポーネントをチャットページにインポートし、App.js でチャットページのルートを作成しましょう。

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';

const Chat = ({ socket }) => {
  return (
    <div className={styles.chatContainer}>
      <div>
        <MessagesReceived socket={socket} />
      </div>
    </div>
  );
};

export default Chat;

// client/src/App.js

import './App.css';
import { useState } from 'react';
import Home from './pages/home';
import Chat from './pages/chat';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client';

const socket = io.connect('http://localhost:4000');

function App() {
  const [username, setUsername] = useState('');
  const [room, setRoom] = useState('');

  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route
            path='/'
            element={
              <Home
                username={username}
                setUsername={setUsername}
                room={room}
                setRoom={setRoom}
                socket={socket}
              />
            }
          />
          {/* Add this */}
          <Route
            path='/chat'
            element={<Chat username={username} room={room} socket={socket} />}
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

一度テストしてみましょう。ホームページにアクセスしてルームに参加してみてください。

チャットページに移動し、ChatBot からウェルカムメッセージを受け取ります。

ユーザーは受信したメッセージを確認できるようになりました。上出来です！

次は、メッセージを永続的に保存できるようにデータベースを設定します。

HarperDB でスキーマとテーブルを作成する方法

HarperDB のダッシュボードに戻り、「browse (参照)」をクリックします。次に、realtime_chat_app という新しいスキーマを作成します。スキーマというのは、単に複数のテーブルをまとめたもののことです。

そのスキーマ内に、ハッシュ属性が id の messages というテーブルを作成します。

これで、メッセージを保存する場所ができたので、SendMessage コンポーネントを作成しましょう。

メッセージ送信コンポーネント (C) の作成方法

ファイル src/pages/chat/send-message.js を作成し、次のコードを追加してください。

// client/src/pages/chat/send-message.js

import styles from './styles.module.css';
import React, { useState } from 'react';

const SendMessage = ({ socket, username, room }) => {
  const [message, setMessage] = useState('');

  const sendMessage = () => {
    if (message !== '') {
      const __createdtime__ = Date.now();
      // Send message to server. We can't specify who we send the message to from the frontend. We can only send to server. Server can then send message to rest of users in room
      socket.emit('send_message', { username, room, message, __createdtime__ });
      setMessage('');
    }
  };

  return (
    <div className={styles.sendMessageContainer}>
      <input
        className={styles.messageInput}
        placeholder='Message...'
        onChange={(e) => setMessage(e.target.value)}
        value={message}
      />
      <button className='btn btn-primary' onClick={sendMessage}>
        Send Message
      </button>
    </div>
  );
};

export default SendMessage;

上では、ユーザーが「メッセージの送信」というボタンをクリックすると、send_message のソケットイベントがメッセージオブジェクトとともにサーバーに送信されます。後ほどこのイベントをサーバー上で処理します。

SendMessage をチャットページにインポートします。

// src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';
import SendMessage from './send-message';

const Chat = ({ username, room, socket }) => {
  return (
    <div className={styles.chatContainer}>
      <div>
        <MessagesReceived socket={socket} />
        <SendMessage socket={socket} username={username} room={room} />
      </div>
    </div>
  );
};

export default Chat;

チャットページは次のようになります。

次に、データベースとのやり取りを開始できるように、HarperDB の環境変数を設定する必要があります。

HarperDB の環境変数を設定する方法

HarperDB にメッセージを保存できるようにするには、HarperDB インスタンスの URL と API パスワードが必要です。

HarperDB ダッシュボードでインスタンスをクリックし、「config (設定)」に移動します。インスタンス URL とインスタンス API 認証ヘッダー (データベースへのあらゆるリクエストを許可する「super_user」パスワード) が表示されます。絶対に誰とも共有しないでください！

これらの変数を .env ファイルに保存します。警告: .env ファイルは絶対に GitHub にプッシュしないでください。このファイルは一般に公開すべきものではありません。これらの変数はバックグラウンドでサーバー経由で読み込みされます。

次のファイルを作成し、あなたの HarperDB の URL とパスワードを追加します。

// server/.env

HARPERDB_URL="<your url goes here>"
HARPERDB_PW="Basic <your password here>"

また、.env が node_modules フォルダーとともに GitHub にプッシュされるのを防ぐための .gitignore ファイルも作成します。

// server/.gitignore

.env
node_modules

注意: Git や GitHub をうまく使いこなすことは全ての開発者にとって必須です。もし Git の流儀がまだ曖昧な方は、私の Git のワークフローに関する記事を見てみてください。

または、同じ Git コマンドをいつも検索している方や、コマンドを検索、修正、コピー/ ペーストする簡単な方法をお探しの方はぜひ、私が作った人気 Git コマンドチートシートの PDF 版と Git チートシートポスター版をチェックしてみてください。

最後に、次のコードをメインサーバーファイルの先頭に追加して、環境変数をサーバーに読み込みましょう。

// server/index.js

require('dotenv').config();
console.log(process.env.HARPERDB_URL); // remove this after you've confirmed it working
const express = require('express');
// ...

Socket.io を利用してユーザーが相互にメッセージを送信できるようにする方法

サーバー上で send_message のイベントを聞き取り、ルーム内のすべてのユーザーにメッセージを送信します。

// server/index.js

const express = require('express');
// ...
const harperSaveMessage = require('./services/harper-save-message'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    
  // ...

  // Add this
  socket.on('send_message', (data) => {
    const { message, username, room, __createdtime__ } = data;
    io.in(room).emit('receive_message', data); // Send to all users in room, including sender
    harperSaveMessage(message, username, room, __createdtime__) // Save message in db
      .then((response) => console.log(response))
      .catch((err) => console.log(err));
  });
});

server.listen(4000, () => 'Server is running on port 3000');

次に、harperSaveMessage という関数を作成する必要があります。server/services/harper-save-message.js に新しいファイルを作成し、以下のコードを追加します。

// server/services/harper-save-message.js

var axios = require('axios');

function harperSaveMessage(message, username, room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  var data = JSON.stringify({
    operation: 'insert',
    schema: 'realtime_chat_app',
    table: 'messages',
    records: [
      {
        message,
        username,
        room,
      },
    ],
  });

  var config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperSaveMessage;

上記では、データの保存には少し時間がかかる場合があるため、データが正常に保存された場合は解決され、失敗した場合は拒否される Promise を返しています。

上記のコードをどこで入手したか気になりましたか？HarperDB のスタジオダッシュボードには、便利な「コードサンプル」というセクションが用意されており、それを使うことによって作業がはるかに簡単になります。

テストの時間です！ユーザーとしてルームに参加し、メッセージを送信します。次に、HarperDB に移動し、「browse (参照)」をクリックして、「メッセージ」テーブルをクリックします。データベースにメッセージが表示されているはずです。

素晴らしい😎これができたら次は、ユーザーがチャットルームに参加したときに、ルーム内で送信された最新 100 件のメッセージが読み込まれるようになれば最高だと思いませんか？

HarperDB からメッセージを取得する方法

サーバー上で、特定のチャットルームで送信された最新 100 件のメッセージを取得する関数を作成しましょう (HarperDB では SQL クエリも使用できるんですよ👌):

// server/services/harper-get-messages.js

let axios = require('axios');

function harperGetMessages(room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  let data = JSON.stringify({
    operation: 'sql',
    sql: `SELECT * FROM realtime_chat_app.messages WHERE room = '${room}' LIMIT 100`,
  });

  let config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperGetMessages;

ユーザーがチャットルームに参加するたびにこの関数を呼び出します。

// server/index.js

// ...
const harperSaveMessage = require('./services/harper-save-message');
const harperGetMessages = require('./services/harper-get-messages'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add a user to a room
  socket.on('join_room', (data) => {
      
    // ...

    // Add this
    // Get last 100 messages sent in the chat room
    harperGetMessages(room)
      .then((last100Messages) => {
        // console.log('latest messages', last100Messages);
        socket.emit('last_100_messages', last100Messages);
      })
      .catch((err) => console.log(err));
  });

 // ...

上記では、メッセージが正常にフェッチされると、last_100_messages という Socket.io イベントが発行されます。そうすると、フロントエンドでこのイベントを聞き取ります。

クライアントで最新メッセージ 100 件を表示する方法

以下では、last_100_messages イベントのための、Socket.io イベントリスナーを含む useEffect フックを追加します。そこから、メッセージは日付順に並べ替えられ、最新のメッセージが一番下に表示され、messagesReceived の state が更新されます。

messagesReceived が更新されると、useEffect が実行され、messageColumn div が最新のメッセージまでスクロールされます。これにより、アプリのユーザーエクスペリエンスが向上します👍。

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect, useRef } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  const messagesColumnRef = useRef(null); // Add this

  // Runs whenever a socket event is recieved from the server
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Remove event listener on component unmount
    return () => socket.off('receive_message');
  }, [socket]);

  // Add this
  useEffect(() => {
    // Last 100 messages sent in the chat room (fetched from the db in backend)
    socket.on('last_100_messages', (last100Messages) => {
      console.log('Last 100 messages:', JSON.parse(last100Messages));
      last100Messages = JSON.parse(last100Messages);
      // Sort these messages by __createdtime__
      last100Messages = sortMessagesByDate(last100Messages);
      setMessagesReceived((state) => [...last100Messages, ...state]);
    });

    return () => socket.off('last_100_messages');
  }, [socket]);

  // Add this
  // Scroll to the most recent message
  useEffect(() => {
    messagesColumnRef.current.scrollTop =
      messagesColumnRef.current.scrollHeight;
  }, [messagesRecieved]);

  // Add this
  function sortMessagesByDate(messages) {
    return messages.sort(
      (a, b) => parseInt(a.__createdtime__) - parseInt(b.__createdtime__)
    );
  }

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    // Add ref to this div
    <div className={styles.messagesColumn} ref={messagesColumnRef}>
      {messagesRecieved.map((msg, i) => (
        <div className={styles.message} key={i}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span className={styles.msgMeta}>{msg.username}</span>
            <span className={styles.msgMeta}>
              {formatDateFromTimestamp(msg.__createdtime__)}
            </span>
          </div>
          <p className={styles.msgText}>{msg.message}</p>
          <br />
        </div>
      ))}
    </div>
  );
};

export default Messages;

チャットルームとユーザー (A) の表示方法

コンポーネント B と C の作成が完了したので、最後に A を作成しましょう。

サーバー上では、誰かユーザーがチャットルームに参加すると、ルーム内全ユーザーをそのルーム内の全クライアントに送る chatroom_users イベントが発行されます。RoomAndUsers というコンポーネントでそのイベントの聞き取りをしてみましょう。

下のコードには、「Leave (退室)」ボタンもあり、これを押すとサーバーに leave_room イベントが発行されます。その後、そのユーザーをホームページへリダイレクトします。

// client/src/pages/chat/room-and-users.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const RoomAndUsers = ({ socket, username, room }) => {
  const [roomUsers, setRoomUsers] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    socket.on('chatroom_users', (data) => {
      console.log(data);
      setRoomUsers(data);
    });

    return () => socket.off('chatroom_users');
  }, [socket]);

  const leaveRoom = () => {
    const __createdtime__ = Date.now();
    socket.emit('leave_room', { username, room, __createdtime__ });
    // Redirect to home page
    navigate('/', { replace: true });
  };

  return (
    <div className={styles.roomAndUsersColumn}>
      <h2 className={styles.roomTitle}>{room}</h2>

      <div>
        {roomUsers.length > 0 && <h5 className={styles.usersTitle}>Users:</h5>}
        <ul className={styles.usersList}>
          {roomUsers.map((user) => (
            <li
              style={{
                fontWeight: `${user.username === username ? 'bold' : 'normal'}`,
              }}
              key={user.id}
            >
              {user.username}
            </li>
          ))}
        </ul>
      </div>

      <button className='btn btn-outline' onClick={leaveRoom}>
        Leave
      </button>
    </div>
  );
};

export default RoomAndUsers;

このコンポーネントをチャットページにインポートしましょう。

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import RoomAndUsersColumn from './room-and-users'; // Add this
import SendMessage from './send-message';
import MessagesReceived from './messages';

const Chat = ({ username, room, socket }) => {
  return (
    <div className={styles.chatContainer}>
      {/* Add this */}
      <RoomAndUsersColumn socket={socket} username={username} room={room} />

      <div>
        <MessagesReceived socket={socket} />
        <SendMessage socket={socket} username={username} room={room} />
      </div>
    </div>
  );
};

export default Chat;

Socket.io のルームからユーザーを削除する方法

Socket.io には、Socket.io ルームからユーザーを削除するために使用できる leave() メソッドが用意されています。また、サーバーメモリー上の配列でユーザー情報を管理しているため、この配列からもユーザーを削除します。

// server/index.js

const leaveRoom = require('./utils/leave-room'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    
  // ...

  // Add this
  socket.on('leave_room', (data) => {
    const { username, room } = data;
    socket.leave(room);
    const __createdtime__ = Date.now();
    // Remove user from memory
    allUsers = leaveRoom(socket.id, allUsers);
    socket.to(room).emit('chatroom_users', allUsers);
    socket.to(room).emit('receive_message', {
      username: CHAT_BOT,
      message: `${username} has left the chat`,
      __createdtime__,
    });
    console.log(`${username} has left the chat`);
  });
});

server.listen(4000, () => 'Server is running on port 3000');

次に、leaveRoom() という関数を作成する必要があります。

// server/utils/leave-room.js

function leaveRoom(userID, chatRoomUsers) {
  return chatRoomUsers.filter((user) => user.id != userID);
}

module.exports = leaveRoom;

なぜこの短い関数を別の utils フォルダーに置いておく必要があるのでしょうか。それは、後で再び使用することになるので、同じことを繰り返さなくてもいいようにです。(コードを DRY に保つことができます。)

さあ、テストしてみましょう。2 つのブラウザーを並べて開き、両方のブラウザーでチャットに参加してみてください。

次に、ブラウザー 2 の Leave (退室) ボタンをクリックします。

ユーザーはチャットから削除され、他のユーザーに、退席したことを通知するメッセージが送信されます。ナイス！

Socket.io 接続を切断するイベントリスナーを追加する方法

インターネットの接続が切断された場合など、ユーザーが何らかの理由でサーバーから切断された場合はどうなるのでしょうか？Socket.io にはそのような時のために、ビルトインの切断イベントリスナーがあります。これをサーバーに追加して、接続の切断時にユーザーをメモリから削除します。

// server/index.js

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    
  // ...
    
  // Add this
  socket.on('disconnect', () => {
    console.log('User disconnected from the chat');
    const user = allUsers.find((user) => user.id == socket.id);
    if (user?.username) {
      allUsers = leaveRoom(socket.id, allUsers);
      socket.to(chatRoom).emit('chatroom_users', allUsers);
      socket.to(chatRoom).emit('receive_message', {
        message: `${user.username} has disconnected from the chat.`,
      });
    }
  });
});

server.listen(4000, () => 'Server is running on port 3000');

これで、React フロントエンド、Node/Express バックエンド、HarperDB データベースを備えたフルスタックのリアルタイムチャットアプリケーションが構築されました。お見事！

次回は、ユーザーが HarperDB 内で独自の API エンドポイントを定義できるようにする HarperDB のカスタム関数をご紹介する予定です。こうすることで、アプリケーション全体を 1 か所でまとめて構築できます。HarperDB でスタックを縮小 (シンプル化) する例は、この記事でご覧ください。

挑戦状💪

チャットページでページを更新すると、ユーザーのユーザーネームとルームが失われてしまいます。ユーザーがページを更新してもこの情報が失われないようにする方法を探し出してみてください。ヒント: ローカルストレージが役立つかもしれません！

最後まで読んでいただきありがとうございます！

この記事が少しでもお役に立てたのであれば、ぜひ以下もお願いします。

• 私の YouTube チャンネルに登録。React/NextJS/Node/Express に関する詳細なチュートリアルとプロジェクトビデオを投稿していく予定です。
• Twitter でフォロー。私のフリーランス活動、趣味のプロジェクトや、最近学んでいることについてツイートしています。
• 私の Gumroad ストアをチェックする。そこでは、便利で人気な早見表やポスターを作成していて、執筆現在までに 8000 ダウンロードを達成しています。
• 私の Web 開発ブログをチェックする。

localStorage は、JavaScript を用いて作られたサイトやアプリが、有効期限なしでウェブブラウザにキー・バリュー形式のデータを保存するためのウェブストレージオブジェクトです。

つまり、保存されたデータはページを更新したり、ブラウザを再起動しても残ったままです。これは、ブラウザに保存されたデータは、ブラウザウィンドウが閉じられても残ることを意味します。

要するに、localStorage を使うことで、開発者はブラウザ内にデータを保存したり取得したりできるようになります。

しかし、localStorage をプロジェクトのデータベースとして使用するのは良い方法ではありません。

localStorage は、アプリケーションにダークモード機能を追加したり、ToDo のデータを保存したり、ユーザーのフォーム入力値を永続化したり、その他多くの場面で頻繁に使用されます。

今回は、React Hooks で localStorage を使用し、データを簡単に保存・取得する方法を見ていきましょう。

React Hooks を使って localStorage へデータを保存・取得する方法についてのインタラクティブな Scrim:

(訳注: Scrimba というサイトの機能で、インタラクティブなエディタと動画がセットになっています。)

React Hooks とは

React Hooks は、コンポーネントに機能を追加するために React から import する JavaScript の関数です。

Reat Hooks を使うことで、関数コンポーネント内で state やライフサイクルメソッドを使うことができます。また、既存のコードでも動作するため、導入も簡単です。

React Hooks を用いて localStorage を使用するには、2 つの React Hooks を使います:

• useState() – アプリケーションの state は、いつか必ず変化します。useState() は、初期 state (変数やオブジェクト、あるいはその他のデータ型) を 1 つの引数として受け取り、現在の state とその state の更新関数を返します。
• useEffect() – この React Hooks は、デフォルトでは最初のレンダリングの後、state が変更されるたびに実行されます。名前が示すように、state が変更されるたびに副作用 (effect) を実行するために使用されます。この React Hooks は、イベントリスナーを設定したり、API からデータを取得したり、コンポーネントが DOM から削除される前にイベントリスナーを削除したりするのに最適です。

React で localStorage を操作する方法

ブラウザの localStorage にアクセスするためのメソッドは 5 つあります:

• setItem() : キー・バリュー形式のデータを localStorage に保存します。
• getItem() : データを保存した時のキーを指定して localStorage から値を取得します。
• removeItem() : データを保存した時のキーを指定して localStorage から値を削除します。
• clear() : localStorage に保存されている全てのデータを削除します。
• key(index): localStorage に保存されている、指定された index 番号のキー名を返します。

今回は、最も使用頻度の高い setItem() と getItem() に絞って解説していきます。

setItem() の使い方

localStorage にキーを設定すると、データを格納できます。このデータの値は、テキスト、整数、オブジェクト、配列など、どのようなデータ型でも構いません。

localStorage にデータを格納する際、そのデータを JSON.stringify() を使って文字列へ変換する必要があることを忘れないでください。

const [items, setItems] = useState([]);

useEffect(() => {
  localStorage.setItem('items', JSON.stringify(items));
}, [items]);

上記のコードでは、まず空配列の state を作成 (配列以外のデータ型でも良い) しています。次に、useEffect() を使うことによって state が更新されたときに localStorage へデータを追加しています。これは useEffect() の第二引数に state を渡すことで実現しています。

基本的には、以下のように指定することで localStorage にキー・バリュー形式のデータを追加できます:

localStorage.setItem('items', JSON.stringify(items));

つまり、先ほどのコードではキーに 'items' という名前を付け、それに値を代入しています。ただし、まず追加するデータが JSON 文字列であることを確認する必要がありましたね。

JSON.stringify() を使用して、JSON オブジェクトを文字列である JSON テキストに変換し、ウェブサーバーに送信できるようにします。

getItem() の使い方

このメソッドは localStorage からオブジェクトを取得します。React では他の方法もありますが、ここでは useEffect() を使用します。

useEffect() は、最初のレンダリング時にすべてのアイテムを取得してくれます。つまり、コンポーネントがマウントまたは再レンダリングするたびに、localStorage からすべてのデータを取得します。

useEffect() の第二引数を空にしているのはこのためです。

const [items, setItems] = useState([]);

useEffect(() => {
  const items = JSON.parse(localStorage.getItem('items'));
  if (items) {
   setItems(items);
  }
}, []);

先ほどデータを localStorage に保存した時、データを JSON 文字列に変換したことを思い出してください。つまり、このデータを利用するためには、JSON 文字列を JSON オブジェクトに変換する必要があります。これは、JSON.parse() メソッドで行います。

まとめ

この記事では、React hooks を使って localStorage を使う方法、使うタイミングやどの hooks を使うかについて学びました。

実際にこれがどのように機能するか知りたい方は、localStorage とこれらの Hooks を使用したシンプルな ToDo リストアプリのソースコードを参照してください。

state と props の詳細については、私が書いたこちらの記事で学ぶことができます。また、こちらの content repository から、私が書いた記事の全てを閲覧できます。

オンラインのコード実行プラットフォームを利用すれば、あなたのお気に入りのプログラミング言語でコードを書き、そのコードを同じプラットフォーム上で実行することができます。

自分で作成したプログラム (たとえば、JavaScript で作成されたバイナリ検索プログラム) の出力を確認できると理想的です。

今日は、40 以上の異なるプログラミング言語でコードをコンパイルおよび実行できる CodeRush と呼ばれるオンラインコード実行プラットフォームを構築していきます。

構築するもの

Source Code | Live Demo

以下の機能を備えた多彩なコードエディターを構築します。

• VS Code にも使われているコードエディター (Monaco Editor)。
• 40 を超えるプログラミング言語をサポートし、標準入出力を使用して Web アプリ上のコードをコンパイルできる。
• 利用可能なテーマのリストからエディターのテーマを変更できる。
• 実行されたコードに関する情報 (コードにかかった時間、使用されたメモリ、ステータスなど) を取得できる。

技術スタック

このプロジェクトでは、以下の技術スタックを使用します。

• React.js – フロントエンド用
• TailwindCSS – スタイル用
• Judge0 – コードのコンパイルおよび実行用
• RapidAPI – Judge0 コードの迅速なデプロイ
• Monaco Editor – プロジェクトを支えるコードエディター

プロジェクトの構造

プロジェクトの構造は非常にシンプルで理解しやすくなっています。

• Components: すべてのコンポーネント又は再利用可能なコードスニペットがここにあります。(例: CodeEditorWindow や Landing)
• hooks: ここにすべてのカスタムフックがあります。(キーボードイベントを使用してコードをコンパイルするためのキープレスフックを使用する予定です。)
• lib: すべてのライブラリ関数はここにあります。(ここでテーマを定義する関数を作成します。)
• constants: ドロップダウンの languageOptions や customStyles などのすべての定数がここに入力されます。
• utils: コードの保守に役立つ一般的なユーティリティー関数がここにあります。

アプリケーションの流れ

コードを深く掘り下げる前に、まずアプリケーションの流れと、ゼロからコードを書いていく方法を把握しましょう。

• ユーザーは Web アプリケーションにアクセスし、好みのプログラミング言語 (デフォルトは JavaScript) を選択できます。
• ユーザーがコードの作成を完了すると、コードをコンパイルし、出力ウィンドウで出力、結果を確認できます。
• コード出力ウィンドウには、コードスニペットの成功または失敗が表示されます。すべての情報がコード出力ウィンドウで確認できます。
• ユーザーはコードスニペットにカスタム入力を追加でき、Judge0 (オンラインコンパイラー) はユーザーが指定したカスタム入力を考慮します。
• ユーザーは、実行されたコードに関する関連情報を確認できます。(例: コードのコンパイルと実行に 5 ms かかり、2024 kb のメモリが使用され、ランタイムステータスは成功)

フォルダー構造とアプリケーションの流れについて少し理解できたところで、コードを詳しく見て、すべてがどのように機能するかをみてみましょう。

コードエディターコンポーネントを構築する方法

コードエディターコンポーネントは主に、使用およびカスタマイズできる NPM パッケージ、Monaco Editor で構成されます。

// CodeEditorWindow.js

import React, { useState } from "react";

import Editor from "@monaco-editor/react";

const CodeEditorWindow = ({ onChange, language, code, theme }) => {
  const [value, setValue] = useState(code || "");

  const handleEditorChange = (value) => {
    setValue(value);
    onChange("code", value);
  };

  return (
    <div className="overlay rounded-md overflow-hidden w-full h-full shadow-4xl">
      <Editor
        height="85vh"
        width={`100%`}
        language={language || "javascript"}
        value={value}
        theme={theme}
        defaultValue="// some comment"
        onChange={handleEditorChange}
      />
    </div>
  );
};
export default CodeEditorWindow;

Editor コンポーネントは @monaco-editor/react パッケージから取得されたもので、指定された高さ 85vh でコードエディターを起動できます。

Editor コンポーネントはいくつかの props を受け取ります:

• language: 構文ハイライトやインテリセンスのために必要な、言語を指定する必須項目。
• theme: コードスニペットの色と背景 (チュートリアルの後半で構成します)。
• value: コードエディターに入力される実際のコード値。
• onChange: これは、コードエディターの値が変更されたときにトリガーされます。後で Judge0 API を呼び出してコンパイルできるように、変更された値を状態に保存する必要があります。

エディターは、その親コンポーネントである Landing.js から、onChange、language、code、theme の props を受け取ります。コードエディター内の値が変更されるたびに、親コンポーネントの Landing 内にある onChange ハンドラーが呼び出されます。

ランディングコンポーネントを構築する

ランディングコンポーネントは主に 3 つの部分で構成されています。

• language と theme のドロップダウンコンポーネントを備えた Actions Bar
• Code Editor Window コンポーネント
• Output and Custom Input コンポーネント

// Landing.js

import React, { useEffect, useState } from "react";
import CodeEditorWindow from "./CodeEditorWindow";
import axios from "axios";
import { classnames } from "../utils/general";
import { languageOptions } from "../constants/languageOptions";

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import { defineTheme } from "../lib/defineTheme";
import useKeyPress from "../hooks/useKeyPress";
import Footer from "./Footer";
import OutputWindow from "./OutputWindow";
import CustomInput from "./CustomInput";
import OutputDetails from "./OutputDetails";
import ThemeDropdown from "./ThemeDropdown";
import LanguagesDropdown from "./LanguagesDropdown";

const javascriptDefault = `// some comment`;

const Landing = () => {
  const [code, setCode] = useState(javascriptDefault);
  const [customInput, setCustomInput] = useState("");
  const [outputDetails, setOutputDetails] = useState(null);
  const [processing, setProcessing] = useState(null);
  const [theme, setTheme] = useState("cobalt");
  const [language, setLanguage] = useState(languageOptions[0]);

  const enterPress = useKeyPress("Enter");
  const ctrlPress = useKeyPress("Control");

  const onSelectChange = (sl) => {
    console.log("selected Option...", sl);
    setLanguage(sl);
  };

  useEffect(() => {
    if (enterPress && ctrlPress) {
      console.log("enterPress", enterPress);
      console.log("ctrlPress", ctrlPress);
      handleCompile();
    }
  }, [ctrlPress, enterPress]);
  const onChange = (action, data) => {
    switch (action) {
      case "code": {
        setCode(data);
        break;
      }
      default: {
        console.warn("case not handled!", action, data);
      }
    }
  };
  const handleCompile = () => {
    // We will come to the implementation later in the code
  };

  const checkStatus = async (token) => {
    // We will come to the implementation later in the code
  };

  function handleThemeChange(th) {
    // We will come to the implementation later in the code
  }
  useEffect(() => {
    defineTheme("oceanic-next").then((_) =>
      setTheme({ value: "oceanic-next", label: "Oceanic Next" })
    );
  }, []);

  const showSuccessToast = (msg) => {
    toast.success(msg || `Compiled Successfully!`, {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };
  const showErrorToast = (msg) => {
    toast.error(msg || `Something went wrong! Please try again.`, {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };

  return (
    <>
      <ToastContainer
        position="top-right"
        autoClose={2000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
      <div className="h-4 w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"></div>
      <div className="flex flex-row">
        <div className="px-4 py-2">
          <LanguagesDropdown onSelectChange={onSelectChange} />
        </div>
        <div className="px-4 py-2">
          <ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} />
        </div>
      </div>
      <div className="flex flex-row space-x-4 items-start px-4 py-4">
        <div className="flex flex-col w-full h-full justify-start items-end">
          <CodeEditorWindow
            code={code}
            onChange={onChange}
            language={language?.value}
            theme={theme.value}
          />
        </div>

        <div className="right-container flex flex-shrink-0 w-[30%] flex-col">
          <OutputWindow outputDetails={outputDetails} />
          <div className="flex flex-col items-end">
            <CustomInput
              customInput={customInput}
              setCustomInput={setCustomInput}
            />
            <button
              onClick={handleCompile}
              disabled={!code}
              className={classnames(
                "mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0",
                !code ? "opacity-50" : ""
              )}
            >
              {processing ? "Processing..." : "Compile and Execute"}
            </button>
          </div>
          {outputDetails && <OutputDetails outputDetails={outputDetails} />}
        </div>
      </div>
      <Footer />
    </>
  );
};
export default Landing;

ランディングページの基本構造をさらに詳しくみてみましょう。

CodeEditorWindow コンポーネント

上記に説明したように、CodeEditorWindow コンポーネントは (変更され続ける) コードと、コード内の変更を追跡する onChange メソッドを考慮します。

// onChange method implementation

 const onChange = (action, data) => {
    switch (action) {
      case "code": {
        setCode(data);
        break;
      }
      default: {
        console.warn("case not handled!", action, data);
      }
    }
  };

code の状態を設定し、変更を追跡するだけでいいのです。

CodeEditorWindow コンポーネントは、構文の強調表示とインテリセンスが必要な現在選択されている言語である language の props も考慮します。

Monaco Editor によって受け入れられた language props を追跡し、コンパイルも処理する languageOptions 配列を作成しました。(judge0 API によって受け入れられる languageId を追跡します)

// constants/languageOptions.js

export const languageOptions = [
  {
    id: 63,
    name: "JavaScript (Node.js 12.14.0)",
    label: "JavaScript (Node.js 12.14.0)",
    value: "javascript",
  },
  {
    id: 45,
    name: "Assembly (NASM 2.14.02)",
    label: "Assembly (NASM 2.14.02)",
    value: "assembly",
  },
    ...
    ...
    ...
    ...
    ...
    ...
    
  {
    id: 84,
    name: "Visual Basic.Net (vbnc 0.0.0.5943)",
    label: "Visual Basic.Net (vbnc 0.0.0.5943)",
    value: "vbnet",
  },
];

すべての languageOptions オブジェクトには、id、name、label、および value キーが含まれています。languageOptions 配列全体を取得してドロップダウン内に配置し、オプションとして指定できます。

ドロップダウンの状態が変化するたびに、onSelectChange メソッドは選択された id を追跡し、状態を適切に変更します。

LanguageDropdown コンポーネント

// LanguageDropdown.js

import React from "react";
import Select from "react-select";
import { customStyles } from "../constants/customStyles";
import { languageOptions } from "../constants/languageOptions";

const LanguagesDropdown = ({ onSelectChange }) => {
  return (
    <Select
      placeholder={`Filter By Category`}
      options={languageOptions}
      styles={customStyles}
      defaultValue={languageOptions[0]}
      onChange={(selectedOption) => onSelectChange(selectedOption)}
    />
  );
};

export default LanguagesDropdown;

ドロップダウンの場合は、ドロップダウンとその変更ハンドラーを処理する react-select パッケージを使用します。

React select は、defaultValue と options を主要引数として受け取ります。options は、関連するすべてのドロップダウン値を自動的に表示する配列 (ここでは languageOptions を渡します) です。

defaultValue という props は、コンポーネントに提供されるデフォルト値です。ここではデフォルト言語として JavaScript を選択します。(これは言語の配列内で最初の言語です。)

ユーザーが言語を変更するたびに、onSelectChange コールバックを使用して言語を変更します。

const onSelectChange = (sl) => {
    setLanguage(sl);
};

ThemeDropdown コンポーネント

ThemeDropdown コンポーネントは、実は (UI および React-select パッケージを含む) LanguageDropdown コンポーネントに非常に似ています。

// ThemeDropdown.js

import React from "react";
import Select from "react-select";
import monacoThemes from "monaco-themes/themes/themelist";
import { customStyles } from "../constants/customStyles";

const ThemeDropdown = ({ handleThemeChange, theme }) => {
  return (
    <Select
      placeholder={`Select Theme`}
      // options={languageOptions}
      options={Object.entries(monacoThemes).map(([themeId, themeName]) => ({
        label: themeName,
        value: themeId,
        key: themeId,
      }))}
      value={theme}
      styles={customStyles}
      onChange={handleThemeChange}
    />
  );
};

export default ThemeDropdown;

ここでは、Monaco Editor 用にネット上で入手可能で、多種のきれいなデザインテーマを使用することができる、MonacoThemes というパッケージを利用します。

自由に利用できるテーマのリストがこちらです。

// lib/defineTheme.js

import { loader } from "@monaco-editor/react";

const monacoThemes = {
  active4d: "Active4D",
  "all-hallows-eve": "All Hallows Eve",
  amy: "Amy",
  "birds-of-paradise": "Birds of Paradise",
  blackboard: "Blackboard",
  "brilliance-black": "Brilliance Black",
  "brilliance-dull": "Brilliance Dull",
  "chrome-devtools": "Chrome DevTools",
  "clouds-midnight": "Clouds Midnight",
  clouds: "Clouds",
  cobalt: "Cobalt",
  dawn: "Dawn",
  dreamweaver: "Dreamweaver",
  eiffel: "Eiffel",
  "espresso-libre": "Espresso Libre",
  github: "GitHub",
  idle: "IDLE",
  katzenmilch: "Katzenmilch",
  "kuroir-theme": "Kuroir Theme",
  lazy: "LAZY",
  "magicwb--amiga-": "MagicWB (Amiga)",
  "merbivore-soft": "Merbivore Soft",
  merbivore: "Merbivore",
  "monokai-bright": "Monokai Bright",
  monokai: "Monokai",
  "night-owl": "Night Owl",
  "oceanic-next": "Oceanic Next",
  "pastels-on-dark": "Pastels on Dark",
  "slush-and-poppies": "Slush and Poppies",
  "solarized-dark": "Solarized-dark",
  "solarized-light": "Solarized-light",
  spacecadet: "SpaceCadet",
  sunburst: "Sunburst",
  "textmate--mac-classic-": "Textmate (Mac Classic)",
  "tomorrow-night-blue": "Tomorrow-Night-Blue",
  "tomorrow-night-bright": "Tomorrow-Night-Bright",
  "tomorrow-night-eighties": "Tomorrow-Night-Eighties",
  "tomorrow-night": "Tomorrow-Night",
  tomorrow: "Tomorrow",
  twilight: "Twilight",
  "upstream-sunburst": "Upstream Sunburst",
  "vibrant-ink": "Vibrant Ink",
  "xcode-default": "Xcode_default",
  zenburnesque: "Zenburnesque",
  iplastic: "iPlastic",
  idlefingers: "idleFingers",
  krtheme: "krTheme",
  monoindustrial: "monoindustrial",
};

const defineTheme = (theme) => {
  return new Promise((res) => {
    Promise.all([
      loader.init(),
      import(`monaco-themes/themes/${monacoThemes[theme]}.json`),
    ]).then(([monaco, themeData]) => {
      monaco.editor.defineTheme(theme, themeData);
      res();
    });
  });
};

export { defineTheme };

monaco-themes というパッケージは、コードエディターのデザインの方向性を定義するために使用できる多数のテーマを提供します。

defineTheme 関数は、ユーザーが選択するであろうさまざまなテーマを扱います。defineTheme 関数は、monaco.editor.defineTheme(theme,themeData) アクションを使用して実際に Monaco Editor のテーマを設定する Promise を返します。このコード行は、Monaco Editor コードウィンドウ内のテーマを実際に変更する役割を担っています。

defineTheme 関数は、先ほど ThemeDropdown.js コンポーネントで見た onChange コールバックを利用して呼び出されます。

// Landing.js - handleThemeChange() function

function handleThemeChange(th) {
    const theme = th;
    console.log("theme...", theme);

    if (["light", "vs-dark"].includes(theme.value)) {
      setTheme(theme);
    } else {
      defineTheme(theme.value).then((_) => setTheme(theme));
    }
  }
  

handleThemeChange() 関数は、テーマが light か dark かをチェックします。これらのテーマはデフォルトで MonacoEditor コンポーネントで利用できるため、defineTheme() メソッドを呼び出す必要はありません。

そうでない場合は、defineTheme() コンポーネントを呼び出して、選択したテーマの状態を設定します。

Judge0 を使用してコードをコンパイルする方法

アプリケーションの根幹部である、さまざまな言語でコードをコンパイルする方法を見ていきましょう。

コードをコンパイルするには、Judge0 を使用します。Judge0 は、対話可能でかつシンプルな、オープンソースのコード実行システムです。

いくつかの引数 (ソースコード、言語 ID) を使用して単純な API 呼び出しを実行し、応答として出力を取得することができます。

Judge0 をセットアップして、次のステップに進みましょう。

• Judge0 に移動し、ベーシックプランを選択します
• Judge0 は実際は RapidAPI でホスティングされています。ベーシックプランに登録してください。
• 登録すると、コード実行システムへの API 呼び出しを行うために必要な RAPIDAPI_HOST と RAPIDAPI_KEY をコピーできます。

ダッシュボードは以下のようなものになります。

API 呼び出しには X-RapidAPI-Host 引数と X-RapidAPI-Key 引数が必要です。後ほど使用できるように、次のように .env ファイルに保存します。

REACT_APP_RAPID_API_HOST = YOUR_HOST_URL
REACT_APP_RAPID_API_KEY = YOUR_SECRET_KEY
REACT_APP_RAPID_API_URL = YOUR_SUBMISSIONS_URL

React では、環境変数に REACT_APP というプレフィックスを最初に含めることが重要です。

SUBMISSIONS_URL は、使用する URL です。これは基本的に host とそれに続く /submission ルートで構成されます。

例えばこの場合では、https://judge0-ce.p.rapidapi.com/submissions が submissions URL になります。

変数を正しく設定したら、compilation (コンパイル) ロジックを処理できるようになります。

コンパイルフローとロジック

コンパイルの流れは以下の通りです。

• Compile and Execute ボタンをクリックすると、handleCompile() 関数が呼び出されます。
• handleCompile() 関数は、languageId、source_code、stdin (この場合は customInput) を本体引数として、submissions URL 上で Judge0 RapidAPI のバックエンドにリクエストします。
• the options は host と secret をヘッダーとして受け取ります。
• base64_encoded と fields は、渡すことができるオプションの引数です。
• submission POST リクエストはリクエストをサーバーに登録し、プロセスを作成します。post リクエストの応答は、後で実行のステータスを確認するために使用する token です。(処理中、承認済み、時間制限超過、実行時間の例外など、さまざまなステータスがあります。)
• 結果が返されると、結果が成功か失敗かを条件付きで確認し、結果を出力画面に表示します。

実際にコードを見てみて、handleCompile() メソッドを理解しましょう。

const handleCompile = () => {
    setProcessing(true);
    const formData = {
      language_id: language.id,
      // encode source code in base64
      source_code: btoa(code),
      stdin: btoa(customInput),
    };
    const options = {
      method: "POST",
      url: process.env.REACT_APP_RAPID_API_URL,
      params: { base64_encoded: "true", fields: "*" },
      headers: {
        "content-type": "application/json",
        "Content-Type": "application/json",
        "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
        "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
      },
      data: formData,
    };

    axios
      .request(options)
      .then(function (response) {
        console.log("res.data", response.data);
        const token = response.data.token;
        checkStatus(token);
      })
      .catch((err) => {
        let error = err.response ? err.response.data : err;
        setProcessing(false);
        console.log(error);
      });
  };

上記の通り、handleCompile() メソッドは languageId、source_code、stdin を受け取ります。特に source_code と stdin の前に btoa が使用されていることに注目してください。これは、API に渡すパラメータで base64_encoded: true を使用しているのにあわせて、文字列を Base64 エンコードするためのものです。

応答が成功でトークンを入手したら、checkStatus() メソッドを呼び出して /submissions/${token} ルートをポーリングします。

const checkStatus = async (token) => {
    const options = {
      method: "GET",
      url: process.env.REACT_APP_RAPID_API_URL + "/" + token,
      params: { base64_encoded: "true", fields: "*" },
      headers: {
        "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
        "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
      },
    };
    try {
      let response = await axios.request(options);
      let statusId = response.data.status?.id;

      // Processed - we have a result
      if (statusId === 1 || statusId === 2) {
        // still processing
        setTimeout(() => {
          checkStatus(token)
        }, 2000)
        return
      } else {
        setProcessing(false)
        setOutputDetails(response.data)
        showSuccessToast(`Compiled Successfully!`)
        console.log('response.data', response.data)
        return
      }
    } catch (err) {
      console.log("err", err);
      setProcessing(false);
      showErrorToast();
    }
  };

以前に送信したコードの結果を取得するには、応答として受け取った token を使用して submissions API をポーリングする必要があります。

上記のように、エンドポイントに対して GET リクエストを行います。レスポンスがあると、statusId === 1 || statusId === 2 をチェックしていますが、これはどういう意味なのでしょうか。

私たちが API に提出したコードに関連する合計 14 のステータスがあります。それらは以下の通りです:

export const statuses = [
  {
    id: 1,
    description: "In Queue",
  },
  {
    id: 2,
    description: "Processing",
  },
  {
    id: 3,
    description: "Accepted",
  },
  {
    id: 4,
    description: "Wrong Answer",
  },
  {
    id: 5,
    description: "Time Limit Exceeded",
  },
  {
    id: 6,
    description: "Compilation Error",
  },
  {
    id: 7,
    description: "Runtime Error (SIGSEGV)",
  },
  {
    id: 8,
    description: "Runtime Error (SIGXFSZ)",
  },
  {
    id: 9,
    description: "Runtime Error (SIGFPE)",
  },
  {
    id: 10,
    description: "Runtime Error (SIGABRT)",
  },
  {
    id: 11,
    description: "Runtime Error (NZEC)",
  },
  {
    id: 12,
    description: "Runtime Error (Other)",
  },
  {
    id: 13,
    description: "Internal Error",
  },
  {
    id: 14,
    description: "Exec Format Error",
  },
];

したがって、statusId ===1 または statusId ===2 の場合、コードがまだ処理中であり、API を再度呼び出して結果が得られるかどうかを確認する必要があることを意味します。

このため、if 文の条件に checkStatus() 関数を再度呼び出す setTimeout() があり、内部で API を再度呼び出してステータスを確認します。

ステータスが 2 または 3 以外の場合は、コードの実行が完了し、結果が得られたことを意味します。successfully compiled (コンパイル成功) か、Time Limit Exceeded (タイムリミット超過) か、あるいは Runtime Exception (ランタイム例外の発生) のいずれかになります。statusId は各シナリオを表し、これらを再現することができます。

例えば、while(true) では time limit exceeded のエラーが発生します。

または、構文に誤りがあると、コンパイルエラーが発生します。

どの場合においても、何らかの結果を得ることになります。そして、この結果を outputDetails の状態に保存します。これは、画面の右側 (出力ウィンドウ) に表示するものがあることを保証するためです。

出力ウィンドウコンポーネント

import React from "react";

const OutputWindow = ({ outputDetails }) => {
  const getOutput = () => {
    let statusId = outputDetails?.status?.id;

    if (statusId === 6) {
      // compilation error
      return (
        <pre className="px-2 py-1 font-normal text-xs text-red-500">
          {atob(outputDetails?.compile_output)}
        </pre>
      );
    } else if (statusId === 3) {
      return (
        <pre className="px-2 py-1 font-normal text-xs text-green-500">
          {atob(outputDetails.stdout) !== null
            ? `${atob(outputDetails.stdout)}`
            : null}
        </pre>
      );
    } else if (statusId === 5) {
      return (
        <pre className="px-2 py-1 font-normal text-xs text-red-500">
          {`Time Limit Exceeded`}
        </pre>
      );
    } else {
      return (
        <pre className="px-2 py-1 font-normal text-xs text-red-500">
          {atob(outputDetails?.stderr)}
        </pre>
      );
    }
  };
  return (
    <>
      <h1 className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 mb-2">
        Output
      </h1>
      <div className="w-full h-56 bg-[#1e293b] rounded-md text-white font-normal text-sm overflow-y-auto">
        {outputDetails ? <>{getOutput()}</> : null}
      </div>
    </>
  );
};

export default OutputWindow;

これは、成功または失敗のシナリオのみを表示する、シンプルなコンポーネントです。

getOutput() メソッドは、テキストの色がどのように見えるか、および何を表示するかを決定します。

• statusId が 6 の場合: コンパイルエラーが発生しています。この場合、API は compile_output を返し、それを使用してエラーを表示できます。
• statusId が 3 の場合: これは Accepted という成功のシナリオです。この場合、API は stdout (標準出力) を返します。これは、API に提供したコードから返されたデータを表示するために使用されます。
• statusId が 5 の場合: 時間制限超過エラーが発生しています。コード内に無限ループ条件があるか、またはコード実行の標準の 5 秒時間を超えていることを表示するのみです。
• その他すべてのステータスについては、標準的な stderr オブジェクトを取得し、エラーを表示するために使用します。
• atob() メソッドが使用されている点に注意してください。これは、出力を Base64 文字列として受け取るためです。デコードするために atob() メソッドを使用します。

以下は、JavaScript での Binary Search プログラムの成功シナリオです。

出力詳細コンポーネント

OutputDetails コンポーネントは、最初にコンパイルしたコードスニペットに関連する詳細を表示するためのシンプルなマッパーです。データはすでに outputDetails 状態変数に設定されています。

import React from "react";

const OutputDetails = ({ outputDetails }) => {
  return (
    <div className="metrics-container mt-4 flex flex-col space-y-3">
      <p className="text-sm">
        Status:{" "}
        <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
          {outputDetails?.status?.description}
        </span>
      </p>
      <p className="text-sm">
        Memory:{" "}
        <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
          {outputDetails?.memory}
        </span>
      </p>
      <p className="text-sm">
        Time:{" "}
        <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
          {outputDetails?.time}
        </span>
      </p>
    </div>
  );
};

export default OutputDetails;

time、memory、status.description はすべて API 応答から受信された後、outputDetails に保存され表示されます。

キーボードイベント

最後は、ctrl+enter を使って、コードをコンパイルする機能です。これには、Web アプリケーションでさまざまなキーボードイベントのイベントリスナーの役割をする、カスタムフックを作成します (カスタムフックは非常に便利で、コードもきれいに保てます)。

// useKeyPress.js

import React, { useState } from "react";

const useKeyPress = function (targetKey) {
  const [keyPressed, setKeyPressed] = useState(false);

  function downHandler({ key }) {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  }

  const upHandler = ({ key }) => {
    if (key === targetKey) {
      setKeyPressed(false);
    }
  };

  React.useEffect(() => {
    document.addEventListener("keydown", downHandler);
    document.addEventListener("keyup", upHandler);

    return () => {
      document.removeEventListener("keydown", downHandler);
      document.removeEventListener("keyup", upHandler);
    };
  });

  return keyPressed;
};

export default useKeyPress;

// Landing.js

...
...
...
const Landing = () => {
    ...
    ...
      const enterPress = useKeyPress("Enter");
      const ctrlPress = useKeyPress("Control");
   ...
   ...
}

ここでは、純粋な JavaScript の Event Listeners を使用して、目的の target キーのイベントを待ち、応答します。

この Hook は、keydown と keyup のイベントを待ちます。Enter と Control のターゲットキーを使用してフックを初期化します。

targetKey === key かどうかを確認し、それに応じて keyPressed を設定しているため、keyPressed で返されたブール値 (true または false) を使用することができます。

これで、useEffect フックでこれらのイベントにリスナーを付け、両方が同時に押されたことを確認できます。

useEffect(() => {
    if (enterPress && ctrlPress) {
      console.log("enterPress", enterPress);
      console.log("ctrlPress", ctrlPress);
      handleCompile();
    }
  }, [ctrlPress, enterPress]);

これにより、ユーザーが control キーと enter キーを連続して押すか、同時に押すたびに、handleCompile() メソッドが呼び出されます。

注意事項

楽しいプロジェクトではありますが、Judge0 の基本プランには、1 日 100 回までのリクエスト制限があります。

その対策法として、独自のサーバーやドロップレットを (Digital Ocean 上で) 起動し、オープンソースプロジェクトを独自にホストすることができます (これについての素晴らしいドキュメントも用意されています)。

まとめ

最終結果は以下になります。

• 40 以上の言語でコンパイルできるコードエディター
• コードエディターのデザインを変更するためのテーマ切り替え
• RapidAPI 上での API の相互作用とホスティング
• カスタムフックを使用した React でキーボードイベントの使用
• 楽しい時間！ ;)

最後に、プロジェクトをさらに掘り下げたい方は、以下の機能を追加してみてはどうでしょうか。

• ログインおよび登録モジュール: コードを自分の個人ダッシュボードに保存できるようにします。
• インターネット上で他の人とコードをシェアする方法
• プロフィールページとカスタマイズ
• Socket プログラミングと操作変換を使用した、単一のコードスニペットでのペアプログラミング
• お気に入りのコードスニペットをブックマークする
• CodePen のような、保存されたコードスニペットのカスタムダッシュボード

私にとって、このアプリケーションをゼロからコーディングすることはとても楽しく、TailwindCSS は私のお気に入りであり、アプリケーションのスタイリングには欠かせないリソースです。

もしこの記事が役に立ったのなら、GitHub Repository に⭐️をつけていただけると嬉しいです。
質問があれば、Twitter や Website からお気軽にご連絡ください。喜んでサポートさせていただきます。

Source Code | Live Demo

React.js は、オープンソースの JavaScript ベースのユーザーインターフェイスライブラリーです。ウェブおよびモバイルアプリの開発で非常に人気があります。

React はコンポーネントベースの構成を原則としています。React のコンポーネントは、それぞれ独立していて、再利用可能なコード部分のことを指します。コンポーネントには、クラスコンポーネントと関数コンポーネントの 2 つのタイプがあります。

React バージョン 16.8 までは、開発者はクラスコンポーネントを使用してのみ、state などの React の機能を扱うことができました。しかし、バージョン 16.8 で、React にフックと呼ばれる新しいパターンが導入されました。

React のフックを使用することで、関数コンポーネントで state を含めさまざまな React の機能を使用することができます。これにより、開発者は React で関数型プログラミングを実行できるようになりました。

この記事では、React フックについての基礎を学んでいきます。この記事を書く背景には、「React のフックは学びやすく、作成や使用も簡単」という考え方を初心者の方々に持ってもらいたいという思いがあります。基礎さえしっかり理解していれば、本当に簡単なのです。

もし動画で学ぶことがお好きなら、この記事の内容はビデオチュートリアルでもご利用いただけます。ぜひこちらからご覧ください🙂

フックについて学ぶ前に

フックの前に、まず基本の JavaScript の関数 (バニラ JS の関数) について考えてみましょう。

JavaScript というプログラミング言語では、関数は繰り返し行うタスクのための再利用可能なコードロジックです。関数はコンポーザブル (合成可能) です。つまり、関数を別の関数内で呼び出してその出力を使用することができます。

以下の図では、関数 someFunction() が関数 a() と b() をコンポーズ (合成使用) しています。b() の関数は関数 c() を使用しています。

これをコードで書くと、次のようになります。

function a() {
    // some code
}

function c() {
    // some code
}

function b() {
    // some code
    
    c();
    
    // some code
}

function someFunction() {
    // some code
    
	a();
    b();
    
    // some code
}

React の関数コンポーネントが単なるバニラ JavaScript の関数であることは周知の事実です。したがって、関数が合成可能な場合、React コンポーネントも
合成可能な性質を持つことになります。以下の図のように、これは 1 つ以上のコンポーネントを別のコンポーネントに合成使用できることを意味します。

ステートフルコンポーネントとステートレスコンポーネント

React のコンポーネントには、state を持つものと、持たないものがあります。

• state を持つコンポーネントは、その中で状態を確立し管理します。
• state を持たないコンポーネントは、状態や副作用の管理をしない、純粋な関数です。

純粋関数とは、副作用のない関数のことです。つまりこれは、関数が同じ入力に対して常に同じ出力を返す、ということを意味します。

関数コンポーネントから、state や副作用のロジックを取り除けば、state を持たないステートレスコンポーネントになります。また、取り除いた state を持つロジックや副作用のロジックは、アプリ内の他の場所で再利用することもできます。そのため、それらをできる限りコンポーネントから隔離することが、合理的なのです。

React フックとステートフルロジック

React フックを使用することで、ステートフルロジックと副作用を関数コンポーネントから切り離すことができます。フックとは、状態の変化や副作用をコンポーネントから切り離して管理することができる、JavaScript の関数のことです。

これにより、すべてのステートフルロジックをフックとして分離し、他のコンポーネントに使用できるようになるのです。(フックも関数であるため、合成可能。)

では、このステートフルロジックとは何なのでしょうか？状態変数をローカルで宣言および管理しているものであれば、何でも当てはまります。

たとえば、データをフェッチし、ローカル変数でデータを管理するロジックは「ステートフル」ということになります。複数のコンポーネントでそのような取得ロジックを再利用すると良い場合もあります。

では、React フックとは一体なんなのでしょうか？

React フックをわかりやすい言葉で定義するとどうなるでしょうか。関数、コンポーザビリティー、コンポーネント、状態、副作用について理解した今、React フックとは何かをご説明します。

React フックとは、関数コンポーネント内の再利用可能な部分を切り離して使用できるシンプルな JavaScript の関数です。フックは状態を持つことができ、副作用を管理することもできます。

React は、標準の組み込みフックを多数提供しています。

• useState: 状態を管理するためのフックです。状態の値と、それを更新するための更新関数を返します。
• useEffect: API 呼び出し、サブスクリプション、タイマー、ミューテイションなどのような副作用を管理するためのフックです。
• useContext: コンテキストの現在の値を返します。
• useReducer: 複雑な状態管理をサポートするための、useState の代替となるフックです。
• useCallback: 子コンポーネントが必要以上にレンダリングされないように、コールバックをメモ化されたものを返します。
• useMemo: パフォーマンスの最適化に役立つメモ化された値を返します。
• useRef: .current プロパティを持つ ref オブジェクトを返します。そのような ref オブジェクトはミュータブル (変更可能) です。これは主に子コンポーネントに直接アクセスするために使用されます。
• useLayoutEffect: すべての DOM ミューテーションの最後に始動します。useLayoutEffect は同期的に始動するため、できればこれよりも useEffect を使用する方がオススメです。
• useDebugValue: React DevTools でカスタムフックのラベルを表示するのに役立ちます。

これらのフックについて詳しくは、こちらから読むことができます。全てのフック名が use で始まることに注目してください。これは React コードベースでフックを素早く特定するための標準的な慣例です。

データのフェッチ、ディスクへのログ、タイマーなど、様々な用途に合わせて独自のカスタムフックを作成することもできます。

なのでもし、コードベースで React フックを見かけたり、作成するように求められた場合は、心配しないでください。それは、単に関数コンポーネントの外で状態や副作用を扱うための別の JavaScript 関数なだけなのです。

カスタムフックを作成するためのステップバイステップガイドをお探しであれば、この記事が役立つかもしれません。

最後に

この React フックの紹介が少しでもお役に立てば幸いです。React 経験も長くなり、React のあらゆる側面を網羅することを目指した YouTube 動画シリーズを始めました。もしお役に立てそうであれば、ぜひチャンネル登録をお願いします。

私は、次のプラットフォームでも JavaScript、ウェブ開発、ブログについて学んだことを共有しているので、ぜひ繋がりましょう。

• Twitter でフォローする
• GitHub でサイドプロジェクトを見る

それではまた、次の記事でお会いしましょう。それまで、心身ともに体に気をつけてお過ごしください。

API エンドポイントを利用する CRUD 操作を実装しようとすると、複数のコンポーネントにまたがるデータ管理の難しさに気付くでしょう。

あるいはモーダルを異なるコンポーネントからトリガーしたいこともあるでしょう。

そのような場合の対応方法は、なかなか理解が難しいかもしれません。

このチュートリアルでその方法を解説します。

親コンポーネントから子コンポーネントにデータを受け渡す方法

はじめに、親コンポーネントと子コンポーネントの間でデータを受け渡す場合を考えます。

まず、親と子にあたる 2 つのコンポーネントを作成します。

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

次に、Parent コンポーネントで Child コンポーネントをインポートして返します。

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

そして関数と、その関数をトリガーするボタンを作成します。さらに useState フックを使用して、データを管理する state を作成します。

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

上記のコードでは、Click Parent ボタンがクリックされた時に parentToChild 関数を呼び出します。Click Parent ボタンがクリックされると、data 変数に "This is data from Parent Component to the Child Component" が格納されます。

では次に、その data という state を Child コンポーネントに受け渡します。これは props を用いて実現できます。

下記のように、Child コンポーネントを呼び出す際に data を props として受け渡します。

<Child parentToChild={data}/>

ここでは data というデータを Child コンポーネントに受け渡しています。

data が受け渡したいデータで、parentToChild が props の名前です。

次は、そのデータを Child コンポーネント側で受け取ります。これはとてもシンプルです。

これには 2 通りのケースがあります。

ケース 1: 関数コンポーネントを使用している場合は、引数で parentToChild を受け取ります。

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

ケース 2: クラスコンポーネントの場合は、this.props.parentToChild を使用します。

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

どちらのやり方でも同じ結果になります。

Click Parent ボタンをクリックすると、データが画面に出力されます。

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Parent コンポーネントの完成形のコードは上記の通りです。

子コンポーネントから親コンポーネントにデータを受け渡す方法

こちらは少し厄介です。

まず、Parent コンポーネント内に childToParent という名前の関数と、data という名前の空の state を作成します。

const [data, setData] = useState('');

const childToParent = () => {
   
}

次に、childToParent 関数を props として Child コンポーネントに受け渡します。

<Child childToParent={childToParent}/>

そして Child コンポーネント内で、この関数を props として受け取り、onClick イベントに割り当てます。

さらに、文字列または数値形式のデータを持つ state (data) を宣言します。

その data を parentToChild 関数に引数として渡します。

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "This is data from Child Component to the Parent Component."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Click Child</Button>
        </div>
    )
}

次に、Parent コンポーネント側で、このデータを childToParent 関数内で引数として受け取ります。

そして useState フックを使用して data を設定します。

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
      <div>
        <Child/>
      </div>
    </div>
  );
}

export default Parent;

次に、return 文の中でその data 変数を表示します。

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

Click Child ボタンがクリックされると、子コンポーネントの data が親コンポーネントの data を上書きします。

これで、子コンポーネントから親コンポーネントへ、そして親コンポーネントから子コンポーネントへデータを受け渡す方法が分かりました。

onClick や OnChange のようなイベントを受け渡す

childToParent 関数の中で alert メソッドを呼び出すようにして、その関数を props として Child コンポーネントに受け渡します。

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("This is an alert from the Child Component")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

そして Child コンポーネントで childToParent を props として受け取り、ボタンの onClick イベントに割り当てます。

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Click Child</Button>
        </div>
    )
}

Child コンポーネント内のボタンをクリックすると、Parent コンポーネント内の関数が呼び出され、次のようなアラートが表示されます。

以上です！

もっといろいろ実験したければ、GitHub にコードを公開していますのでご利用ください。

この記事は以上です。学習を楽しんでください。

React のインライン CSS を使って backgroundImage スタイルプロパティを設定する方法は、4 つあります。

このチュートリアルでは、サンプルコードとともに、4 つ全ての方法をご紹介します。

外部 URL を使って React の背景画像を設定する方法

設定したい背景画像がオンライン上にあるならば、下のコードのように URL を記述すると背景画像を設定できます。

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

上のコードは、background-image: url(https://via.placeholder.com/500) のスタイルが適用された <div> 要素を描画します。

アプリの /src フォルダ配下から React の背景画像を設定する方法

Create React App コマンドを使ってアプリケーションを開発し、src/ フォルダ内に画像が配置されているならば、import で画像を取り込んで、要素の背景として設定できます。

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

npm start コマンドにてアプリケーションを起動する際に、画像が見つからない場合には、React アプリケーションはコンパイルに失敗したというエラーを表示してビルドを停止します。

この方法を使えば、アプリケーション上で壊れた画像リンクが表示されることはありません。上のコードにおいて backgroundImage は、JavaScript の表記を埋め込むためのテンプレート文字列を使っています。

相対 URL を使って React の背景画像を設定する方法

Create React App コマンドで作成された React アプリケーションの public フォルダは、静的な画像などを追加するのに使われます。public/ フォルダ内に配置したどのようなファイルも、オンラインでアクセスできます。

public フォルダ内部に image.png ファイルを配置している場合、<ホストのアドレス>/image.png の URL にて画像情報にアクセスできます。ローカル環境下で React アプリを動かしているとき、画像は http://localhost:3000/image.png でアクセスできます。

そしてホストアドレスに対する相対パスの URL を与えることで、背景画像を設定できます。以下のコードは一例です。

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

上記のサンプルコードのように、URL のパスを /image.png に設定することで、ブラウザは <ホストのアドレス>/image.png の場所で背景画像を探すことになります。

フォルダを使って画像を整理したいならば、public/ フォルダ内に別の画像用のフォルダを作成することもできます。

フォルダを新しく作成するなら、背景画像の値も url(/img/image.png) に変更するのを忘れないようにしましょう。

絶対パスを使って React の背景画像を設定する方法

以下のコードのように Create React App で作成したアプリの PUBLIC_URL の環境変数を使うことで、絶対パス URL を含めることができます。

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

ローカル環境上で上記のコードを動かすとき、React スクリプトは、PUBLIC_URL の値をコントロールします。ローカル環境で動かすときは、絶対パスの URL の代わりに、相対パス URL のように見えます。

React を本番アプリケーションにデプロイしたときだけ、絶対パス URL が表示されます。

追加のプロパティと一緒に背景画像を設定する方法

もし、さらに背景画像をカスタマイズしたいならば、backgroundImage の後に追加のプロパティを追加することで、カスタマイズできます。以下のコードはサンプルです。

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

上記のコードのプロパティには、<div> 要素に background-image を設定すると同時に、background-repeat: no-repeat と width: 250px の CSS を追加しています。

ここまでお読みいただきありがとうございます。そして、この記事が読者の皆様にとって、役に立っていることを願っています。質問があれば、筆者の 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 のプロになり、夢の仕事を得て、自分の未来を管理するために、何百人もの開発者がすでに使用している内部関係者向けの情報をこちらで手に入れてください:

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