JavaScriptにjQueryを読み込む方法/ライブラリ、jQueryとは何か?

laptop IT

JavaScriptのライブラリ超定番、jQueryの読み込み方、およびそもそもjQueryとは何か、それ以前にライブラリとは何かについての記事です。

Advertisements

ライブラリ/jQueryとは何か?

外部拡張キットのことです。生のJavaScriptで書いた特殊な処理を、もっとみんなが簡単に使えるようにしたい……と考えた誰かが、それをネット上に置いたとします。
htmlに外部からJavaScriptを読み込めることは、下記の記事で書きました。

HTMLでJavaScriptを外部ファイルとして読み込む方法/src属性の使い方
CSSに引き続き、JavaScriptも外部ファイルとして読み込んでみたいと思います。

URLでJavaScriptを読み込めるということは、ネット上のどこかにあるJavaScriptも読み込めるということです。そこで上の誰かが置いた「特殊な処理がもっと簡単に使える」スクリプトを持ってきて使うわけですが、誰かが書いたコードをみんなで「借りる」わけで、こういうのをライブラリ(図書館)と呼びます。
jQueryはライブラリの中でも突出して有名で、jQueryを前提にして動くライブラリ(プラグイン)も多いです。機能の追加もそうなんですが、インフラ整えるような仕事もします。JavaScriptを触るなら、知っておいて当分損はないです。

jQueryの取り込み方

上でもう答えを書いたようなものですが、URLを指定して取り込むことができます。必ずjQueryを取り込んだ後に、jQueryを使用するスクリプトを実行するようにしてください(動かないので)。先にJavaScript以外の処理を完了させたいので、bodyが終わる直前にjQuery読み込み→script読み込み と実行するのが一般的です。

jQueryの読み込み
<script src = “https://code.jquery.com/jquery-3.3.1.min.js”></script>
※3.3.1はバージョン名。適宜最新ファイル名に差し替え

URLで指定する場合は当然ネット環境がないと使えませんが、ファイルをダウンロードして使用することも可能です(公式サイト)。その場合はパス指定したり、同じディレクトリであればファイル名だけ記述したりして使います。
ちなみに公式サイトにあるファイルのうち、compressedとあるのは改行など消してファイルサイズを圧縮したもの、uncompressedは読みやすさ重視でサイズは大きいもので、どっちも挙動は同じです(そのうち読めなくなるかもしれませんが、上でリンク貼っているので、実際踏んでどうちがうのか見てみてください)。上のURLでminと付いているのはcompressedの意味です。読み込み速度が変わりますので、URL指定の時は忘れずにminを付けるようにしましょう。

jQueryの使い方

一回何か書いてみたいと思います。細かい解説はしません。
下のように書くとHTMLがJavaScriptの干渉を受けてもおかしなことにならないところまで読み込むのを待ち、その後でjQueryが読み込まれて実行されます。

準備ができたらjQueryを読み込む
$(function(){
// 処理
});

フォルダの同じ階層にhtml.txtとjavascript.txtを用意し、html.txtには次のように記述します。pタグの中身が空であることに注意してください。

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="css.css">
<title>jquerytest</title>
</head>
<body>
<p></p>
<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src = "javascript.js"></script>
</body>
</html>

js.txtには次のように記述します。

$(function(){
$('p').text('Hello jQuery');
});

これをhtml.htmlとjavascript.jsに拡張子を変更して実行すると、少し読み込みがあった後でブラウザにコードが反映されます。
jq
元々は何もなかったpタグに文字列が追加されました。jQueryのtextはJavaScriptでいうtextContentに相当します。「これ普通のJavaScriptで良くないか?」という感じですが、あくまで例なので……。
jQueryの読み込み、jQueryとライブラリとは何か、に関しては以上となります。

コメント