jQueryでloadメソッドを使って外部のHTMLを読み込む方法【初心者向け】
プログラミング初心者向けに、jQueryのloadメソッドで外部のHTMLファイルを読み込む方法について解説しています。実際にソースコードを書きながら説明しているので、初心者の方でもすぐに理解することができるでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryでloadメソッドを使って外部のHTMLを読み込む方法を紹介します。
簡単に別ファイルを読み込むことができるので、使い方を覚えておきましょう。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
目次
loadとは
別のHTMLに書かれた内容を読み込むときに使います。
例えば、メニューバーが共通としてそれを各ページに記述するのは大変です。
そこで、jQueryの「load」を利用して、他のページに記述しておいたメニューのHTMLを読み込むという事ができます。そうすることで、コードが込み合わずにスッキリとしたコーディングが実現できます。
田島メンター！他のファイルから要素を取得することも出来るんですか？
自分のサイトや同じドメインの中で、という条件がつくけど、出来るよ。
ドメインが同じじゃないと取得できないんですかー。
安全のためにそうなってるんだよね。さっそくloadメソッドを書いてみよう！
loadの書き方
書き方を説明します。仮に「header.html」にタイトルが書いてあるとします。
それを外部ファイルとして「sample.html」から読み込むとすれば、以下のようなスクリプトが必要です。
JavaScript
$(function(){
$("#cover").load("header.html");
});
また、「sample.html」内で設定した「id」の箇所に上で読み込んだhtmlが読み込まれます。このときに注意するのは、「header.html」と「sample.html」は異なるファイルであるという事です。
「sample.html」で、「header.html」を指定してもjQueryが動作しないことがあります。
そのために「header.html」についての記述は「sample.html」でなく「header.html」に直接行うようにしましょう。
実際に書いてみよう
実際にソースコードを書いてみましょう。
※Chromeでは反映されませんので、FirefoxやIEで確認しましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="sample.js" type="text/javascript"></script>
<title>jQuery</title>
</head>
<body>
<div id="cover">
<div id="section1"></div>
<div id="section2"></div>
</div>
</body>
</html>
HTML
<h1>header.htmlの内容です。</h1>
JavaScript
$(function(){
$("#cover").load("header.html");
});
しっかりと「header.html」の内容が「sample.html」に反映することができています。
このようにして行うことで、ヘッダーを共通部分として処理することができるようになります。
以上、loadメソッドを使って外部ファイルを読み込む方法について解説しました。
ヘッダーやフッターなどどのページにもある内容はこのようにファイルを分けてコーディングすることで作業効率が上がるでしょう。
今あるページに別のページを読み込むことが出来ました！
書き方によっては、別のページの一部分を読み込むことも出来るよ。
リロード(更新)しなくてもページの一部って変えられるんですねー。
そうそう。loadメソッドって、内部でjQueryのajaxメソッドを呼び出してるんだよね。ページをリロードしなくても一部を更新出来る仕組みなんだ。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
loadの利用例
基本文法
obj.load(url[, data][, complete(data, textStatus, xhr)])
objには、loadするセレクタを指定します。
loadには、loadメソッドを意味します。
urlには、loadするurlやファイル意味します。
dataには、リクエストと一緒に送信する文字列またはプレーンオブジェクトを指定します。
complete(responseText, textStatus, XMLHttpRequest)には、リクエストが完了した際に実行したい関数を指定します。
特定セレクタに合致した指定方法
$("#head").load("header.html #section2");
この場合は、id=”head”の内部にあるid=”section2″に対してload処理を実行することが可能です。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
