jQueryとは?基本的な扱い方を分かりやすく簡潔に解説

Programming

今回はWEBサイトの制作でよく聞くjQueryについての説明と、その扱い方について解説します。jQueryは今も今後もWEB制作で必須な要素なので必ず覚えておきましょう。

jQueryとは?

jQueryとは、JavaScriptを簡単にかけるようにしたまとまりです。いわゆるライブラリと言われるもので、これを仕様することでJavaScriptのまどろっこしさを解決することが出来ます。

JavaScriptだとブラウザの互換性を保とうとするとそれなりに苦労するのが普通でしたが、jQueryを仕様することでこの辺りが解決します。またHTMLのDOM操作を簡単にしてくれたり、Ajax処理が簡単に記述できることも大きな特徴です。

DOMとは?

DOMとは、簡単に言うとHTMLの部品ことを言います。

DOM操作はブラウザで処理されているHTMLをJavaScriptで操作して追加or削除or変更を行うことを言います。これによりWEBサイトに動きを付け加えることが可能になります。

要するに、jQueryはJavaScriptを簡単にしたものと覚えてもらってOKです。

jQueryの読み込み方

jQueryの読み込み方は以下の2パターンあります。

  1. ファイルをDLして自分の環境にアップロードする
  2. オンライン(CDN)から読み込む

ファイルをDLしてアップロードする

まず1つ目の方法としてはjQueryのファイルをダウンロードして使うパターンです。

以下のjQuery公式サイトにアクセスして「Download jQuery」をクリックして次のページに進んで下さい。

jQuery公式サイト

DLページにある以下の「Download the compressed, production jQuery 3.5.1」のリンクがjQueryの本体になってます。

jQueryのダウンロード

このリンクをクリックすると以下の様にコードがズラッと表示されます。このテキストを全てコピーして下さい。

Download the compressed, production jQuery 3.5.1の中身

テキストエディタで「jQuery.js」とのファイルを作成してコピーしたテキストをペーストして保存します。

テキストエディタ
ファイル

ここまで出来たら後はCSSを読み込むときと同じようにheadタグ内にファイルのパスを正確に指定して読み込むだけです。

<script type="text/javascript" src="js/jQuery.js"></script>

オンライン(CDN)から読み込む

もう一つの方法がjQuery CDNから読み込む方法です。

CDNとは?

 CDNとは「Content Delivery Network(コンテンツデリバリーネットワーク)」の略称で、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。

jQueryのデータ一式もここに保存されているので①で紹介したようにわざわざ重たいファイルを自社サーバーから読み込む必要がなくなり、アクセス集中した際に読み込みリソースを自社サーバーとCDNで分割する事ができます。

jQuery CDNにアクセスして「minified」のリンクをクリックします。(Minify化=圧縮されているので軽いです。)

jQuery CDN

すると以下の様にコードが出てくるので、それをコピーしてHTMLのheadタグ内にペーストします。

jQueryのオンライン読み込みコード

▼上記のページのコード

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

jQueryの基本的な使い方

jQueryの基本的な使い方はJavaScriptと全く同じです。(それはそうですね。JavaScriptなんで。)

ただjQueryには大量に専用の関数、セレクタ、メソッドがあるので、それを覚えなくてはいけません。

ただ覚えるのは無茶な話なので、英語ですがjQuery公式ドキュメントを見ながら作業すれば良いと思います。もしくはインターネットで「jQuery メソッド」「jQuery セレクタ」「jQuery スクロール」などと調べればいくらでも出てきますので、その場その場で調べながらやればOKです。

jQueryで何が出来るのかと言うと?例えば。以下の様にスライダーを簡単に実装できたり、ライトボックスを作成したりする事が出来ます。それらの実際の使い方を知りたい方は合わせてどうぞ。


以上が「jQueryとは?基本的な扱い方を分かりやすく簡潔に解説」でした。

jQueryってなんだかHTML、CSS、Javascriptに比べてワンランク上の何かしら難しい言語ってイメージがあるかも知れませんがJavascriptより圧倒的に簡単(楽)なので学ぶ事を恐れないようにしましょう。

この学びのステージまでいけば後はもう凄い簡単になると思います。

TechAcademyなら最短4週間でイロハが身につきます。
オンライン受講者No.1のTechAcademyなら専属メンターが付きフロントエンドの技術も全てを学べます。

▶︎ フロントエンドコース

2020年12月31日ProgrammingJavaScript,jQuery,WEB,WEB用語

Posted by KT