JavaScriptの基本、Ajaxを理解しよう

はじめに

Webサイトを閲覧していると、ページ全体を再読み込みすることなく、コンテンツが瞬時に更新される場面を見たことはありませんか？例えば、検索ボックスに文字を入力すると、すぐに関連する検索結果が表示されたり、SNSでスタンプを押すとすぐに反映されたりします。これらの背後には、 Ajax （Asynchronous JavaScript and XML）という技術が使われています。

Ajaxを使うと、ページ全体をリロードせず、サーバーから必要なデータだけを非同期で取得し、その結果をページの一部に反映することができます。これにより、ユーザーにスムーズで快適な操作体験を提供できるのです。

現在、AjaxはほとんどのWebサービスで利用されており、Web開発に欠かせない技術となっています。本記事では、初心者の方にもわかりやすく、Ajaxの仕組みや役割について解説していきます。Ajaxを理解することで、Webアプリケーションがどのようにしてリアルタイムな操作を実現しているのかがわかるようになります。それでは、さっそくAjaxの基本から学んでいきましょう。

この記事について

目的

• Ajaxを理解する
• Webで使われている非同期処理が、どのような仕組みで動いているかを知る

対象者

• プログラミングやJavaScriptを始めたばかりの方
• Webアプリケーションで使われる非同期通信について学びたい方
• Ajaxや非同期処理に興味があり、もう少し理解を深めたい方

Ajaxについて

Ajaxとは、Webブラウザ内で非同期通信を行いながら、画面の一部だけを動的に更新する技術です。JavaScriptを使ってサーバーにリクエストを送り、その結果を受け取った後、ページ全体を再読み込みすることなく、必要な部分だけを更新できます。これを可能にしているのが、JavaScriptのXMLHttpRequestという仕組みです。

従来のWebサイトでは、ユーザーがサーバーにリクエストを送るたびに、ページ全体が再読み込みされていました。しかし、Ajaxを使うことで、ページの一部だけを素早く更新できるため、ユーザーの操作感がよりスムーズになり、ページの表示スピードも大幅に向上します。

Ajaxを利用し何ができるか

では、Ajaxを使うとどのようなことができるのか、具体的に見てみましょう。例えば、Google Mapでは、地図を拡大したり、スクロールして表示位置を変えたりすることができますが、そのとき画面全体が再読み込みされることはありません。元の表示部分はそのままで、新しく表示する部分だけが素早く更新されます。

これを可能にしているのは、Ajaxの仕組みです。もしAjaxを使わずに同じ操作をすると、地図を拡大したりスクロールするたびに、ページ全体が再読み込みされてしまい、使い勝手が良くありません。現在のように、スムーズに地図が動くGoogle Mapは、Ajaxの技術で実現しています。

Ajaxを利用したWebサービスの機能例

現在の多くのWebサービスでは、Ajaxがさまざまな場面で活用されています。Google Map以外にも、以下のような機能がAjaxによって実現されています。

• インクリメンタル検索機能

  検索ボックスにキーワードを入力するたびに、フィルタリングされた検索結果がリアルタイムで表示されます。これにより、ユーザーは検索結果を確認しながら、さらに条件を追加して絞り込むことができます。

• 商品カートの更新

  ECサイトでは、商品をカートに追加してもページ全体を再読み込みすることなく、カート内の情報がすぐに更新されます。追加した商品の数や合計金額が即座に反映されるので、スムーズにショッピングを進めることができます。

• SNSのスタンプやコメントの更新

  SNSでは、コメントにスタンプを押すと、その結果がサーバーに送られ、ページを再読み込みせずにスタンプ数やコメントがリアルタイムで更新されます。Ajaxの仕組みにより、ユーザーはすぐに反応を見ることができます。

Ajaxの仕組み

Google Mapのように、Webページを部分的に再読み込みせずに更新するAjaxは、主に以下の技術を組み合わせて実現されています。

• XMLHttpRequest
• JavaScript
• XML（JSON）
• DOM

それでは、これらの技術がどのように機能しているのか、一つずつ見ていきましょう。

XMLHttpRequest

XMLHttpRequestは、Ajaxの中心となるAPIです。このAPIを使うことで、ブラウザとサーバーが非同期にデータをやり取りできます。つまり、ページ全体を再読み込みせずに、データを送受信することができます。

最近では、Fetch APIがXMLHttpRequestに代わって使われることが多くなっています。Fetch APIは、非同期通信を簡単に行えるPromiseという仕組みを使っているので、コードがシンプルになります。これにより、Ajaxの実装がより直感的でわかりやすくなっています。

JavaScript

JavaScriptは、ブラウザで動作するプログラミング言語で、Ajaxの基本を支えています。JavaScriptを使って、XMLHttpRequestやFetch APIを操作し、サーバーとのデータ通信を行います。また、通信結果を受け取って、ページの一部を動的に更新することもできます。

XML（JSON）

Ajaxでは、サーバーとのデータのやり取りにJSONが一般的に使われています。JSON（JavaScript Object Notation）は、データの形式がシンプルで、JavaScriptと相性が良いため、サーバーから受け取ったデータを扱いやすくなっています。

以前はXML（eXtensible Markup Language）がデータのやり取りに使われていましたが、現在はその役割をJSONが担うようになっています。XMLより軽量でシンプルなJSONの方が扱いやすいため、現在ではほとんどのWebサービスでJSONが使われています。

DOM

通信で取得したデータをWebページに反映するためには、DOM（Document Object Model）の操作が必要です。DOMとは、HTMLやXML文書をプログラムで操作できるようにする仕組みです。JavaScriptを使ってDOMを操作し、特定のページ要素を更新することで、ページ全体を再読み込みせずに部分的な更新が行えます。

これらの技術が組み合わさることで、Ajaxによる非同期通信とページの動的な更新が可能になります。

このセクションで紹介した、Fetch API、JSON（オブジェクト）、DOMについて、さらに詳しく知りたい方は、以下の記事もぜひご覧ください。それぞれの技術がどのように機能しているのか、わかりやすく解説しています。

• Fetch API

  https://envader.plus/article/465

• JSON（オブジェクト）

  https://envader.plus/article/464

• DOM

  https://envader.plus/article/426

Ajaxを使用した処理の流れ

ここまで、Ajaxの仕組みや、それを支える技術について学びました。次に、Ajaxを使った具体的な処理の流れを確認していきましょう。

1. ユーザー操作による非同期通信の開始

   ユーザーがWebサービスを利用するとき、例えばボタンをクリックしたり、フォームに入力したりするアクションが発生します。この操作に応じて、JavaScriptがサーバーにリクエストを送信する準備が開始されます。

2. JavaScriptでリクエストを送信

   ユーザーの操作を受けて、JavaScriptでサーバーへのリクエストが作成されます。このとき、XMLHttpRequestやFetch APIを使って、サーバーにデータを送る準備がされ送信します。この通信は非同期で行われるため、サーバーからのレスポンスを待つ間も、ユーザーは他の操作を続けることができます。

3. サーバー側でリクエストを処理

   サーバーがリクエストを受け取ると、そのリクエストに応じて必要な処理が行われます。例えば、サーバーがデータベースから情報を取り出したり、計算を行って結果を返したりします。

4. サーバーがレスポンスを返す

   サーバーは処理を終えると、レスポンス（通常はJSON形式のデータ）をユーザーに返します。

5. ページの更新

   JavaScriptがサーバーからのレスポンスを受け取ると、受け取ったデータを元にDOM操作を行い、ページの一部を更新します。このとき、ページ全体を再読み込みせずに、必要な部分だけが更新されるため、スムーズな操作感が実現されます。

Ajaxを使用した機能を体験しよう

Ajaxの仕組みや処理の流れを学びました。このセクションでは、実際にAjaxを使用した機能をハンズオンで作成し、理解を深めていきましょう。

このハンズオンでは、無料のオンラインモックAPIサービスJSONPlaceholderを使ってデータを取得し、JavaScriptライブラリのReact.jsとFetch APIを使用して、キーワードによるリアルタイム検索機能を作成します。

JSONPlaceholderは、開発者がAPIを使ってデータのやり取りを練習できる無料のサービスです。

• JSONPlaceholder

  https://jsonplaceholder.typicode.com/

また、ブラウザ上で直接コードを試してみたい場合は、以下のサイトがおすすめです。フロントエンドの環境構築が不要で、すぐにコードを記述し実行できます。

• StackBlitz

  https://stackblitz.com/

• StackBlitzの使い方については、こちらの記事で詳しく解説しています。

  https://envader.plus/article/434

ReactとAjaxを使用したキーワードによるリアルタイム検索機能の作成

Reactプロジェクトを作成し、以下のコードを編集してみましょう。このハンズオンでは、指定したユーザーの投稿が、リアルタイムで検索結果として表示される機能を作成します。ドロップダウンリストでユーザーを選択すると、選択されたユーザーに対応する投稿が表示される仕組みです。

// App.jsx

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

const App = () => {
  const [selectedUser, setSelectedUser] = useState('all');
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 初期表示では全ての投稿を表示
    fetchPosts(selectedUser);
  }, [selectedUser]);

  const fetchPosts = async (userId) => {
    let url = 'https://jsonplaceholder.typicode.com/posts';
    if (userId !== 'all') {
      url += `?userId=${userId}`;
    }

    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error('検索に失敗しました');
      }
      const data = await response.json();
      setPosts(data);
    } catch (err) {
      setError(err.message);
    }
  };

  const handleSelectChange = (event) => {
    setSelectedUser(event.target.value);
  };

  return (
    <div>
      <h2>キーワードによるリアルタイム検索</h2>
      <div>
        {/* ドロップダウンリスト */}
        <label htmlFor="user-select">表示するユーザーを選択：</label>
        <select
          id="user-select"
          value={selectedUser}
          onChange={handleSelectChange}
        >
          <option value="all">All</option>
          <option value="1">User 1</option>
          <option value="2">User 2</option>
          <option value="3">User 3</option>
        </select>
      </div>
      {/* 検索結果を表示 */}
      <div id="result">
        {error && <p>{error}</p>}
        {posts.length > 0 ? (
          posts.map((post) => (
            <div key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
              <hr />
            </div>
          ))
        ) : (
          <p>このユーザーには投稿がありません</p>
        )}
      </div>
    </div>
  );
};

export default App;

このコードを実行することで、以下のようなUIが作成されます。ドロップダウンリストでユーザーを選択すると、そのユーザーの投稿内容が動的に表示されることを確認しましょう。Ajaxの仕組みを使って、検索結果がリアルタイムで変化する様子が体験できます。

このハンズオンで使用しているFetch APIや、非同期処理に使うasync/await、Promiseについては、以下の記事で詳しく解説しています。さらに理解を深めたい方はぜひご覧ください。

• Promise

  https://envader.plus/article/468

• async/await

  https://envader.plus/article/472

• Fetch API

  https://envader.plus/article/465

この記事で学んだこと

ここまで、Ajaxの基本とその処理の流れ、そして具体的な活用方法について学びました。簡単に振り返ってみましょう。

Ajaxとは、Webブラウザ内で非同期通信を行い、ページ全体を再読み込みせずに画面の一部だけを動的に更新する技術です。ユーザーの操作をJavaScriptが検知し、サーバーと非同期にやり取りを行います。これにより、ユーザーにスムーズな操作感を提供し、ページの表示スピードも向上します。

ハンズオンでは、JSONPlaceholderを使って、ReactとFetch APIを活用したキーワードによるリアルタイム検索機能を作成しました。これを通じて、Ajaxの具体的な動きを確認し、実際にどのようにデータのやり取りが行われるかを体験していただけたと思います。

Ajaxは、現在のWeb開発に欠かせない技術です。今回学んだ基本をしっかりと理解し、今後の学習に活かしていきましょう。

参考資料

• Wikipedia - Ajax

  https://ja.wikipedia.org/wiki/Ajax

• MDN web docs - AJAX

  https://developer.mozilla.org/ja/docs/Glossary/AJAX