こんにちは、ライターのマサトです！
今回は、HTMLファイルなどを読み込んで画面に出力することができる「load()」メソッドについて学習をしていきましょう！
この記事では、
- 「load()」とは？
- load()の使い方
- functionを設定するには？
- セレクタ指定について
- ajax()とload()の違いについて
などの基本的な内容から、応用的な使い方に関しても解説していきます。
この記事で、「load()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「load()」とは？
それでは、まず最初に「load()」メソッドの基本的な知識から学んでいきましょう。「load()」は、任意のファイルをHTMLコンテンツとして取得＆出力することができるメソッドになります。
ここで重要なのは、取得したファイルをHTMLコンテンツとして出力できるという点です。例えば以下のようなHTMLファイルがあるとします。
header.html <!— ヘッダー部分だけを記述 --> footer.html <!— フッター部分だけを記述 -->
それぞれ、Webサイトの「ヘッダー部分」と「フッター部分」だけを記述したファイルだと考えてください。「load()」を使ってこれらのファイルを取得＆出力すれば、ヘッダー＆フッターのHTMLが挿入されることになります。つまり、すべてのWebページで再利用することができるHTMLファイルを作成できるわけです！
本記事では、「load()」メソッドの基本的な使い方から応用技まで分かりやすく解説しますのでぜひ参考にしてみてください！
load()の使い方
ここからは、実際に「load()」メソッドを使ったプログラミング手法を学んでいきましょう。任意のファイルを読み込む方法や、そのデータをHTMLコンテンツとして出力する方法などについて詳しく見ていきます。
任意のファイルを読み込む方法
まず最初に、サンプル例として簡単なテキストファイルを読み込んでみましょう。一般的な記述方法としては、【 対象要素.load( ファイルのパス ) 】のように引数へファイルのパスを記述すれば実現できます。
そこで、簡単な文字列が記述された以下のようなテキストファイルを用意します。
これはサンプルのテキストです
今回は、「sample.txt」というファイル名で保存しておきます。
そして、次のようにプログラムを組み立てます。
<body>
<div></div>
<script>
$('div').load('sample.txt');
</script>
</body>
この例では、空のdiv要素だけが配置されています。このdivに対して、「load(‘sample.txt’)」と記述することでdiv要素内にsample.txtの中身がHTMLコンテンツとして出力されます。
このようにHTMLの任意の箇所へ取得したファイルの中身を出力できるのがload()メソッドの特徴と言えるでしょう。
HTMLファイルを読み込む方法
今度は、テキストファイルではなくHTMLファイルを読み込んでみましょう。サンプル例として「リスト要素」だけのHTMLファイルを作成してみます。
「list.html」というファイル名にして、次のように記述します。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
「ulタグ」で囲まれたリスト要素だけが記述されたHTMLファイルになっていますね。あとは、先ほどと同じようにメインのHTMLを以下のように作成します。
<body>
<div></div>
<script>
$('div').load('list.html');
</script>
</body>
空のdiv要素に対して、「load(‘list.html’)」と記述することでdiv要素内にリスト要素が挿入されることになります。冒頭でも解説しましたが、このリスト要素を例えば「ヘッダー要素」にすれば再利用可能なヘッダーコンテンツとなるわけです！
functionを設定するには？
「load()」の引数にはコールバック関数（function）を設定することが可能です。例えば、通信の状態を確認したりエラーハンドリングを記述するような使い方ができるので、詳しく見ていきましょう！
functionの使い方
まずは、load()メソッドに関数を設定する方法を確認しましょう。一般的な記述方法としては、【 load( ファイルパス, function() { 処理 } ) 】のように第2引数へ関数を指定すればOKです。
次のサンプル例を見てください！
$('div').load('list.html', function(data, status, object) {
//処理を記述する
});
この例では、load()の第2引数に関数を設定しているのが分かります。この関数には「data」「status」「object」という引数を設定していますが、これによりさまざまな情報を取得することができます。
取得できる情報としては以下のとおり！
- 「data」：取得したファイルの中身
- 「status」：通信状態を文字列で取得
- 「object」：XMLHttpRequestオブジェクトのデータ
特に「status」については、正常にファイルを取得できたかどうかを確認するためによく使われるので覚えておきましょう！
通信状態を確認する方法
次に、関数を活用して通信状態によって条件分岐を行うサンプルを作成してみましょう。ここで利用するのは、先ほど解説した関数の引数「status」の情報です。
「status」の情報は単純で、例えば以下のような文字列情報が取得できます。
①正常にファイルが読み込めたら「success」
②ファイルの読み込みに失敗したら「error」
この仕組みを利用して、次のような条件分岐を作ってみましょう！
$('div').load('list.html', function(data, status) {
if(status === 'success') {
console.log('読み込みが正常に行われました');
}
});
実行結果
読み込みが正常に行われました
この例では、IF文の条件式に「status」を活用しているのが分かりますね。「status === ‘success’」のように比較を行うことで、ファイルが正常に読み込まれた場合のみ処理を実行することができます。
特にエラーが無ければ、実行結果のように文字列が出力されます。
セレクタ指定について
「load()」メソッドの大きな特徴として、セレクタ指定によって任意の部分を抽出できる機能があります。これにより、指定したHTMLファイルの特定の要素だけを抽出して画面に出力することが可能になるので大変便利です。
その使い方について、サンプル例と一緒に詳しく見ていきましょう！
HTMLタグを指定して要素を抽出する方法
まずは簡単な「HTMLタグ」を指定する方法から見ていきましょう。load()メソッドは、引数に読み込むファイルのパスを記述するわけですが、そのあとに抽出したいHTMLタグを記述することができます。
一般的な記述方法は、【 load( ファイルパス HTMLタグ ) 】のようにパスのあとに「空白(スペース)」を入れてタグを記述します。例えば次のようなHTMLファイルがあるとします！
<h1>サンプルタイトル</h1> <p>これはサンプルのテキストです。</p> <h2>小見出し１</h2> <p>これはサンプルのテキストです。</p> <h2>小見出し２</h2> <p>これはサンプルのテキストです。</p> <h2>小見出し３</h2> <p>これはサンプルのテキストです。</p>
この中にある「h2タグ」だけを抽出してみましょう！
「other.html」というファイル名で保存しておきます。
そして、次のように記述します！
<body>
<div></div>
<script>
$('div').load('other.html h2');
</script>
</body>
load()の引数に注目してください。読み込むファイル「other.html」のあとにスペースを空けて、「h2」を記述することでh2要素だけを抽出しています。
すると、画面には以下のような出力がされているはずです！
小見出し１ 小見出し２ 小見出し３
このようにHTMLファイルから抜き出したい要素だけを指定することで、不要な部分を簡単に除外できるわけです。
属性を指定して要素を抽出する方法
今度は、HTMLタグではなくidやclassなどの属性を使って抽出をしてみましょう。そこで、次のようなHTMLファイルを用意してみます。
<ul> <li class="list">リスト１</li> <li class="list">リスト２</li> <li class="list">リスト３</li> <li class="list">リスト４</li> <li class="list">リスト５</li> </ul>
リスト要素だけが記述されており、すべてにclass属性が付与されていることに注目してください。ファイル名は先ほどと同じ「other.html」として保存しておきます。
そして、以下のような記述をしてみましょう！
<body>
<div></div>
<script>
$('div').load('other.html .list:first');
</script>
</body>
load()メソッドの引数に注目です。今度はファイルパスのあとに、「.list:first」と記述していますね？
これにより「class属性値が「list」の要素でなおかつ一番最初に位置している要素だけを抽出する」という意味になります。そのため実行すると画面には「リスト１」という表示だけになるわけです。
ajax()とload()の違いについて
これまでload()メソッドについて学習してきましたが、jQueryには類似メソッドとして「ajax()」があります。どちらも同じことを実現することが可能で、例えばHTMLファイルを読み込んで画面に出力したい場合を比較してみましょう！
load()メソッドの場合は以下のとおり！
$('div').load('other.html');
ajax()メソッドの場合は以下のとおり！
$.ajax({
type: 'GET',
url: 'other.html',
success: function(data) {
$('div').html( data );
}
})
記述方法はまったく違いますがどちらも同じ動作を実現しています。さて、この2つは一体何が違うのでしょうか？
実は、load()メソッドの中身は「ajax()」メソッドが動いているのです！
ajax()は非常に多くのオプション設定が用意されており、さまざまなケースの通信に対応できるように作られています。その反面、学習コストが高く使いこなすのに時間が掛かるわけです。反対にload()は一般的によく使われるケースとして、HTMLファイルを読み込んで出力するだけの機能に特化しています。
そのためシンプルに記述できるので、学習コストが低くすぐにでも使いこなすことが可能です。つまり、ajax()メソッドの機能を限定的にした簡易版のような位置づけが「load()」メソッドというわけです！
まとめ
今回は、ファイルを読み込んでHTMLコンテンツとして出力できる「load()」について学習をしてきました！
最後に、もう一度ポイントをおさらいしておきましょう！
- load()はファイルをHTMLとして出力できるのでファイルの再利用性が高い
- コールバック関数を設定することで通信状態やエラーハンドリングが可能
- セレクタ指定により、読み込んだファイル内の任意の箇所だけを抽出することができる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
