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

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

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

この記事では、

  • 「get()」とは?
  • get()の使い方

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

  • get()でサーバー通信をする
  • get()の類似メソッド

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

「get()」とは?

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

例えば、サーバー側で「お天気情報」を保持している場合、「get()」で天気情報を取得してブラウザに表示するようなことが可能です!
jquery-get-img-1
逆に、ブラウザ側からサーバーへデータを送信する場合には「post()」メソッドがよく使われます。「post()」についての基本的な知識は、次の記事で詳しくまとめているのでぜひ合わせて参考にしてみてください!

【jQuery入門】post()でデータを送信・取得する方法!
更新日 : 2019年5月4日

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>項目1</li>
    <li>項目2</li>
    <li>項目3</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()」メソッドについて学習をしました!

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

  • get()は引数にサーバーへのパスを指定することで、HTMLやJSONなどのデータを取得できる
  • 「done()」「fail()」「always()」を追記することで、任意のタイミングで処理を実行できる
  • 類似メソッドとして「getJSON()」「ajax()」が提供されている

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

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー