JavaScript

jQueryでサーバーからテキストやhtmlを呼び出す【load】

jQueryはHTML/CSSで作られた静的なファイルに動きをつけるためのJavaScriptのライブラリです。jQueryではHTMLの要素に対してメソッドを指定することで、メソッドの持つ処理を実行します。このような処理をDOM操作といいます。

jQueryを使えば、テキストファイルや他のHTMLファイルから文書を読み込んで、画面上に呼び出すことができます。呼び出すためのメソッドがloadメソッドです。loadメソッドはテキストやHTMLコードを何度も使うときに便利です。

本記事ではloadメソッドでできることや使い方を解説します。

loadメソッドとは

サーバーのファイルを呼び出す

loadメソッドはサーバ上に保存されているテキストファイルやHTMLファイルを読み込み、画面上に呼び出します。テキストファイルであれば、指定したHTMLの要素にテキストが挿入されます。

HTMLファイルの場合は指定したHTMLの要素の子要素として挿入されます。例えば、divタグを指定してloadメソッドでHTMLファイルを指定するとdivタグの子要素としてHTMLファイル内の要素が入ります。

ローカル環境では使用不可

loadメソッドはサーバー上のデータしか読み込むことができません。そのため、ローカル環境ではloadメソッドを使ってテキストファイルやHTMLファイルを呼び出して表示することができません。

コードをローカル環境で動かした時には、画面上に表示されずコンソール上にエラーが表示されます。

loadメソッドでできること

テキストファイルを呼び出す

loadメソッドでできることの1つとしてテキストファイルに書かれた文書を指定したタグの要素として表示することができます。テキストファイルとは「.txt」の拡張子で作られたファイルのことです。

例えば、「index.txt」というファイルに「こんにちは」と書かれているとします。jQueryを用いてdiv要素を指定してindex.txtを呼び出すと指定したdiv要素に「こんにちは」という文字が表示されます。コード例は以下の通りです。

$(“div”).load(“index.txt”)

HTMLファイルを呼び出す

loadメソッドではHTMLファイルに書かれたコードも呼び出すことができます。呼び出す際は指定した要素の子要素として呼び出されます。「.html」の拡張子で作られたファイルを読み込みます。

htmlファイルを読み込む際にはclass名やid名を指定してHTML内の一部の要素のみを取り出すことができます。ヘッダーやフッターなどの共通部分を使いまわしたいときや一部の文章やリスト、画像を使いたいときに便利な処理です。

WordPressにおいてはヘッダーやフッターなどの共通部分を使うときはheader.php、footer.phpといったWordPress特有の処理もあるので、使う機会は少ないと思います。

loadメソッドの使い方

基本構文

loadメソッドを使うための基本構文は以下の通りです。

$(“セレクタ”).load(“ファイルのパス”);

セレクタにはテキストやHTML要素を挿入したい部分のタグを指定します。loadメソッドの()内には呼び出したいファイルのパスを入れます。

テキストファイルを呼び出す

テキストファイルを呼び出すためのコードは以下の通りです。

<body>
    <div></div>
</body>
$(“div”).load(“text.txt”);

text.txtに「Hello World」という文字が入力されていたとするとコードは以下の通りになります。

<body>
    <div>Hello World</div>
</body>

HTMLファイルを呼び出す

一方、HTMLファイルを読み込む場合について解説します。読み込まれるファイル名をindex.htmlとしてコード内容は以下の通りです。

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

index.htmlのファイルを以下のコードのdiv要素に入れたい場合をコード例とします。

<body>
    <div></div>
</body>
$(“div”).load(“index.html”);

jQueryのコードが実行された場合、HTMLファイルのコードは以下のようになります。

<body>
    <div>
        <ul>
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
       </ul>
    </div>
</body>

idやclassを指定する

loadメソッドを使ってHTMLファイルを呼び出すときに要素の一部を呼び出すことができます。呼び出される側の要素のclassやidを指定することで指定された要素を呼び出した側の画面に表示することが可能です。

呼び出す側のファイル「index.html」が以下のコードだとします。

<p>ここは呼び出されません</p>
<p class=”test”>ここが呼び出されます。</p>

呼び出す側のファイルのコード

<body>
    <button>呼び出す</button>
    <div>↓ここに呼び出されます</div>
    <div class=”load”></div>
</body>
$(“.load”).load(“index.html .test”);

ボタンを押せばloadというclassが指定されたdiv要素の部分にtestというclass名を持ったp要素が入ります。

まとめ

loadメソッドはサーバー上に存在する外部ファイルを読み込んで、指定した画面上に呼び出すためのメソッドです。共通部分を呼び出す際や同じ画像や文書を使う際にコードを短くできます。そのため、制作効率があがるため、短時間でWebページの作成が可能です。

WordPressを使うとヘッダーやフッターなどの一部の共通部分を全ページで使うための独自の処理があるため、使う機会は少ないです。しかし、loadメソッド自体は様々な部分に使うことができるので覚えておいて損はないと思います。