【jQuery入門】get()の使い方とデータを取得する方法！

こんにちは、ライターのマサトです！

今回は、jQueryでサーバーと通信を行いデータを受け取ることが可能な「get()」メソッドについて学習をしていきます！

この記事では、

という基本的な内容から、

などの応用的な使い方に関しても解説していきます。この記事で、「get()」をしっかり学習して自分のスキルアップを目指しましょう！

「get()」とは？

それでは、まず最初に「get()」メソッドについての基本的な知識から学んでいきましょう。「get()」は、jQueryからサーバーと通信を行い任意のデータを取得することができるメソッドになります。

例えば、サーバー側で「お天気情報」を保持している場合、「get()」で天気情報を取得してブラウザに表示するようなことが可能です！

逆に、ブラウザ側からサーバーへデータを送信する場合には「post()」メソッドがよく使われます。「post()」についての基本的な知識は、次の記事で詳しくまとめているのでぜひ合わせて参考にしてみてください！

get()の使い方

ここからは、get()メソッドを使ったプログラミング手法を学習していきましょう！　get()の基本的な書き方やサーバーから任意のHTMLファイルを取得する方法まで具体的に見ていきます。

get()の書き方

まず最初に、get()メソッドの基本的な書き方を学習しましょう！　get()を記述するのに必要なのは、通信することになるサーバーへのパス（URL）になります。

記述方法としては次のようになります！

$.get( サーバーへのパス )

引数に指定するパスですが、「https://sample.com/data」のようにURLを記述するのが一般的です。次の章で、通信方法を詳しく見ていきましょう！

get()でHTMLファイルを取得する方法

それでは、実際にget()を使ってサーバーからデータを取得してみましょう！サンプル例として、サーバー内にある別のHTMLファイルをget()で取得してみます。

そこで、get()メソッドを記述したjQueryファイルと同じサーバー内に、以下のようなHTMLファイルを作っておきます。

<ul id="list">
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ul>

単純なリスト要素だけですが、これを「list.html」として保存しておきましょう。

次に、jQueryでget()を以下のように記述します！

$.get( 'list.html' )

この記述だけで、先ほどサーバーに保存した「list.html」を取得することができるのです。あとは、jQuery側で取得したHTMLファイルを自由に操作することができるので、さまざまな用途に活用できるわけです。

get()でHTMLファイルを表示する方法

今度は、先ほど取得したHTMLファイルをブラウザに表示してみましょう！get()メソッドに続けて「done()」を記述することで、サーバーとの通信が正常に完了したタイミングで任意の処理を実行することができます。

次のサンプル例を見てください！

$.get('list.html')
.done(function( data ) {

    $('div').html( data );

})

この例では、get()を記述したあとに「.（ドット）」で「done()」の処理を繋げているのが分かります。このように記述することで、「list.html」を正常に取得したタイミングでdone()の中身を自動的に実行できるわけです。

今回のサンプル例では、「html()」メソッドを使ってlist.htmlの中身をdiv要素内に出力するという処理を行っています。つまり、get()で取得したHTMLファイルをブラウザに表示することができるという意味になります。

get()でサーバーと通信をする

今度は、外部のサーバーと通信を行い任意のデータを取得してみましょう！get()メソッドは、基本的に同じドメインのサーバーと通信するためのメソッドです。

しかしながら、異なるドメインの外部サーバーがget()でデータを取得できるように設定されている場合のみ、通信を行うことができます。

サーバーのデータを取得する方法

それでは、サーバー側が提供しているデータを取得してみましょう。基本的な記述方法はこれまでとまったく同じです。今回は、テストサーバーとして「httpbin.org」を使いget()で任意のデータを取得してみます。

次のサンプル例を見てください

$.get('https://httpbin.org/get')

.done(function(data) {

    console.log( data );

})

今回利用したテストサーバーは、「https://httpbin.org/get」というURLにアクセスするとGet情報を取得できます。そこで、get()の引数にURLをそのまま記述して「done()」の中に取得したデータをコンソールログへ出力するようにしています。

ちなみに、コンソールログではなくブラウザの画面に表示したい場合は次のように記述します。

$('div').text( JSON.stringify(data) );

サーバーから取得したオブジェクトデータを「JSON.stringify()」でJSONデータに変換することで画面に出力できるようになります。

get()でエラーハンドリングをする方法

get()メソッドには、「done()」以外にも特定のタイミングで処理を実行できる記述方法があるのでご紹介しておきます！get()で任意のタイミングによる処理の実行方法は全部で3種類あります。

次のサンプル例を見てください。

$.get( サーバーへのパス )

//①サーバーからの返信を受け取る 
.done( function(data) { } )

//②通信エラーの場合
.fail( function() { } )

//③通信が終了した場合
always ( function() { } )

「①done()」は、これまでにも出てきましたが正常にサーバーと通信できたあとに処理が実行されます

「②fail()」は、通信が正常にできなかったタイミングで処理が実行されます。

「③always()」は、通信異常に関係なくサーバーと通信が終了したタイミングで処理が実行されます。

上記の内容を踏まえると、通信エラーが起きた場合のことを想定して「②fail()」も一緒に記述することが望ましいと言えるでしょう。つまり、通信できなかった場合にユーザーへ通知することができれば、ユーザビリティの向上にも繋がるというわけです。

get()の類似メソッド

jQueryには「get()」と同じような機能を持つメソッドがいくつか用意されています。なかでも特に利用するケースが多い「getJSON()」「ajax()」について、その特徴を解説していきます！

getJSON()でJSONデータを取得する方法

「getJSON()」メソッドは、get()を使ってJSONデータを取得することに特化したメソッドになります。ちなみに、get()でも引数にJSON形式を指定すれば同じことが可能です。

一般的な記述方法は、これまでのget()とほぼ同じです！

$.getJSON('sample.json')
  
  //通信が成功した場合の処理
  .done(function(data) { })
  
  //通信がエラーになった場合の処理
  .fail(function(err) { })
  
  //通信状態に関係なく毎回実行される処理
  .always(function() { })

今まで「get」と記述していた箇所を「getJSON」に書き換えるだけでOKです！

引数に指定するパスはJSON形式のファイルパスか、サーバーのURLを記述するのが一般的です。また、通信タイミングによって「fail()」「always()」を記述できるのも、これまでのget()メソッドと同様です。

ajax()でサーバーと通信する方法

「ajax()」はさまざまな通信処理を行うことが出来るメソッドで、実はget()の中身もajax()で記述されています。ajax()はさまざまな通信をするために多数のオプションが用意されているのですが、簡単に記述すると以下のようになります。

$.ajax({
    type: "GET",
    url: サーバーへのパス,
    dataType:"json",
})
  
//通信が成功した場合の処理
.done(function(data) { })
  
//通信がエラーになった場合の処理
.fail(function(err) { })
  
//通信状態に関係なく毎回実行される処理
.always(function() { })

この例では、ajax()メソッドを使ってJSON形式のデータをサーバーから取得しています。

「type」は通信タイプのことで、今回はGET通信を指定しています。

「url」はサーバーへのパスになります。

「dataType」はxmlやhtmlなど取得する際のデータ形式のことで、今回はJSON形式を指定しています。

このように記述することで、get()やgetJSON()のメソッドと同じような機能を実現することができるのです。

まとめ

今回は、jQueryでサーバーと通信してデータを取得できる「get()」メソッドについて学習をしました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！