tanatiyo jQueryを初めて使う時、実装する時って、ちゃんとプログラムが反映されているのか気になりますよね私も現在、5回目のデザインカンプにてjQueryを導入していますが、書籍のサンプルコード以外でjQueryを実装するのはこれが初めてです。導入の手順からプログラムがきちんと反映されているかまでを一通りまとめてみたいと思います。
まず、HTMLとCSSコーディングが一通り終わったら、index.htmlと同じファイルの位置にjsファイルを作成
↓
次に、jQueryの公式サイトに行って、jQueryの本体をダウンロード
https://jquery.com/
トップページ右側にあるオレンジ色のボタン「Download jQuery」というボタンをクリック
↓
jQueryの新しいバージョンのうち「compressed」という文字が含まれているファイルをダウンロード。「圧縮版」という意味らしいです。
↓
ダウンロードしたファイルを開いて「jquery-〇.〇.〇.min.js」（赤字のところにはバージョンの数字が入っています）をコピー。（とりあえずファイルがjqueryから始まってmin.jsで終わるファイルを探す。これがjQuery本体です）
↓
制作しているファイル「index.html」と同階層に「js」ファイルを作成し、その中に保存。
↓
index.html内の<head>タグ内（<body>タグより上部にある）に
<script src =”js/jquery-〇.〇.〇.min.js”></script>を記述。←はjQuery本体。そのすぐ下に
<script src=”js/script.js” defer></script>を記述。←が制御用ファイルです。このファイルにいろいろ書いていきます。ちなみに赤字の「defer」と書くことで、htmlを全て読み込んでから「js/script.js」を読み込んでね、という意味になるそうなので、サイトの高速化のためにも書いておきました。
↓
「js/script.js」にカーソルを合わせると「リンク先を表示」とコメントが出てくるのでそれをクリック。そうすると「ファイルがありません。新しく作成しますか？」という文言が出てくるので「はい」を選択。すると、自動的にこのファイル名でファイルをjsフォルダに作成してくれます。（もちろん中身は空です。これからこのファイルの中にjQueryを記述していきます）
↓
とりあえず、ここまでで準備完了です。ただ、私はいつも準備段階で必ずエラーが出るので＾＾；ここまできちんとできているか確認のため、以下のコードを慎重に「js/script.js」内に書きます。
↓
$(function(){
$(“h1”).click(function(){
alert(“OK”);
});
});
↓
このコードの意味は「ブラウザ内のh1要素をクリックしたら「OK」という表示のアラートを表示してね」です。h1要素はおそらくどのサイトにもあるかと思います。もちろん「”h1″」は自由に変更してOKです。とりあえず、ここまでがきちんとできているか念のための確認なので、ここは便利な要素なら何でも良いです。
試しに、ローカルウェブブラウザ上で「h1要素」にあたるものをクリックしてみてください。（私の場合はロゴや会社名をh1要素に設定しヘッダーメニュー部分に置いているのでそこをクリックします）
↓
画面上に「OK」と書かれたダイアログボックス（フワッと画面上に出てくるかと思います）が出てくれば、正常にjQueryを設定できています。とりあえず、ここまででjQueryの設定はOKで、あとはどんどん必要なことを書いていきます（もちろん、アラートを表示させる上のコードは消しておいてくださいね。）
↓
ここまで正常にいかない場合は
①上のコードが間違っている（スペルミス、記号の間違いなど）
②①のさらに前の段階で間違っている。相対パスの指定（「js/jquery-〇.〇.〇.min.js」や「js/script.js」の部分です）やリンクのスペルミス、配置場所など（「index.html」と同階層に置いているのか、jsフォルダの中にきちんとjQuery本体「jquery-〇.〇.〇.min.js」が入っているのか、など）をもう一度確認してみる。
以上です。私は独学で進めているのもあって、エラーとか、正常に動作しないこととか、もう毎日、毎回のように経験します＾＾；その度に作業がなかなか進まないです。
しかし、エラーはつきものだと考えて、どこまで出来ていて、どこまでは出来ていないのか、どの部分に間違いがありそうなのか、というのは常に考えて進みたいですね。たくさん、トライ＆エラーをすることできっとバグを探す作業も段々と効率的になっていくと思います。
ここは経験だと思って、今日も頑張りましょう！