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は体験としては強力ですが、検索対応とアクセシビリティの手間が増えます。コーポレートサイトにはあまり向いていないと思います。
-
プロデューサー
では全面採用は見送りで考えましょう。