見出し画像

【初心者必見】jQuery入門編（書き方・使い方の解説）

プログラミングスクール TechElite

JavaScriptを簡単に扱えるライブラリ「jQuery」の基本的な使い方や読み込み方法、基本構文について解説しています。
クリックやホバーなどのイベント処理や、クラスの付け外しによる表示・アニメーション制御など、LP制作でよく使う実装方法を紹介しています。

▼本記事の内容は動画でもご覧いただけます▼

【実践型プログラミングスクール】
テックエリートに興味のある方はこちら▼▼

丸山：今回は JavaScript を簡単に扱えるようにしたライブラリ「jQuery」について解説していきます。HTMLやCSSで作られたページに対して、ユーザーのアクションに応じてアニメーションを起こしたりHTML構造を変えたりCSSを切り替えたりといった動きが実現できます。ホームページ制作において JavaScript をゴリゴリ書く機会はあまり多くないので、まず jQuery を押さえておけば、かなりのホームページは作れると思います。

jQueryの呼び出し方

jQueryを使うには、HTMLファイルに jQuery を読み込む記述が必要です。方法は2つあって、ファイルをダウンロードして使う方法とCDN（ウェブ上のソースコードを読み込む方法）があります。個人的にはCDNがおすすめです。ファイルをダウンロードしなくていい分、容量を食わないですし、初心者にも扱いやすいです。また、バージョンの違いで動作に影響が出ることもあるので、使用するバージョンには注意しておきましょう。

ファイルの読み込み順に注意

JavaScript や jQuery のファイルは、HTMLの<body> タグの一番下に書くのが基本です。理由はシンプルで、JavaScript はすでに存在するHTML要素を操作するものなので、HTML全体が読み込まれる前にJavaScript が動いてしまうと、まだ存在しない要素を触ろうとしてエラーになってしまいます。また、jQuery を使ったJSファイルは必ず jQuery の読み込みより後に書いてください。順番が逆になると「$って何？」とエラーが出ます。

jQueryの基本構文

jQuery を書くときの基本形は以下の通りです。

$(function() { 
// ここにコードを書く
 });

この function の中にコードを書くのがお作法です。「HTMLが全部読み込まれてから動かす」という意味があります。要素の指定方法（セレクター）はCSSと同じで、タグ名・クラス（.クラス名）・ID（#ID名）が使えます。例えば $('p').css('color', 'red') と書けば、p要素の文字色を赤にできます。

イベント（クリック・ホバーなど）の使い方

JavaScript や jQuery が一番活躍するのが「何かをした時」、つまりイベント処理です。代表的なものを紹介します。

  • click：クリックしたとき

  • hover：マウスを乗せたとき

  • keydown：キーボードを押したとき

  • scroll：スクロールしたとき

  • resize：ブラウザのサイズを変えたとき

書き方は  $('p').click(function() { 処理 })  のような形です。例えばレスポンシブ対応でブラウザのサイズが変わった時にCSSを切り替えるといった実装でよく使われます。

クラスの付け外しで役割分担を明確に

CSSの値を直接 jQuery で書き換えることもできますが、より良い方法があります。それがクラスの付け外しです。

  • addClass：クラスを追加する

  • removeClass：クラスを取り外す

  • toggleClass：クラスがあれば外し、なければつける

例えばクリックしたらactiveクラスをつけて、CSS側で .active { color: red; }と書いておくやり方です。こうすると HTML・CSS・JavaScript それぞれの役割がはっきりして、コードが整理されます。何度も切り替えるボタンにはtoggleClass、一度だけ表示させたいなら addClass と使い分けましょう。

表示・非表示の実装とアニメーション

要素を見せたり隠したりする実装もよく使います。注意したいのが display: noneとopacity: 0 の違いです。
display: none は要素を完全に消すのでレイアウトも詰まります。一方、opacity: 0 は透明にするだけなのでスペースは残ります。ふわっとしたアニメーションをつけたい場合は opacity を使い、CSSの transition と組み合わせるのがおすすめです。例えば transition: opacity 0.5s とすれば、0.5秒かけてじわっと表示・非表示が切り替わるような動きが実現できます。

おわりに

丸山：jQueryはホームページ・LP制作において非常に使いやすいライブラリです。今回ご紹介したセレクター・イベント・クラスの付け外し・表示非表示の制御を押さえておけば、多くの案件に対応できます。ただ、プログラミング言語の領域に入ってくるので、つまずく方も多いです。もし学習を進める中で不安なことがあれば、ぜひテックエリートの無料説明会にお越しください。公式LINEから登録できますので、まずはお気軽にご相談いただければと思います！


【実践型プログラミングスクール】
テックエリートに興味のある方はこちら▼▼


いいなと思ったら応援しよう！