jQueryのget()メソッドとは？使い方と実例をわかりやすく解説

Webアプリケーション開発において、HTTPリクエストは欠かせない基盤となる仕組みです。HTTPリクエストを使うことで、ユーザーの入力データを取得し、バックエンドを経由してサーバーへ送信し、その後レスポンスを受け取ることができます。

リクエストにはさまざまな種類があります。POSTリクエストのように、データベースへデータを保存するために送信されるものもあれば、サーバーからレスポンスを受け取ってユーザーに表示するGETリクエストのように、既存データを取得するためのものもあります。jQueryには、こうしたGETリクエストを簡潔に送信できるget()メソッドが用意されています。

jQueryのget()メソッドとは？

jQueryのget()は、指定したURLエンドポイントに対してGETリクエストを送信し、レスポンスを受け取るためのメソッドです。ここでいうレスポンスとは、サーバーから返送されてくるデータのことです。POSTリクエストとは異なり、GETリクエストはサーバー上にすでに存在するデータを受け取るだけのもので、データベースに何かを保存することはありません。

GETリクエストは、特定のデータセットを要求して、それに対して何らかの処理を行いたい場合に便利です。たとえば、ECサイトのアプリを構築している場合、商品情報にアクセスするためにURLエンドポイントへGETリクエストを送ります。レスポンスとして受け取ったデータをもとにスタイリングを施せば、購入可能な全商品をカードレイアウトで表示することができます。

つまり、jQueryのget()は「URLへリクエストを送り、レスポンスとしてデータを受け取る」役割を担います。開発者はサーバーから取得したデータを自由に扱い、ユーザーへの表示方法を柔軟に決めることができるのです。

GETリクエストの概要が理解できたところで、次はget()メソッドの構文を見ていきましょう。

get()メソッドの基本構文

jQueryを使えば、GETリクエストの送信は非常にシンプルです。get()には、文字列としてURLアドレスと、データを受け取るためのコールバック関数を渡します。コールバック関数とは、メソッドに渡され、後で実行される関数のことです。

get()にはいくつかのオプション引数を渡すこともできますが、最もよく使われるのはURLとコールバック関数です。

引き続きECサイトの例で、get()を使った基本的なGETリクエストがどのようなものか見てみましょう。

$.get('/products', (data) => {
  console.log(data)
})

get()を呼び出し、URLを文字列として渡しています。このリクエストは商品一覧ページ（products index）に送られ、サーバーがデータを返します。コールバック関数は複数の引数を受け取れますが、ここでは「data」と「status」があれば十分です。

dataには、リクエストによって受け取ったデータが格納されます。この例では、単純にコンソールへ返された内容を出力しているだけです。jQueryはいくつかのデータ型を自動的に判別できますが、多くの場合、JSONオブジェクトが返ってきます。

JSONオブジェクトから必要な情報を取り出すには、さらにコードを書く必要があります。具体的な方法を見ていきましょう。

jQuery get()の実践例

ここでは、楽しいAPIを使った例を紹介します。「Open Notify」が提供するこのAPIは、現在宇宙にいる宇宙飛行士の人数を教えてくれるもので、名前や搭乗宇宙船の情報も取得できます。まずはURLをget()に渡してみましょう。

$.get('https://api.open-notify.org/astros.json', (data) => {
  console.log(data)
})

リクエストを送信すると、コンソールには次のようなレスポンスが出力されます。

URLに「.json」と含まれていることから、サーバーからJSONオブジェクトが返されることがわかります。コンソールには「message」「number」「people」というキーが表示されているはずです。「message」の値がsuccessになっていることは、エラーハンドリングの際に役立ちます。

「number」は宇宙にいる人数を示し、「people」はオブジェクトの配列を値として持っています。ここから「people」配列を反復処理して、その情報をリスト形式でユーザーに表示することもできます。このようにデータを受け取れると、サーバーから返されたデータをどう表示するかは開発者の裁量に委ねられます。

まとめ

本記事では、GETリクエストとは何か、そしてjQueryを使うことでそれがいかに手軽に行えるかを確認しました。基本的な構文に慣れたところで、get()の実際の動作も見てきました。重要なのは、コールバック関数の内部でデータを反復処理したり、描画したりできるという点です。

この知識を活かして、シンプルな公開APIを探し、GETリクエストの送信とデータ表示を練習する小さなプロジェクトを作ってみるのがおすすめです。受け取ったデータを魅力的な形で表示できるようになることは、熟練した開発者への第一歩となります。