オフラインでも利用できる!jQueryをダウンロードする方法【初心者向け】

プログラミング初心者向けに、JavaScriptライブラリのjQueryをダウンロードする方法を紹介しています。jQueryをダウンロードしてhtmlに読み込めばオフラインでも利用することができるので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryを使用するためには二通りの方法があります。

一つはCDN(Contents Delivery Network)を使用する方法、もう一つはjQueryをダウンロードしてそれをHTML内で読み込む方法です。

CDNは一行でjQueryを使用することができますが、サーバーからjQueryをダウンロードするため、オフラインでは使用できないという欠点があります。

そこで今回はオフラインでもjQueryを使用するためにjQueryをダウンロードして使用する方法を解説していきたいと思います。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

オンライン上からjQueryのファイルを読み込んで使用するより、ファイルをダウンロードして、自分のPC上から読み込ませたいんですが。

田島悠介

オフラインでも使用できるので、それもいいね!配布しているサイトがあるので、そこからダウンロードするだけだよ。

大石ゆかり

さっそくダウンロードしてみます。

 

jQuery本体のダウンロード

jQuery本体はjQueryの公式ホームページからダウンロードすることができます。

スクリーンショット 2016-09-02 14.34.16

こちらのページにある最新版のjQueryをダンロードしてください。

production、developmentの二種類のリンクがあると思いますが、事情がない限りはproductionの方のファイルをダウンロードしましょう。

なぜなら、developmentの場合、非圧縮ファイルがダウンロードされるため、処理が重くなってしまう可能性があるからです。

 

HTMLファイルでjQueryを読み込む

ダウンロードをした後は、作業するHTMLと同じフォルダにjQueryのファイルを置いてください。

jQueryのファイルの読み込みはCSSのファイルの読み込みとすこし似ています。

<script src="jquery-3.1.0.min.js"></script>

2016年8月時点での最新版のjQueryが3.1.0のため上のようなコードになっていますが、自分が使用するバージョンに合わせて名前を変えるようにしてください。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

まとめ

今回はCDNを使用せずにjQueryをダウンロードする方法について解説していきました。ダウンロードで動かすことのメリットとしては、jQueryをオフラインで使用できるということが挙げられます。

しかし、一般的にCDNで読み込んだ方が処理は早いので、オンライン上のみ使われるページの場合CDNを利用して書くようにしましょう。

 

大石ゆかり

jQueryは、CDNからでもファイルを設置してからでも読みこんで使用することが出来るんですね。どちらがいいでしょうか?

田島悠介

例えば自分で借りているサーバーにアクセス出来なくなった場合、jQueryも動作しないので、ファイルを設置するほうでも問題ないかな。

大石ゆかり

最初のうちは、ファイルを設置して書いてみます!

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。