jQueryって何？素のJavaScripの違いと導入方法を徹底解説！

Webサイトを作る際に、単純なコードで動きを実装できる便利なjQueryというライブラリが存在します。

特に、Web制作を学習したての人は

このような疑問がどこかのタイミングで出てくるはずです。

今回の記事を最後まで読むことによって、jQueryがどういうものか理解でき

具体的な使い方も実践できるよう記事を書いてますので、ぜひ最後まで読んでjQueryを導入してみてください。

導入してから実際にコードを反映させ、　サイトに動きをつけられるようになるまで、そこまで難しくないので

一緒にエディタを開きながら記事を閲覧することをお勧めします。

jQueryとは？

jQueryとは、JavaScriptのライブラリのことで

素のJavaScriptで実装するハンバーガーメニューやアコーディオンメニュー、スライダーなどを比較的簡単に実装できる特徴があります。

上に挙げた動きのある要素を実装しやすいので、Web制作の初心者には必須とも言えるライブラリになります。

ライブラリとは、複数の機能をあらかじめ用意してくれている便利キットみたいなものです。

jQueryを利用すれば、本来のJavaScript（vanilla JS）では数十行書かないといけない処理も、たった数行で書けてしまいます。

特にJavaScript初学者にとっては必要不可欠ですので、これを気にぜひ導入してみてください！

jQueryの導入方法

jQueryは、2つの導入方法があります。

①jQueryファイルをダウンロードして自分のサーバーに配置

1つ目は、jQueryのファイルをダウンロードして、自分のサーバーに配置をする方法です。

ファイルをダウンロードすること自体は、この記事を見ている方でもやったことがある方が多いでしょう。

しかし、この方法の難しいところは、「自分のサーバーに配置」しなければいけないこと（そもそも自分のサーバーを持っていないとできない方法）。

普段利用しているPCも実はサーバーにできたりしますが、ほとんどの人は自分のサーバーを持っていないと思います。

ということで、大体数の人には次に紹介する方法でjQueryを導入することをお勧めします。

②CDNを利用する

2つ目は、「CDNを利用する」方法です。

「CDN」とは、Content Delivery Networkの略であり、端的にいうとインターネットを介してファイルを配信する仕組みのことです。

インターネットを通じてファイルを取得できるので、わざわざファイルをダウンロードをする必要もありません。

今回のjQueryの導入に関しては、1つコードを入れれば良いだけですし、個人的にはこちらの方法をお勧めします。

ということで、今回はCDNを利用したjQueryの導入方法を解説していきますよ！

公式ページからCDN用コードを取得し、jQueryを導入

jQueryのCDN用のコードを取得するには、jQueryの公式ページに行く必要があります。

ただ、トップページから辿っていってCDNのコードが記載されているページに行ってもいいのですが、トップページからだとどのページに行けば良いのかがわかりにくく、迷子になる可能性が高いので

「jQuery CDN」と検索して出てきたページに移動するのがお勧めです。

ページを移動したら、1番上にある最新バージョンのjQueryをインストールしてください（記事執筆時はjQuery 3.7.1）。

4つほど選択肢があると思いますが、「minified」を選択してください。

逆に、「slim」や「slim minified」を選択してしまうと、jQueryの一部の機能を省略しているため

Web制作で今後実施していきたいスライダーやアコーディオンなどのアニメーションがうまく表示されない可能性がありますので注意してください。

jQueryのCDNを利用する場合は、最新バージョンを選択し、「minified」を選択。

すると、scriptタグで囲まれたコードが出てくるので、右側にあるコピーボタンでコピーします。

このコードを、htmlファイルのbodyタグの閉じタグ（</body>）の直前に貼り付けます。

上の画像では、10行目にあるコードですね。

jQueryに限らず、JavaScriptのscriptタグがついているコードは、基本的には</body>の直前に貼ることが多いのでそれは覚えておきましょう！（必須ではない）

これで、jQueryを導入する準備は完了です。

最後に

今回の記事の通りの手順を最後まできちんと行えたら、jQueryの導入は完了したことになりますので

・「上に戻るボタン」を実装してサイトの1番上までスクロールさせる

・FAQでよく使われるアコーディオンメニュー

こういったものの実装ができるようになります。

ですので、自分が実装してみたい機能をぜひ追加してみてくださいね！

下のお勧め記事でも、jQueryで導入できる様々な機能について紹介しています！