jQuery

jQueryによるローカルファイルの読み込みと使い分け方

はじめに

jQuerynにはいくつかのローカルファイルの読み込むAPIが用意されているため、それらを使い分ける方法と注意点を書いておきます。

環境

jQuery version: 3.2.1
Browser: Chrome

ローカルファイルを読み込む前にすること

Chromeでローカルファイルにアクセスしようとするとセキュリティの問題で以下のエラーメッセージが出ます。

"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

対処方法としては以下の手順に従ってChromeを開く。

① Chromeを閉じる

② chrome.exeファイルを探す
(Windows 10では"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"にありました)

③ コマンドプロンプトから以下を実行

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe --allow-file-access-from-files

※僕の場合は、これをbatファイルにして保存しておき、batファイルを開くだけでよいようにしています。

Ajaxによるローカルファイルの読み込み

jQueryのローカルファイルの読み込みはAjax(非同期通信)を利用したものです。
jQueryのローカルファイル読み込みAPIを見る前に、Ajax(非同期通信)をする方法を学んでおくことは重要です。
※必要のない人は読み飛ばしてください。

同期通信と非同期通信

ここではローカルファイルがあるサーバ上にあるファイルと考えてください。
その場合、そのサーバと通信を行うことで情報を取得することが可能となります。
その通信には2種類あり、それが同期通信と非同期通信です。

同期通信は、データ通信のリクエストを出してから、サーバからレスポンスをもらうまで他の処理を行わずに待つ通信方法です。

一方で、非同期通信はレスポンスをもらうまで他の処理を行っておいて、レスポンスが来たら処理を行う通信方法です。

非同期通信は非常に効率が良いことが何となくわかると思います。
実際Googleマップはこれにより実現されていて、地図の新しい領域を読み込んでいる最中(通信中)にも、テキスト検索を行ったり、地図の表示領域を操作したりする他の処理を行うことが可能です。

XMLHttpRequestを使用した非同期通信

JavaScriptにはAjax(非同期通信)を行うための組み込みオブジェクトであるXMLHttpRequestが存在し、これを利用しやすくするためのAPIをjQueryが提供しています。

XMLHttpRequestはファイルの読み込み以外にもサーバと通信するための様々な仕組みが用意されていますが、今回は読み込みについての記事ですので、読み込みを中心にお話します。

XMLHttpRequestはHTTP通信という通信規格を利用しており、読み込みの際にはHTTP通信のGETメソッドを使用しています。
それをXMLHttpRequestで行うためには以下のようにします。

// 読み込みたいURL
var url = 'url';

// XMLHttpRequestオブジェクトのインスタンス作成
var xhr = new XMLHttpRequest();
// 読み込むURLとGETメソッドを使用することを設定
xhr.open('GET', url);

これだけでは、ファイルは読み込めていません。
次にファイルが読み込めた時の設定をしておきます。
ここでは読み込んだファイルのタイプを指定し、読み込みが完了した時のコールバック関数を指定しておきます。

// 読み込むファイルのタイプを指定(ここではjsonにしておきます。)
xhr.responseType = 'json';

// 読み込み完了した時のコールバック関数の設定
xhr.addEventListener('load', function() {
  // responseTypeに従った読み込んだ実体が
  // xhr.responseに入っています。
});

読み込み完了時以外の状態にコールバック関数を指定しておきたい場合はxhr.onreadystatechangeにコールバックを指定し、xhr.readyStateを利用して条件分岐させる方法を取るといいでしょう。

これで準備が整いました。
最後に通信を始める次のスクリプトを書きます。

// 通信開始
xhr.send(null);

sendメソッドの引数はGETメソッドを使用する際は基本的にはnullを指定します。

ここで一度ここまでのコードを見返してみようと思います。

// 読み込みたいURL
var url = 'your/url';

// XMLHttpRequestオブジェクトのインスタンス作成
var xhr = new XMLHttpRequest();
// 読み込むURLとGETメソッドを使用することを設定
xhr.open('GET', url);

// 読み込むファイルのタイプを指定(ここではjsonにしておきます。)
xhr.responseType = 'json';

// 読み込み完了した時のコールバック関数の設定
xhr.addEventListener('load', function() {
  // responseTypeに従った読み込んだ実体が
  // xhr.responseに入っています。
});

// 通信開始
xhr.send(null);

「ただファイルを読み込むだけなのに、コード量多くない?」と思いませんでしたでしょうか。
そうです。それを楽にしてくれるのがjQueryのAPIなのです。

jQueryによるローカルファイルの読み込み

jQueryにローカルファイルの読み込みに使用するメソッドを紹介します。

loadメソッド

雛形

$('selector').load(url [,object][,function][,type]);

引数

引数 説明
url 読み込むデータのURL
object サーバに送るデータ
function 通信後に実行されるコールバック関数
  第一引数:取得したデータ
  第二引数:通信状態
  第三引数:XMLHttpRequestオブジェクト
type 読み込むデータのタイプ

用途

jQueryによってセレクタを使用して得た要素に読み込んだ内容を埋め込む際に使用。
したがって、htmlファイルを読み込み、そのまま埋め込む際によく使われる。

getメソッド

雛形

$.get(url [,object][,function][,type]);

引数

引数 説明
url 読み込むデータのURL
object サーバに送るデータ
function 通信成功時に実行されるコールバック関数
  第一引数:取得したデータ
  第二引数:通信状態
  第三引数:jqXHRオブジェクト
type 読み込むデータのタイプ

用途

loadメソッドと違い、jQueryで取得した要素ではなく。jQueryオブジェクトのメソッドであり、埋め込み用ではない。
したがって、JavaScriptとしてデータを保持しておきたい時に用いる。

ajaxメソッド

雛形

$.ajax({
  url: 'url',
  type: 'GET',
  dataType: 'dataType',
  success: function(data) {},
  error: function(data) {}
);

引数

Ajaxの設定を記述したオブジェクトを引数にします。
プロパティは以下の通り。

プロパティ 説明
url 読み込むファイルのURL
type 通信の種類
dataType 読み込むデータのタイプ
success 成功時のコールバック関数
error 失敗時のコールバック関数

用途

ajaxメソッドは読み込み(GETメソッド)だけではなく、他のAjaxによる通信メソッドも使用可能なjQueryオブジェクトのメソッドです。
したがって、上述したXMLHttpRequestを用いたAjax通信をより手軽に設定のためのオブジェクトを記述することで行う方法です。

getJSONメソッド

雛形

$.getJSON(url[,success]);

引数

引数 説明
url 読み込むデータのURL
success 通信成功時に実行されるコールバック関数

用途

以下のコードを省略したものであり、jsonファイルを読み込むためのAPIです。

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

getScriptメソッド

雛形

$.getScript(url [,success]);

引数

引数 説明
url 読み込むデータのURL
success 通信成功時に実行されるコールバック関数

用途

以下のコードを省略したものであり、jsファイルを読み込むためのAPIです。

$.ajax({
  dataType: "script",
  url: url,
  success: success
});