Webデザインの基本 (2)
コーディング環境の準備 (6)
ドメインの取得 (2)
jQueryとは
05:04
WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!
WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!
コース一覧
 | jQueryは、Webページに動的な動きやインタラクションを簡単に追加できる、人気のあるJavaScriptライブラリです。JavaScriptの機能を簡単に使えるようにまとめたツールで、コードを短く、シンプルに書けるように設計されています。 |
「ライブラリ」とは、プログラムで使える便利な部品がまとめられたファイルのことで、さまざまな機能を簡単に実現できる部品が提供されます。jQueryの場合、JavaScriptを使った動きやインタラクションを簡単に実現するための部品が集められています。
JavaScriptは、Webページに動きやインタラクション(ユーザーの操作に反応する仕組み)を加えるためのプログラミング言語です。
ページの内容を動的に変更したり、ユーザーと直接やりとりをすることができるため、現代のWebサイトには欠かせない要素となっています。
JavaScriptとjQueryはどちらもWebページに動きやインタラクション(ユーザーの操作に反応する仕組み)を加えるために使われますが、目的や使い方に違いがあります。
| 項目 | JavaScript | jQuery |
| タイプ | プログラミング言語 | JavaScriptのライブラリ |
| 機能の簡潔さ | 機能は豊富だが、書くコードが長くなりがち | よく使う機能が簡潔に書けるので、コードが短くなる |
| ブラウザごとの差異 | 自分で対応を考える必要がある | ブラウザごとの差異を気にせず使える |
| 学習曲線 | JavaScriptの基本を理解する必要があり、少し難易度が高い | 初心者でも簡単に使い始められる |
| パフォーマンス | 直接的なコード実行で、パフォーマンスが高いことが多い | jQueryの分だけ少しパフォーマンスが低下することがある（ただし、差はほとんど気にならない） |
| 汎用性 | Webサイトだけでなく、アプリケーションにも使える、非常に汎用性が高い | 主にWebサイトで使われ、動的な要素の操作に特化している |
例のコードは、HTML要素をクリックしたときに、要素を非表示にする処理を記述しています。
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("myElement").style.display = "none";
});$("#myButton").click(function() {
$("#myElement").hide();
});※同じ処理をJavaScriptとjQueryで書くと、jQueryの方が非常にシンプルに書けることがわかります。
jQueryを学習する理由は、主にコードが簡単に書けること、ブラウザごとの差異を気にせず使えること、そして学びやすい点にあります。
jQueryを使うと、複雑な操作も少ないコードで実現できるため、効率的にWebページを作ることができます。また、さまざまなWebブラウザでも安定して動作するので、特別な設定なしで広く対応できます。
さらに、jQueryはJavaScriptの基礎を知らなくても簡単に使えるため、初心者でも短期間で学び始めることができ、プロジェクトを素早く進めるために非常に便利です。
jQueryを利用するには、jQueryのファイルをWebページに読み込ませる必要があります。
この方法には主に2つの方法がありますので、それぞれについて説明します。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>classの例</title>
<link rel="stylesheet" href="styles.css">
<!-- jQueryの指定 -->
<script src="js/jquery-3.7.1.min.js"></script>
</head>JavaScriptファイルには「通常の.jsファイル」と「.min.jsファイル」の2種類があります。
.min.jsファイルは.jsファイルを圧縮したもので機能は同じですが、コメントや空白が削除されているため、ファイルサイズが小さくなり読み込みが速くなります。
これにより、サーバーへの負担も軽減されるため、基本的には.min.jsファイルを使用するのが推奨されます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>classの例</title>
<link rel="stylesheet" href="styles.css">
<!-- CDNによるjQueryの指定 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>以上が「jQueryとは」の説明でした。
jQueryを使うことで、静的なページを簡単に動的にできるので、ぜひ理解していきましょう。
次のステップで、「jQueryの書き方」について説明していきます。
jQuery
全 4 動画
