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分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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週間限定）
