jQueryとJavaScript：初心者が抑えるべきはじめのポイント
こんにちは、asuperuです。
ポートフォリオのサイトは、確実に進んではいます。ただ、参考サイトと違い、いろいろとやりたいことが出てきしてしまったり、今まで気になっていたことをやろうとしたりと、トライ＆エラーの繰り返しです。headerだけで何時間の作業を費やしたでしょう、コーディングもまた奥が深い…
そしていよいよ、動くサイトにするべくjQueryとJavaScriptと向き合いました。
一度JavaScriptの授業で挫折しているため、恐怖観念のようなものがどうしてもあって、なかなか手がつけられないまま今日に至りました。
Contents
jQueryとは？
JavaScriptは、サイトが動的に動くプログラミング言語です。
では、jQueryとはなんなのでしょう？
jQueryとは、JavaScriptでできることをコンパクトかつ便利にまとめたライブラリ言語だそうです。うーん、いまいちよくわからない。
jQueryは、JavaScriptのコードを「簡潔に書く」ことを目的として開発された言語だとのこと。
JavaScriptがあんまりにも難しいため、扱える人間が限られていました。そこで、よりたくさんの技術者にも扱える言語をつくろうということで、jQueryというプログラミング言語が生まれたそうです。
jQueryは、「JavaScriptのライブラリ」です。「ライブラリ」とは、複数の機能をまとめて部品化したものということで、その中から必要な機能を抜き出して記述することで、サイトが動的に動くようになります。
jQueryの記述方法
1. 準備
今回、サイト上部のハンバーガーメニューと、アコーディオンメニューの作成にjQueryを使いました。
サイトへの反映の仕方を覚え書きします。
まずは、jQuery のサイトへ。
jQureyの反映方法は、下記２つです。
- ライブラリー本体をダウンロードして読み込む方法
jQueryの公式サイトからライブラリーをダウンロードし、利用したいWebサーバーにアップロードし、HTMLの中にscript要素を書いて読み込む。 - Web上のソース（CDNのコード）を読み込む方法
HTML内にscript要素のGoogle Hosted Librariesの利用したいライブラリーを指定し、Webページに直接読み込む。
今回、あたしは2. CDNのコードを活用する方法を採用しました。
step
HPの右上にある「ダウンロード」ボタンをクリック
＞スクロールしていくと中央すぎたあたりに「Other CDNs」を参照
＞Google CDNをクリック
＞コードが表示される <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
＞このコードをhtmlに記述
jQueryのhtmlへのコード記述は、基本はheadタグの中（</head>の直前にjQuery, JavaScriptの順で記述）です。
ただ、今回のあたしのポートフォリオサイトは、headタグの中に記述しても反映されなかったため、bodyタグの中（</body>の直前に記述）し、JavaScriptは直接コードを記載しました。
ここにJavaScriptの読み込み命令を記載しても良いのですが、リンクのエラーを回避するための対応です。
これにより、無事に jQueryとJavaScriptが作動する環境を作ることができました。
2. サイトへの読み込み
JavaScriptのサイトへの記述は、通常の<link rel=”stylesheet” href=”css/style.css”>ではありません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>のように、scriptタグで挟み、そのsrcを記述します。
そして、.jsファイルも同様に読み込み、そこに記述します。
3. JavaScriptファイルへの記述
今回、こちらのサイトを参考にしました。
- ハンバーガーメニュー：b-risk様 https://b-risk.jp/blog/2021/11/accordion/
- ドロップダウンメニュー：Tech.Dig様 https://tech-dig.jp/dropdownmenu/
参考にさせていただいたコードを、自分のclass名と置き換えたり、その周辺のコードの記述の影響を考慮しながら、記述をしました。
何かのサイトを参考にする際は、サイトのコードを鵜呑みにして使用しては、100%失敗します。Sassのコードの解読や、その環境による状況を考慮することが必須です。コピペだけで反映されてくれれば嬉しいのですが、そう簡単にもいきません。
JavaScriptのコードはこんなかんじ
$('.menu-btn').click(function(){
$(this).toggleClass('is-open');
$(this).siblings('.site-nav').toggleClass('is-open');
});いつかJavaScriptの授業で見たことのある関数です。
そして、これからWorPressのオリジナルテーマでも出会う関数です。
最後に
JavaScriptについて、Webサイト作成に使うコードは多くないと言われます。
- アコーディオン（カテゴリーを開く際のメニューバー）
- モーション（動きをつける）
- ディレーション（ゆっくり上へ戻る）
- ホバー（カーソルを乗せたときに動く）
自分が使いたい時に、そのコードを呼び出せるように、ストックしておくことを推奨されました。
今回の記述も、自分のストックにしたいと思います。
コメントを残す