• 最終更新日
  • Java Script / jQuery

jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう

jQueryを動かすために必要になる「jquery.min.js」を設置しましょう。

jQueryで記述されたプログラムはそれ単体では動作しません!大元である「jquery.min.js」を読み込んでおかなければいけないんですね~。読み込みの忘れはよくあります(笑)。

今回はjsファイルのダウンロード方法と、読み込んだファイルでjQueryがちゃんと動作できるかの確認をしていきます。

jQueryとは

HTMLやCSSがわかっている方ならJSのスクリプトを見ても少しは仕組みや規則性がわかるかなぁ、と言ったトコロでJSは難しいです。僕もよくわかりません(笑)。

そんな「Java Script」をわかりやすく簡潔にまとめてくれているのが「jQuery」です。僕はjQueryもよくわかりません(笑)。まぁ、それだけHTMLやCSSとは勝手が違うという事ですね。

見てもらう方が早いのでひとつ簡単な例をご紹介します。

Java Script

        	
  1. var target = document.getElementById('sampleId');
  2. target.classList.add('sampleClass');

まずは「Java Script」で記述してます。

この指定の意味は「sampleId」というIDを持っている要素に対して「sampleClass」というクラスを追加する、っていうコトになります。

jQuery

        	
  1. $('#sampleId').addClass('sampleClass');

はい、これが同じ指定を「jQuery」で書いたものです。

初心者の方から見てもjQueryで記述した方がわかりやすいですよね。あ~、なんとなくわかる、ってカンジになります。

ただ、このjQueryを使うんだったら大元である「jquery.min.js」を読み込んでおかないといけないので、そのファイルのダウンロード方法をご紹介します。

jQueryのダウンロード方法

それでは「jQuery」のサイトへ飛んでみましょう。

jQueryのダウンロード

枠でかこったオレンジのボタンをクリックするとjQueryのダウンロードページへいきます。ここに最新バージョンの記載もありますね。2020年12月の時点では「v3.5.1」が最新です。

jQueryのダウンロード

ダウンロードページにはいくつもファイルへリンクが設置されています。

その中でjQuery項目の一番上?ですかね、ここに最新バージョンのjQueryファイルが置かれています。

枠でかこった「Download the compressed, production jQuery 3.5.1」を右クリックして「名前を付けてリンク先を保存」をおこなえばOKです!

竹馬

ファイルには「jquery.min.js」と「jquery.js」があるんですが、どちらも同じ内容です。「min」が付いている方が軽いファイルなのでこちらを読み込むようにしましょう。

jQueryの動作確認をしよう

jQueryファイルがダウンロードできましたので動作確認をおこなっていきましょう。

jQueryとは」の簡単な例で見てもらったクラスを追加するものを少し変えてみましたのでコピペして確認してみてください。

index.html

        	
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jQueryの動作確認をしよう</title>
  6. <style>
  7. * {
  8.   margin: 0;
  9.   padding: 0;
  10.   box-sizing: border-box
  11. }
  12.  
  13. html {
  14.   font-family: "Meiryo", sans-serif;
  15.   font-size: 62.5%;
  16.   font-feature-settings: "palt"
  17. }
  18.  
  19. #sampleId {
  20.   width: 300px;
  21.   color: #fff;
  22.   font-size: 2rem;
  23.   letter-spacing: 0.09em;
  24.   text-align: center;
  25.   padding: 40px 20px;
  26.   margin: 60px auto 0
  27. }
  28.  
  29. .sampleClass {
  30.   background: #364549
  31. }
  32.  
  33. #button {
  34.   width: 300px;
  35.   color: #fff;
  36.   font-size: 2rem;
  37.   letter-spacing: 0.09em;
  38.   line-height: 60px;
  39.   text-align: center;
  40.   margin: 40px auto 0;
  41.   background: #21c69c;
  42.   display: block;
  43.   cursor: pointer
  44. }
  45. </style>
  46. </head>
  47. <body>
  48.   <div id="sampleId">文字が読めれば<br>jQueryは動いています!</div>
  49.   <a id="button">ボタンを押すと…</a>
  50. <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
  51. <script type="text/javascript">
  52. $('#button').on('click', function() {
  53.   $('#sampleId').addClass('sampleClass');
  54. });
  55. </script>
  56. </body>
  57. </html>

これはですね、「ボタンを押すと…」ってボタンをクリックしてもらうと「sampleId」のidがあるdivに「sampleClass」のクラスが追加されます。

この「sampleClass」には背景色を指定しているのでクリックすると要素に背景色が追加されて要素内の白文字が見えるようになるというそんなに面白くないサンプルです(笑)。

この記事を作成した時は「jquery-3.5.1.min.js」を使用していますので、バージョン違いのjQueryを使用される場合はファイル名を変更してください。

ファイルの階層の確認もしておきましょう。

「index.html」ファイルとjQueryのファイルが上記のように配置できているか見てみてください。ファイルの読み込みパスの間違いなどはよくあります(笑)。

はい、それではjQueryファイルのダウンロード方法でした。あなた自身で色んなjQueryを試して遊んでみてください!

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ!
Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。