JavaScriptのライブラリ超定番、jQueryの読み込み方、およびそもそもjQueryとは何か、それ以前にライブラリとは何かについての記事です。
ライブラリ/jQueryとは何か？
外部拡張キットのことです。生のJavaScriptで書いた特殊な処理を、もっとみんなが簡単に使えるようにしたい……と考えた誰かが、それをネット上に置いたとします。
htmlに外部からJavaScriptを読み込めることは、下記の記事で書きました。
URLでJavaScriptを読み込めるということは、ネット上のどこかにあるJavaScriptも読み込めるということです。そこで上の誰かが置いた「特殊な処理がもっと簡単に使える」スクリプトを持ってきて使うわけですが、誰かが書いたコードをみんなで「借りる」わけで、こういうのをライブラリ（図書館）と呼びます。
jQueryはライブラリの中でも突出して有名で、jQueryを前提にして動くライブラリ（プラグイン）も多いです。機能の追加もそうなんですが、インフラ整えるような仕事もします。JavaScriptを触るなら、知っておいて当分損はないです。
jQueryの取り込み方
上でもう答えを書いたようなものですが、URLを指定して取り込むことができます。必ずjQueryを取り込んだ後に、jQueryを使用するスクリプトを実行するようにしてください（動かないので）。先にJavaScript以外の処理を完了させたいので、bodyが終わる直前にjQuery読み込み→script読み込み と実行するのが一般的です。
<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が読み込まれて実行されます。
$(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に拡張子を変更して実行すると、少し読み込みがあった後でブラウザにコードが反映されます。
元々は何もなかったpタグに文字列が追加されました。jQueryのtextはJavaScriptでいうtextContentに相当します。「これ普通のJavaScriptで良くないか？」という感じですが、あくまで例なので……。
jQueryの読み込み、jQueryとライブラリとは何か、に関しては以上となります。
コメント