JavaScriptを使ったサーバーとの通信方法

2024年9月19日

ウェブアプリケーション開発において、クライアントとサーバーの通信は非常に重要な要素です。

JavaScriptを使ってサーバーと通信することで、動的なウェブページを実現することができます。

今回は、その基本的な方法から最新の技術まで詳しく解説します。

XMLHttpRequest: 古典的な方法

かつて、JavaScriptでサーバー通信を行う際、最も一般的に使われていたのがXMLHttpRequestオブジェクトです。

このオブジェクトを用いることで、サーバーからデータを取得したり、サーバーにデータを送信したりすることが可能です。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

この方法は設定が多く、少々繁雑ですが、歴史があり互換性が高いです。

Fetch API: モダンな方法

近年ではFetch APIが主流となっています。

このAPIはPromiseを返すため、より直感的でシンプルに記述できます。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

この方法は可読性が高く、エラーハンドリングもしやすいため、推奨される方法です。

Axios: ライブラリを活用する

さらに高度な操作や利便性を求める場合は、axiosのようなライブラリを使用すると良いでしょう。

このライブラリはFetch APIをベースにしており、さまざまな便利機能が追加されています。

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Axiosは設定が簡単で、リクエストやレスポンスのインターセプター、タイムアウトの設定など多くの機能があります。

WebSocket: リアルタイム通信

続いて、リアルタイム通信を実現するための技術としてWebSocketを紹介します。

これはサーバーとの継続的な接続を確立し、双方向のデータ通信を可能にします。

const socket = new WebSocket('ws://example.com/socket');

socket.onopen = function(event) {
  console.log('Connection opened:', event);
};

socket.onmessage = function(event) {
  console.log('Message received:', event.data);
};

socket.onclose = function(event) {
  console.log('Connection closed:', event);
};

socket.onerror = function(error) {
  console.error('Error occurred:', error);
};

WebSocketはチャットアプリやオンラインゲームなど、リアルタイム性が重要なアプリケーションに最適です。

GraphQL: 効率的なデータ取得

最後に、近年注目を集めているGraphQLを紹介します。

これはクエリ言語で、特定のデータだけを効率的に取得することができます。

const query = `
{
  user(id: "1") {
    name
    email
  }
}`;

fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ query })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

GraphQLはAPIを柔軟に利用したい場合に非常に便利です。