スライドショー

【jQuery入門】load()でHTMLを読み込む方法!

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

今回は、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>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</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>小見出し1</h2>
<p>これはサンプルのテキストです。</p>

<h2>小見出し2</h2>
<p>これはサンプルのテキストです。</p>

<h2>小見出し3</h2>
<p>これはサンプルのテキストです。</p>

この中にある「h2タグ」だけを抽出してみましょう!

「other.html」というファイル名で保存しておきます。

そして、次のように記述します!

<body>
<div></div>

<script>
    $('div').load('other.html h2');
</script>
</body>

load()の引数に注目してください。読み込むファイル「other.html」のあとにスペースを空けて、「h2」を記述することでh2要素だけを抽出しています。

すると、画面には以下のような出力がされているはずです!

小見出し1
小見出し2
小見出し3

このようにHTMLファイルから抜き出したい要素だけを指定することで、不要な部分を簡単に除外できるわけです。

属性を指定して要素を抽出する方法

今度は、HTMLタグではなくidやclassなどの属性を使って抽出をしてみましょう。そこで、次のようなHTMLファイルを用意してみます。

<ul>
  <li class="list">リスト1</li>
  <li class="list">リスト2</li>
  <li class="list">リスト3</li>
  <li class="list">リスト4</li>
  <li class="list">リスト5</li>
</ul>

リスト要素だけが記述されており、すべてにclass属性が付与されていることに注目してください。ファイル名は先ほどと同じ「other.html」として保存しておきます。

そして、以下のような記述をしてみましょう!

<body>
<div></div>

<script>
    $('div').load('other.html .list:first');
</script>
</body>

load()メソッドの引数に注目です。今度はファイルパスのあとに、「.list:first」と記述していますね?

これにより「class属性値が「list」の要素でなおかつ一番最初に位置している要素だけを抽出する」という意味になります。そのため実行すると画面には「リスト1」という表示だけになるわけです。

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として出力できるのでファイルの再利用性が高い
  • コールバック関数を設定することで通信状態やエラーハンドリングが可能
  • セレクタ指定により、読み込んだファイル内の任意の箇所だけを抽出することができる

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。