React Hooksを使ったWebSocket通信の実装方法を徹底解説

リアルタイム通信が求められる現代のWebアプリケーション開発では、ユーザー体験を向上させるためにリアルタイムデータのやり取りが欠かせません。その実現手段として注目されるのが、クライアントとサーバー間で双方向通信を可能にするWebSocketです。さらに、Reactアプリケーションにおいては、React Hooksを活用することで、シンプルかつ効果的にWebSocket通信を実装できます。

本記事では、React Hooksを使ってWebSocket通信を実装する方法を、初学者にもわかりやすくステップごとに解説します。WebSocketの基本的な仕組みから、Reactでの接続管理、メッセージの送受信、そして実際のチャットアプリ構築の例まで、丁寧に説明していきます。このガイドを通じて、リアルタイム通信の技術を自信を持って使いこなせるようになりましょう。

WebSocket通信とは？

WebSocketは、クライアントとサーバー間でリアルタイム通信を可能にするプロトコルです。従来のHTTP通信ではリクエスト-レスポンスの一方向通信が基本ですが、WebSocketは接続を確立した後、クライアントとサーバーが双方向にデータをやり取りできます。

HTTP通信との違い

双方向通信
HTTP通信はクライアントがリクエストを送信して初めてサーバーが応答しますが、WebSocketではクライアントとサーバーが互いに自発的にデータを送信可能です。
接続の継続性
HTTP通信では、リクエストごとに接続が確立されて閉じられます。一方、WebSocketでは一度接続が確立されると、継続的に通信を行うことが可能です。
効率性
WebSocketはヘッダー情報が少なく、軽量な通信を実現します。そのため、リアルタイム性が求められる場面でのパフォーマンスが優れています。

WebSocketが活用されるケース

チャットアプリ：ユーザー同士がリアルタイムにメッセージをやり取り。
株価・暗号通貨の更新：動的に価格情報を更新。
オンラインゲーム：リアルタイムでプレイヤー間のデータを同期。
通知システム：即時通知をユーザーに送信。

WebSocketは、ユーザー体験を向上させるためのリアルタイム通信の基盤となる技術です。このプロトコルを理解することで、よりインタラクティブなアプリケーションを構築できます。

React Hooksの基礎知識

React Hooksは、React 16.8以降で導入された機能で、関数コンポーネントで状態管理やライフサイクルの処理を可能にします。Hooksを使うことで、クラスコンポーネントを使用せずに強力な機能を簡潔に実装できるのが特徴です。

主要なReact Hooks

WebSocket通信に特に関連する重要なHooksを以下に紹介します。

useState

コンポーネント内で状態を管理するためのHookです。WebSocket接続状態や受信したメッセージを保存するのに使用します。

const [messages, setMessages] = useState([]);

useEffect

副作用を扱うためのHookです。主にWebSocketの接続、切断、リスナーの設定を行います。依存配列を指定することで特定のタイミングで処理を実行できます。

useEffect(() => {
  // WebSocket接続処理
  return () => {
    // WebSocket切断処理
  };
}, []);

useRef

DOMへの参照や、再レンダリングの影響を受けずに値を保持するために使用します。WebSocketインスタンスの参照を管理する際に便利です。

const socketRef = useRef(null);

Hooksのメリット

簡潔なコード: 関数コンポーネントで簡単に状態管理や副作用を実装可能。
再利用性の向上: カスタムHookを作成することで、複雑なロジックを再利用可能。
クラスコンポーネント不要: 関数コンポーネントのみでアプリケーションを構築可能。

カスタムHookの利用

React Hooksはカスタマイズも可能です。例えば、WebSocket接続のロジックをカスタムHookとして切り出すことで、再利用性が高まり、コードが整理されます。

function useWebSocket(url) {
  const socketRef = useRef(null);

  useEffect(() => {
    socketRef.current = new WebSocket(url);
    return () => {
      socketRef.current.close();
    };
  }, [url]);

  return socketRef;
}

React Hooksをしっかりと理解することで、WebSocket通信を効率的かつ簡潔に実装できる基盤を作ることができます。

WebSocket通信の実装準備

ReactでWebSocket通信を行うためには、まず環境を整える必要があります。このセクションでは、WebSocketサーバーの設定とReactアプリケーションの基本的なセットアップ方法を解説します。

1. WebSocketサーバーのセットアップ

WebSocket通信をテストするために、シンプルなWebSocketサーバーをNode.jsで構築します。

必要なパッケージのインストール

以下のコマンドを使用してWebSocketサーバーの構築に必要なライブラリをインストールします。

npm install ws

サーバーコードの作成

以下はNode.jsでWebSocketサーバーを構築するコード例です。

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('Client connected');

  socket.on('message', (message) => {
    console.log(`Received: ${message}`);
    socket.send(`Echo: ${message}`);
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('WebSocket server is running on ws://localhost:8080');

このコードは、接続されたクライアントからメッセージを受信し、そのメッセージをエコー（そのまま返信）するシンプルなサーバーを構築します。

2. Reactプロジェクトのセットアップ

Reactアプリの作成

以下のコマンドでReactアプリケーションを作成します。

npx create-react-app react-websocket-demo
cd react-websocket-demo

必要な依存関係のインストール

WebSocket通信には特別な依存関係は不要ですが、開発を効率化するために以下を追加でインストールすることもできます。

npm install axios # API通信が必要な場合

3. Reactでの基本的な構造作成

プロジェクト内のsrcフォルダに新しいファイルを作成します。例えば、WebSocketExample.jsという名前のコンポーネントを作成します。

ファイル構成

src/
├── components/
│   ├── WebSocketExample.js
├── App.js
└── index.js

サンプルコード

以下は、後の実装を始めるためのReactコンポーネントの骨組みです。

import React from 'react';

function WebSocketExample() {
  return (
    <div>
      <h1>WebSocket Example</h1>
    </div>
  );
}

export default WebSocketExample;

これでReactアプリケーションにWebSocket通信を組み込むための準備が整いました。次は、接続管理の実装を行います。

useEffectを使った接続管理

WebSocket通信では、接続の確立、切断、接続のライフサイクルを適切に管理することが重要です。ReactのuseEffectフックを使うことで、コンポーネントのマウントとアンマウント時にWebSocketの接続と切断を実装できます。

1. WebSocket接続の管理

WebSocket接続を管理するには、useEffectフックを活用して、コンポーネントのライフサイクルに応じて接続と切断を行います。

コード例

以下の例では、WebSocket接続の確立とクリーンアップ処理を実装します。

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

function WebSocketExample() {
  const socketRef = useRef(null);

  useEffect(() => {
    // WebSocketの接続を確立
    socketRef.current = new WebSocket('ws://localhost:8080');

    socketRef.current.onopen = () => {
      console.log('WebSocket connected');
    };

    socketRef.current.onclose = () => {
      console.log('WebSocket disconnected');
    };

    // クリーンアップ処理
    return () => {
      if (socketRef.current) {
        socketRef.current.close();
        console.log('WebSocket closed');
      }
    };
  }, []); // 空の依存配列で初回レンダリング時にのみ実行

  return (
    <div>
      <h1>WebSocket Connection</h1>
    </div>
  );
}

export default WebSocketExample;

2. useRefを活用したWebSocketインスタンス管理

useRefを使用してWebSocketインスタンスを管理することで、再レンダリングの影響を受けずに接続を維持できます。

ポイント

useRefにより、WebSocketインスタンスを1度だけ初期化できます。
再レンダリング時に新しいインスタンスが作成されるのを防ぎます。

3. WebSocketの接続ステータス表示

接続状態をユーザーに視覚的に伝えるために、状態を管理するuseStateを組み合わせることができます。

コード例

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

function WebSocketExample() {
  const socketRef = useRef(null);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    socketRef.current = new WebSocket('ws://localhost:8080');

    socketRef.current.onopen = () => {
      setIsConnected(true);
      console.log('WebSocket connected');
    };

    socketRef.current.onclose = () => {
      setIsConnected(false);
      console.log('WebSocket disconnected');
    };

    return () => {
      if (socketRef.current) {
        socketRef.current.close();
      }
    };
  }, []);

  return (
    <div>
      <h1>WebSocket Example</h1>
      <p>Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
    </div>
  );
}

export default WebSocketExample;

4. 注意点

WebSocketはバックエンドの準備ができていることを前提としています。バックエンドが起動していることを確認してください。
接続中の例外やエラーに備えてエラーハンドリングを追加するのが望ましいです（これについては次のセクションで詳述します）。

このコードで、コンポーネントのライフサイクルに合わせたWebSocket接続管理が可能になり、安定したリアルタイム通信の基盤を構築できます。

メッセージ送受信の実装

WebSocket通信の重要な機能は、クライアントとサーバー間でのメッセージの送受信です。このセクションでは、ReactでのWebSocketを使用したメッセージの送受信の方法を解説します。

1. メッセージの送信

クライアントからサーバーにメッセージを送信するには、WebSocketインスタンスのsendメソッドを使用します。ユーザーが送信ボタンをクリックすると、指定したメッセージを送信するように実装します。

コード例

以下はメッセージ送信の基本実装例です。

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

function WebSocketExample() {
  const socketRef = useRef(null);
  const [message, setMessage] = useState('');
  const [log, setLog] = useState([]);

  useEffect(() => {
    socketRef.current = new WebSocket('ws://localhost:8080');

    socketRef.current.onopen = () => {
      console.log('WebSocket connected');
    };

    socketRef.current.onmessage = (event) => {
      // サーバーからのメッセージをログに追加
      setLog((prevLog) => [...prevLog, `Server: ${event.data}`]);
    };

    return () => {
      if (socketRef.current) {
        socketRef.current.close();
      }
    };
  }, []);

  const sendMessage = () => {
    if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
      socketRef.current.send(message);
      setLog((prevLog) => [...prevLog, `You: ${message}`]); // クライアント側のログにも追加
      setMessage(''); // 入力フィールドをリセット
    } else {
      console.log('WebSocket not connected');
    }
  };

  return (
    <div>
      <h1>WebSocket Chat</h1>
      <div>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message"
        />
        <button onClick={sendMessage}>Send</button>
      </div>
      <div>
        <h3>Message Log:</h3>
        <ul>
          {log.map((msg, index) => (
            <li key={index}>{msg}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default WebSocketExample;

2. メッセージの受信

サーバーから送信されたメッセージを受信するには、WebSocketのonmessageイベントを使用します。受信したメッセージを状態管理（useState）で保持して、ユーザーに表示します。

ポイント

受信したデータを配列として保存することで、チャットログのような形で表示可能です。
event.dataにメッセージ内容が格納されます。

3. 実行結果

このコードにより、以下の動作が実現します：

入力フォームにメッセージを入力して送信すると、WebSocket経由でサーバーにメッセージが送信されます。
サーバーが応答を返すと、受信したメッセージがログに表示されます。

4. 注意点

エンコーディング: 必要に応じてメッセージをJSON形式にシリアライズ/デシリアライズしてください。

  socketRef.current.send(JSON.stringify({ type: 'message', content: message }));

接続状態の確認: WebSocketのreadyStateを確認して、接続がオープンな状態でのみ送信処理を実行します。

この実装により、クライアントとサーバー間で効率的なリアルタイムメッセージ送受信が可能となります。次に、エラー処理や再接続の仕組みを追加して、より安定した通信を実現します。

エラーハンドリングと再接続

WebSocket通信では、接続エラーや予期しない切断が発生する可能性があります。これらに対応するために、適切なエラーハンドリングと自動再接続の仕組みを導入することが重要です。このセクションでは、エラー処理と再接続の実装方法を解説します。

1. エラーハンドリングの実装

WebSocket通信中のエラーをキャッチしてログに記録し、ユーザーに通知する機能を実装します。

コード例

以下は、onerrorイベントを使ったエラー処理の例です。

useEffect(() => {
  socketRef.current = new WebSocket('ws://localhost:8080');

  socketRef.current.onerror = (error) => {
    console.error('WebSocket error:', error);
  };

  return () => {
    if (socketRef.current) {
      socketRef.current.close();
    }
  };
}, []);

エラーメッセージの表示

ユーザーにエラー内容を表示するため、エラー状態を管理するuseStateを追加します。

const [error, setError] = useState(null);

socketRef.current.onerror = (error) => {
  setError('An error occurred. Please try again.');
  console.error('WebSocket error:', error);
};

return (
  <div>
    {error && <p style={{ color: 'red' }}>{error}</p>}
  </div>
);

2. 自動再接続の実装

WebSocket接続が切断された際、自動で再接続を試みる機能を実装します。

コード例

以下は、自動再接続を行う実装例です。

const [isConnected, setIsConnected] = useState(false);
let reconnectInterval;

useEffect(() => {
  const connect = () => {
    socketRef.current = new WebSocket('ws://localhost:8080');

    socketRef.current.onopen = () => {
      setIsConnected(true);
      console.log('WebSocket connected');
    };

    socketRef.current.onclose = () => {
      setIsConnected(false);
      console.log('WebSocket disconnected');
      attemptReconnect(); // 再接続を試みる
    };

    socketRef.current.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  };

  const attemptReconnect = () => {
    reconnectInterval = setInterval(() => {
      console.log('Attempting to reconnect...');
      connect();
    }, 5000); // 5秒ごとに再接続を試みる
  };

  connect();

  return () => {
    clearInterval(reconnectInterval);
    if (socketRef.current) {
      socketRef.current.close();
    }
  };
}, []);

3. 再接続のステータス表示

再接続中であることをユーザーに通知するため、接続状態を表示します。

コード例

return (
  <div>
    <p>Status: {isConnected ? 'Connected' : 'Reconnecting...'}</p>
  </div>
);

4. 再接続時の注意点

無限ループの回避: 再接続を試みる間隔を一定に保ち、無限ループを防止します。
接続のタイムアウト管理: 再接続の試行が失敗し続けた場合、一定回数で停止するロジックを実装することが推奨されます。

  let reconnectAttempts = 0;
  const maxAttempts = 10;

  const attemptReconnect = () => {
    if (reconnectAttempts < maxAttempts) {
      reconnectAttempts++;
      console.log(`Reconnect attempt ${reconnectAttempts}`);
      connect();
    } else {
      clearInterval(reconnectInterval);
      console.log('Max reconnect attempts reached');
    }
  };

5. 最終的なコード統合

エラーハンドリングと自動再接続の機能を統合することで、WebSocket通信を安定させ、ユーザー体験を向上させることができます。

このセクションでの実装により、WebSocket通信の信頼性が向上し、予期しないエラーや切断に対処できる堅牢なシステムを構築できます。

パフォーマンス最適化のポイント

リアルタイム通信を利用するアプリケーションでは、パフォーマンスの最適化が重要です。WebSocket通信における適切な設計とReactの特性を活かした実装により、効率的でレスポンスの良いシステムを構築できます。

1. 必要なタイミングでのみデータを更新

Reactコンポーネントの再レンダリングを最小限に抑えることで、パフォーマンスを向上させることができます。

ポイント

受信したデータを直接状態に保存せず、必要な部分のみを更新します。
useStateやuseReducerを適切に活用して効率的に状態を管理します。

コード例

const [messages, setMessages] = useState([]);

socketRef.current.onmessage = (event) => {
  setMessages((prevMessages) => [...prevMessages, event.data]);
};

この実装により、状態更新が必要なときだけReactが再レンダリングを行います。

2. WebSocketイベントハンドラの最適化

WebSocketのイベントリスナーを最小限にし、不要な処理を避けます。

ベストプラクティス

リスナーの設定はuseEffect内で1回だけ行い、クリーンアップ時に解除します。
データ処理を最小化し、必要に応じてバックグラウンドでの非同期処理を使用します。

コード例

useEffect(() => {
  socketRef.current = new WebSocket('ws://localhost:8080');
  const handleMessage = (event) => {
    // データ処理を最小限に抑える
    console.log('Message received:', event.data);
  };

  socketRef.current.onmessage = handleMessage;

  return () => {
    socketRef.current.removeEventListener('message', handleMessage);
    socketRef.current.close();
  };
}, []);

3. データのバッチ処理

リアルタイム通信で大量のメッセージを扱う場合、データをまとめて処理することで効率を高めます。

コード例

以下の例では、メッセージをバッファに一時保存し、一定時間ごとにまとめて状態を更新します。

useEffect(() => {
  let buffer = [];
  const flushBuffer = () => {
    setMessages((prevMessages) => [...prevMessages, ...buffer]);
    buffer = [];
  };

  socketRef.current.onmessage = (event) => {
    buffer.push(event.data);
  };

  const intervalId = setInterval(flushBuffer, 1000); // 1秒ごとに更新

  return () => {
    clearInterval(intervalId);
    socketRef.current.close();
  };
}, []);

4. 再レンダリングの防止

ReactのuseMemoやuseCallbackを活用して、再レンダリングのコストを削減します。

コード例

以下は、イベントハンドラをuseCallbackでメモ化する例です。

const handleSendMessage = useCallback((message) => {
  if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
    socketRef.current.send(message);
  }
}, []);

5. コンポーネント分割による効率化

データを表示する部分をサブコンポーネントに分割し、必要な部分だけ再レンダリングされるように設計します。

コード例

function MessageList({ messages }) {
  return (
    <ul>
      {messages.map((msg, index) => (
        <li key={index}>{msg}</li>
      ))}
    </ul>
  );
}

function WebSocketExample() {
  const [messages, setMessages] = useState([]);
  return <MessageList messages={messages} />;
}

6. サーバー負荷を軽減する工夫

サーバーサイドでのフィルタリング: クライアントが必要とするデータだけを送信するようにします。
メッセージ圧縮: データサイズを小さくすることで通信の効率を向上させます。

7. 過剰なリソース使用を防ぐための監視

WebSocket接続数の監視: 同時接続数が増えすぎないように管理します。
バックエンド負荷の監視: リクエストが集中した際にサーバーが対応できるよう負荷分散を考慮します。

まとめ

これらの最適化テクニックを活用することで、WebSocket通信のパフォーマンスを大幅に向上させ、スムーズなリアルタイム体験をユーザーに提供できます。

実例：リアルタイムチャットアプリの構築

ReactとWebSocketを組み合わせて、シンプルなリアルタイムチャットアプリを構築してみましょう。このセクションでは、サーバーとクライアントの実装を順に解説します。

1. サーバーサイドの設定

Node.jsで簡単なWebSocketサーバーを構築します。
以下は、クライアントからのメッセージを全クライアントにブロードキャストするサーバーの例です。

サーバーコード

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('A client connected');

  socket.on('message', (message) => {
    console.log('Received:', message);

    // クライアント全員にメッセージをブロードキャスト
    server.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => {
    console.log('A client disconnected');
  });
});

console.log('WebSocket server is running on ws://localhost:8080');

2. Reactクライアントの実装

以下は、チャットアプリのReactクライアントコードです。

完全なコード例

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

function ChatApp() {
  const socketRef = useRef(null);
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');

  useEffect(() => {
    // WebSocket接続を確立
    socketRef.current = new WebSocket('ws://localhost:8080');

    // メッセージ受信時の処理
    socketRef.current.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };

    // クリーンアップ時に接続を閉じる
    return () => {
      if (socketRef.current) {
        socketRef.current.close();
      }
    };
  }, []);

  const sendMessage = () => {
    if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
      socketRef.current.send(message);
      setMessages((prevMessages) => [...prevMessages, `You: ${message}`]);
      setMessage(''); // 入力フィールドをクリア
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Real-Time Chat App</h1>
      <div style={{ marginBottom: '20px', border: '1px solid #ccc', padding: '10px', height: '300px', overflowY: 'scroll' }}>
        {messages.map((msg, index) => (
          <div key={index}>{msg}</div>
        ))}
      </div>
      <div>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message"
          style={{ width: '80%', marginRight: '10px' }}
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
}

export default ChatApp;

3. 動作確認

サーバーを起動します。

  node server.js

Reactアプリを起動します。

  npm start

ブラウザでアプリを開き、複数タブを開いてメッセージを送信してみてください。メッセージがリアルタイムで同期されることを確認できます。

4. アプリの拡張

このアプリをさらに発展させるためのアイデアを以下に示します。

ユーザー名の導入: ユーザーごとの識別子を追加する。
日時の表示: 各メッセージにタイムスタンプを表示する。
接続中のユーザーリスト: 現在接続しているユーザーの一覧を表示する。
通知機能: 新しいメッセージが届いたときに音やビジュアルで通知する。

5. コードの解説

リアルタイムメッセージング: メッセージはサーバーからブロードキャストされ、全クライアントに送信されます。
状態管理: ReactのuseStateを使い、受信したメッセージを状態として管理します。
再利用性: WebSocketのロジックをカスタムHookに切り出すことで、他のアプリケーションでも再利用可能にできます。

まとめ

このチャットアプリの構築を通じて、ReactとWebSocketを使ったリアルタイム通信の基本を学びました。この基礎を応用して、より複雑なリアルタイムアプリケーションを作成する際の出発点としてください。

まとめ

本記事では、React Hooksを活用したWebSocket通信の実装方法について解説しました。WebSocketの基本概念から、Reactでの接続管理、メッセージ送受信、エラーハンドリング、自動再接続、パフォーマンス最適化、さらにリアルタイムチャットアプリの構築まで、実践的な内容を網羅しました。

ReactとWebSocketの組み合わせにより、効率的かつ簡潔にリアルタイム通信を実現できます。この記事を通じて得た知識を基に、ユーザー体験を向上させるリアルタイムアプリケーションを構築してみてください。実例や応用アイデアを試すことで、さらなるスキルアップを目指しましょう。

React Hooksを使ったWebSocket通信の実装方法を徹底解説

WebSocket通信とは？

HTTP通信との違い

WebSocketが活用されるケース

React Hooksの基礎知識

主要なReact Hooks

useState

useEffect

useRef

Hooksのメリット

カスタムHookの利用

WebSocket通信の実装準備

1. WebSocketサーバーのセットアップ

必要なパッケージのインストール

サーバーコードの作成

2. Reactプロジェクトのセットアップ

Reactアプリの作成

必要な依存関係のインストール

3. Reactでの基本的な構造作成

ファイル構成

サンプルコード

useEffectを使った接続管理

1. WebSocket接続の管理

コード例

2. useRefを活用したWebSocketインスタンス管理

ポイント

3. WebSocketの接続ステータス表示

コード例

4. 注意点

メッセージ送受信の実装

1. メッセージの送信

コード例

2. メッセージの受信

ポイント

3. 実行結果

4. 注意点

エラーハンドリングと再接続

1. エラーハンドリングの実装

コード例

エラーメッセージの表示

2. 自動再接続の実装

コード例

3. 再接続のステータス表示

コード例

4. 再接続時の注意点

5. 最終的なコード統合

パフォーマンス最適化のポイント

1. 必要なタイミングでのみデータを更新

ポイント

コード例

2. WebSocketイベントハンドラの最適化

ベストプラクティス

コード例

3. データのバッチ処理

コード例

4. 再レンダリングの防止

コード例

5. コンポーネント分割による効率化

コード例

6. サーバー負荷を軽減する工夫

7. 過剰なリソース使用を防ぐための監視

まとめ

実例：リアルタイムチャットアプリの構築

1. サーバーサイドの設定

サーバーコード

2. Reactクライアントの実装

完全なコード例

3. 動作確認

4. アプリの拡張

5. コードの解説

まとめ

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル