用語集A〜Z

AJAX

よみ: エージェイエーエックス

Web ページ全体をリロード(再読み込み)することなく、裏側でサーバーと通信し、「画面の一部だけを瞬時に書き換える」技術です。Asynchronous JavaScript(JavaScript / JS) and XML の略(現在は XML ではなく「JSON」というデータ形式を使うのが主流ですが、名前はそのまま定着しています)。2005 年に Google マップが「画面を切り替えずに地図をスクロールできる」仕組みとして実装したことで、世界中に普及しました。

実務における活用シーン(メリット)

Web 担当者が自分でコードを書くことはありませんが、以下のような「画面遷移のないスムーズな体験(UX)」を作りたい時に、業者へ依頼します。

  • 無限スクロール:SNS のタイムラインのように、下へ行くと次々とコンテンツが読み込まれる。
  • リアルタイム更新:画面を再読み込みしなくても、チャットの新着メッセージや、株価のグラフが自動で切り替わる。
  • SPA(シングルページアプリケーション):アプリのように、サクサク動く Web サイトの構築。

よくある落とし穴と SEO へのリスク(注意点)

  • 「カッコいい UI」の罠:動きをスムーズにしたいからと AJAX を多用しすぎた結果、検索エンジン(Google のクローラー)がコンテンツの中身を読み取れなくなり、SEOの評価が落ちてしまう事故が多発しています。
  • 安全な設計判断:「SEO で検索上位を狙いたい重要な文章(記事や商品情報)」は従来の HTML で最初から表示させ、「UI(使い勝手)を良くしたい部分」にだけ AJAX を使う、という切り分けの判断が担当者には求められます。

言葉をよく利用する人

  • コーダー / フロントエンドエンジニア
  • Web 担当者(発注側)
  • デザイナー
  • バックエンドエンジニア

会話上での使用例

検索結果の表示方法をデザイナーと相談する場面

  • デザイナー
    ページを切り替えずに、その場で検索結果を出したいんです。
  • Web担当者
    AJAXで実現できます。ただ、検索結果が狙っているキーワードに絡む場合は、最初のHTMLにも内容を含めておく設計にしましょう。
  • デザイナー
    見た目だけでなく、検索のことも考える必要があるんですね。

サイト全体のSPA化をプロデューサーと検討する場面

  • プロデューサー
    いっそサイト全体をSPAにできないでしょうか。
  • Web担当者
    AJAXベースのSPAは体験としては強力ですが、検索対応とアクセシビリティの手間が増えます。コーポレートサイトにはあまり向いていないと思います。
  • プロデューサー
    では全面採用は見送りで考えましょう。

関連 Lesson(本書本文)

Lesson 1-5 HTML / CSS / JavaScript と CMS