【jQuery】導入手順（ダウンロードして使う）

2024.11.06

UnsplashのK Somaが撮影した写真

1 はじめに
2 本編
3 jQueryが動かない場合

はじめに

jQueryを導入すう方法には以下の２つがあります。

①CDNで読み込む	簡単に導入できる。
②ダウンロードして読み込む	本番用。知らぬ間にアップデートされる心配が無い。

この記事では、「②ダウンロードして読み込む」手順のご紹介です。

本編

さっそくjQueryの導入手順です。

１）必要なフォルダ＆ファイルの作成

動作確認用のファイルを含め、必要なフォルダ/ファイルを作成します。

場所は任意で構いませんので、
以下のようにフォルダ/ファイルを作成してください。

app/
  ┣ index.html        ⇐メインのhtmlファイル
  ┣ JS/
        ┣ jquery.js   ⇐jquery本体
        ┗ main.js     ⇐任意のコードを各ファイル

index.html、jquery.js、main.jsは空ファイルでOKです。
各ファイルの内容は後程ご説明します。

２）jquery.jsを編集する

以下①～③の手順で、
jquery.jsにjquery本体のコードをコピペします。

①jQueryダウンロードページを開く

　https://jquery.com/download/

②茶色の「Download jQuery 3.7.1」ボタンをクリックする

③開いたページの全てのテキストをコピーし「jquery.js」に貼り付けます。

　↓↓こんなページが表示されます

　↓↓jquery.jsにコピペするとこんな感じです。（VSCode使用）

２）index.htmlで読み込み

htmlのheadタグ内でjqueryを読み込みます。
（main.jsも一緒に読み込んでいます。）

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- jqueryの読み込み -->
        <script src="js/jquery.js"></script>
        
        <!-- main.jsの読み込み -->
        <script src="js/main.js"></script>

        <title>jqueryの練習</title>
    </head>
    <body>
        <h2 id="target">jQueryの練習</h2>
    </body>
</html>

３）main.jsを使って動作確認

最後に動作確認です。

①main.jsに以下のコードを記述してください。

$(document).ready(function(){
  // ↑　↑　↑　↑ htmlが読み込まれるのを待ってjsを実行させる

    $("#target").css({'color': "blue"});
      // ↑ idで要素を取得し、cssを書き換える　　
});

②ブラウザでindex.htmlを開いてください

左上にちょこんと青文字で「jQueryの練習」と表示されていればOKです。

　↓↓こんな感じで表示されます。

jQueryが動かない場合

もし何も表示されない場合は何かしらのエラーが発生しているので、

デベロッパーツール（WindowsではF12で開く）でエラー内容を確認してください。

以上です。