jQueryとは？
jQueryとは「JavaScriptのライブラリ」です。
「ライブラリ」とは、まとまったプログラムをあらかじめ作ってくれているファイルのことを指します。
つまり、jQueryもJavasciptなのです。
jQueryが使われるようになったことで、Web制作がよりやりやすく効率化されました。
jQueryの導入方法
jQueryの導入方法は2つありまして、サーバー上に公開されたプログラムを読み込む方法と、公式サイトからファイルをダウンロードして読み込む方法です。
サーバー上に公開されたプログラムを読み込む
下記のコードをコピーして、jQueryを使用するファイルにペーストしてもらえれば読み込みは完了です。
コピペ場所は、headタグの上が一般的かと思います。
jQueryの公式サイトからダウンロード
上記のサイトにある、
Download the compressed, production jQuery 3.6.0
をクリックしてダウンロードしてください。
jQueryを使用するメリット
jQueryを使用する最大のメリットは、JavaScriptよりも難易度が低く、シンプルな記述で処理を実行できるところです。
例えば、1つの機能を実現するためにJavaScriptでは十数行のコードを書く必要があっても、jQueryでは2,3行で済むことが多くあります。
学習コストが低い
Javascriptよりも遥かに簡単なため、学習コストも低いです。
私はJavascriptもjQueryも勉強したのですが、Javascriptの方が10倍程時間を取られました・・・。
Web制作を始めたばかりの方は、覚えることが沢山あるため、学習コストが低い点はかなり魅力的です。
どのブラウザにも対応している
現在chromeやIE・Safariなど、様々なブラウザが使われています。
実は、ブラウザによってソースコードの解釈が微妙に異なるため、同じJavaScriptのコードでも正常に動作しないケースがありました。
ですが、jQueryはこれらのブラウザの違いに配慮されているので、どのブラウザでも同じ動作をします。
jQueryを使用するデメリット
ファイルが重くなりがち
デメリットは、ライブラリを読み込まないと使用できないため、ファイルが重くなってしまいます。
ですが、メリットの方が圧倒的に大きいので実際の現場でも多く利用されています。
バージョンによって使えるメソッドが違う
最新のバージョンを使っていればほぼ問題ない話なのですが、古いバージョンのjQueryを読み込んでいると「slideToggle」など比較的新しいメソッドが入ってない場合があります。
jQuery記述方法
jQueryの基本構文は次の通りです。
セレクタには操作対象とするHTMLの要素を指定します。
つまり、cssの指定方法と同じようにclassは.idは#などを使用します。
メソッドは処理内容を記載します。
より細かい処理を指定する場合はパラメータを使います。
では、試しに簡単なjQueryを実装してみましょう！
jQueryで文字色を変更する
例えば、「class名：test」の「文字を赤字にしたい」場合、セレクタで.testを指定し、CSSを指定するメソッドcss()を使用します。
これで.testの文字色が赤色になればOKです。
jQueryが使用できない時の注意点
もしjQueryを使用しても何も変化しない場合は、下記の3つをチェックしてみてください。
- jQueryが読み込まれているか
- セレクタの指定が正しいか
- デベロッパーツールのconsoleでエラーが出ていないか
上記の3つを試してもjQueryが動作しない場合は、メソッドを変えてみる、jQueryの読み込み位置を変えてみるのも良いかと思います。
jQueryはもはやWeb制作者の必須スキルとなっていますので、是非習得して活かしてください。
our note サービス一覧
our noteはブログに加えて、下記のサービスを行っております。
バナー制作やコーディングなどの、Web制作に関するご依頼を頂いております。
また、私が制作したLINEスタンプの販売も行っております。
詳細は、下記をご覧ください。
ココナラ
「ココナラ」というサービスを活用して、バナー制作やコーディングの案件を受注しております。
品質を担保するため、最大2案件までとさせていただいております。
案件のご相談やご依頼がございましたら、ココナラからご依頼をお願いいたします。
ココナラ