デザイン・プログラミングなど

jQuery入門 – どうやって導入するの?初心者でもできる使い方と準備方法。

jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。
こがねさん
こがねさん
「jQueryの初期設定の方法を知りたい、忘れたので確認したい。」

「jQueryで動きを付けたWebサイトをつくりたい。」

「HTML・CSSでのWebサイト制作はできるので、もう一歩踏み込んだサイト作りたい。」

「初期設定で必要なダウンロードファイルがどれか分からない…。」

本記事ではそんな方へ向けて、

JavaScriptライブラリ「jQuery(ジェイクエリー)」の入門編。導入する方法と使い方

を解説しています。

jQueryとは?

jqueryって何?
要約とポイント

「jQuery」は、圧倒的に人気のあるjavascriptライブラリーの1つ。

jQueryとは、JavaScriptのライブラリーの事です。

Webサイトを見ている時の動きのある見せ方、例えば写真スライドやクリックした画像がフワッと拡大して表示されるのは「JavaScript」を使って動きをつけています。

Webサイトを作る為の基本的な言語として「HTML」と「CSS」があります。

しかし、「HTML」と「CSS」ではWebサイトの基本的な骨組みと、色や配置などの装飾を施す事しかできません。

「スタイリッシュな動きをつけたWebサイトを閲覧者に見せたい!」

そんな時に必要なのが「JavaScript」という言語です。

ちなみに、Webデザイナーは制作したWebサイトに動きをつける為に毎回1からJavaScriptを書いている訳ではありません。

予め作ら用意された、様々な効果や動きを付けられるJavaScriptを手に入れ、Webサイトに組み込んでいます。

そんなJavaScriptライブラリーの1つで、圧倒的人気と知名度を誇るのが「jQuery」です。

 

jQueryを導入する2つ初期設定方法

jQueryを導入する2つ初期設定方法
要約とポイント

「jQuery」を導入する為の初期設定の方法は2つ。

  • 公式サイトよりファイルをダウンロードして設定する。
  • CDNサイトを利用し、リンクさせる事で設定する。

使えるようになるととても便利な「jQuery」。

そんなjQueryを使う為には、まず簡単な初期設定が必要です。

その方法は大きく2つあります。

1つ目は、jQuery公式サイトにて配布されている本体ソースファイルをダウンロードして手に入れ、自身のWebサーバーに設置する方法。

2つ目は、jQueryの本体ソースファイルを設置したサーバーのリンク先情報を提供しているCDNサイトを利用し、自身のWebサイトでjQueryを動く様にする方法。

この2つのどちらかを利用する事によりjQueryを自身のWebサイトで使える様にする事ができます。

jQuery本体ファイルをダウンロードして、自身のWebサーバーに設置する方法

出典:https://jquery.com/
要約とポイント

「jQuery」本体ファイルをダウンロードして設定する方法

  1. jQueryの公式サイトにアクセス
  2. jQueryの最新&圧縮版をダウンロード
  3. ダウンロードした「jquery.js」ファイルにリンクを設定

 

手順1 – jQueryの公式サイトにアクセスする

jQueryの公式サイトよりソースダウンロードして設置する。

jQuery公式サイト(https://jquery.com/ にアクセスし、トップページ右上にある「Download jQuery」と書かれたボタンをクリックしてページを移動します。

 

手順2 – jQueryの最新&圧縮版をダウンロードする

jQueryの最新版のダウンロード

ダウンロードページに移動すると、たくさんのリンクがでてきます。

特にこだわりがなければ、最新バージョンの圧縮版(compressed)リンクである「Download the compressed, production jQuery 3.4.1」(※6月19日現在最新版)をクリックしてダウンロードします。

「uncompressed」と表記のあるリンクは非圧縮版です。

こちらでもダウンロードすれば使うことはできますが、圧縮版と比べて容量は大きく、読み込み速度は遅くなります。

非圧縮版は圧縮版と比べjQuery本体のソースコードが見やすく書いてあります。jQueryがどういう仕組みで動いているのか知りたい方はダウンロードして一度確認してみるのもいいかもしれません。

正直僕はどういう仕組みで動いているのかは、見てもチンプンカンプンでした…。

 

手順3 – 表示されたjQueryのソースをダウンロードする

圧縮版のリンク「Download the compressed, production jQuery 3.4.1」をクリックすると上記の様な画面が表示されます。

文字だらけの画面が急に表示され、一瞬パソコンがおかしくなったのかと面食らうかもしれませんが大丈夫です。

右クリックなどから「名前を付けて保存」をする事でダウンロードする事ができます。

ダウンロードできれば「jquery-3.4.1.min.js」といった名前のファイルがダウンロードできているはず。

 

手順4 – ページから「jquery.js」ファイルにアクセスする

jQuery本体リンクの記述の仕方(headタグ内、もしくは、bodyタグの最後にリンクを記述します。)

 

jQueryの本体ファイルがダウンロードできれば、あとは作成中のhtmlファイルにダウンロードした「jquery-X.X.X.min.js(Xはバージョンナンバーが入ります)」へのリンクを設定すればjQueryを使う為の初期設定は完了です。

jquery本体ファイルへのリンクは、上記サンプルの様にページのheadタグ内、もしくは、bodyタグの最後にscriptタグを書きリンクさせます

jQueryを単に動かすのであれば、headタグ内、bodyタグの最後、どちらか一方にリンクを記述していれば大丈夫です。

headタグ内とbodyタグの最後に書く事についての違いは、ブラウザに読み込ませるコードをhtmlを先に読み込ませるか、scriptを先に読み込ませるかという違いがあります。

これまでは基本的にはヘッダータグ内に書くという事になっていましたが、最近はスマートフォンでの閲覧が主流になってきている事もあり、htmlファイルを読み込ませた後にスクリプトを読み込ませる事でページの読み込み速度を少しでも上げる様に工夫されています。

注意点としては、jQueryに適用するスクリプトがあれば、設置したjQueryのライブラリ本体を読み込ませた後に書く必要があります。

jQueryのスクリプトを書いたあとに、jQueryライブラリ本体を読み込ませるとうまくいかないので注意してください。

 

手順5 – jQuery本体ファイルのアップロードも忘れずに

現在まだ自身のパソコン、ローカル環境のみで開発中の方や、単に勉強中の方はこれでjQueryを使ったWebサイトの制作を進める事ができます。

jQueryを使ったWebサイトを公開する際は、jQueryライブラリ本体ファイルはhtmlファイルと同様に、FTPソフトなどを使用してWebサーバーにアップロードして公開します。

 

Google Hosted LibrariesにアクセスしてjQueryを利用する方法

図書館、ライブラリーの画像
要約とポイント

「Google Hosted Libraries」を利用してjQueryの初期設定をする方法

  1. Google Hosted Librariesにアクセス
  2. jQueryの最新版へのリンクをコピー
  3. 導入するページに入手したリンクを設定

 

Google Hosted Librariesとは?

jQueryをはじめ、様々なJavascriptライブラリーがGoogleのサーバーに保存されていて、そのデータを直接リンクさ せて利用する事ができるサービスです。

前項ではjQueryのサイトより直接ライブラリー本体のコードをダウンロードし、サーバーにアップロードする事でjQueryの初期設定、設置をしましたが、この方法では、googleから対応コードをコピペするだけでjQueryの初期設定を完了させる事ができます。

いわゆるこういったCDN(Content Delivery Network)を提供してくれているサイトはGoogle以外にもあり、

からでもjQueryライブラリー本体コードのリンクを取得する事ができます。

今回はGoogleから取得して利用する方法をご紹介しています。

Google Hosted Librariesのメリット・デメリット

  • 手軽にjQueryの初期設定ができる。
  • jQueryの公式サイトからダウンロードした圧縮バージョンより、データが軽量化されている。
  • 共通のライブラリーの為、ユーザーが過去にGoogle Hosted Librariesを使ったWebサイトを閲覧し、キャッシュさ れていると表示速度が更に上がる。
  • 良くも悪くもGoogleサーバー内にあるデータに依存している為、予期せぬ変更などが起こる場合がある。もちろん万が一Googleのサーバーがダウンすると、自身のサイトのjQueryにも影響が出ます。

 

手順1 – Google Hosted Librariesにアクセスする

Google Hosted Librariesにアクセスする

それでは、Google Hosted Librariesを利用した、jQueryの初期設定の手順を説明していきます。

まずは、

Google Hosted Libraries(https://developers.google.com/speed/libraries/)

にアクセスします。

 

手順2 – 目次にある「jQuery」の項目を選択する

Google Hosted Libraries 目次の「jQuery」を選択する

アクセスしたページにある右側の「目次」より、「jQuery」の項目をクリックします。

 

手順3 – 「3. x snippet」項目のscriptコードをコピペする

x snippetの項目の<script>のコードをコピペする | jquery

jQueryの項目にアクセスすると、いくつかのリンクコードが表示されます。

特にこだわりがなければ、「3. x snippet」の最新版

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>

(※2019年6月時点の最新バージョンです)

をコピーします。

 

手順4 – 自身のWebサイトに設置する

jqueryの初期設定方法(headタグ内、もしくは、bodyタグの最後にリンクを記述します。)

 

jQueryライブラリー本体を設置する為のリンクをコピーできたら、jQueryを実際に導入するWebページにリンクを貼り付けます。

前のjQueryライブラリー本体をダウンロードして使う場合と同様に、headタグ内、もしくはbodyタグの最後、どちらか一方にリンクを記述して完了です。

 

おまけ – jQueryサンプルプラグイン

jQueryは、1からバリバリコーディングをしなくても、簡単に導入できるプラグインが豊富に充実しています。

おまけとしてシンプルで使いやすそうなプラグインをピックアップしておきます。

slick

slick出典:http://kenwheeler.github.io/slick/

 

画像スライダーのjQueryプラグイン「slick」

http://kenwheeler.github.io/slick/

スライダーはよく使いますが、やっぱりシンプルなのが使いやすくていいですね。

 

light box

light box出典:https://lokeshdhakar.com/projects/lightbox2/

 

イメージギャラリーをつくるjQuery「LiteBox」
https://lokeshdhakar.com/projects/lightbox2/

画像ギャラリーをつくるjQueryプラグインといえばこれ。

 

Magnific Popup

magnific popup出典:https://dimsemenov.com/plugins/magnific-popup/

 

イメージギャラリーをつくるjQueryプラグイン「Magnific popup」

https://dimsemenov.com/plugins/magnific-popup/

liteboxと同様にイメージギャラリーをつくるjQueryプラグイン。

シンプルな操作性がgood。

 

multiscroll.js

multiScroll出典:https://alvarotrigo.com/multiScroll/

 

ウインドウスクロールする動きのあるウェブサイトをつくる事ができるjQuery「MulitiScroll」

https://alvarotrigo.com/multiScroll/

初見でインパクトあるWebサイトをつくりたい時に使える、Webサイトにスタイリッシュな動きをつけるjQueryプラグイン。

 

jQuery入門 – どうやって導入するの?初心者でもできる使い方と準備方法。まとめ

jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。まとめ

Webサイトに動きをつける為の便利なjavascriptライブラリー「jQuery」の入門編として、初期設定の方法をまとめてみました。

jQueryを使いこなせると、Webサイトでできる表現の幅がぐっと広がります。

この記事が、Webサイト制作を勉強中の方や、導入する為の初期設定の確認用としてご活用いただければ幸いです。

 

【簡単スッキリ】jQueryでCSSを追加や変更の操作をする方法【jQueryの基本的な書き方が分かります】
簡単スッキリ!jQueryでCSSを変更・追加操作をする方法【jQueryの基本的な書き方】なんか小難しくて、jQueryの書き方がスッキリ分からない…。そんな方へ向けて、jQueryの基本的な書き方として、CSSの指定の仕方を例に簡単、分かりやすく解説しています。jQueryプラグインの設置やカスタマイズでお困りの方は是非参考にご覧ください。...
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】jQueryのHTML・CSSを操作する命令一覧や、基本的な使い方が分かる記事をお探しですか?本記事ではわかりやすい実行サンプル付きで、jQueryの命令一覧と基本的な使い方を解説しています。書き方の確認や使い方の勉強用としてご覧ください。...
【jQuery】まとめて指定「メソッドチェーン」の書き方のアドバイス【分かりやすいデモサンプル付き】
jQuery - まとめて指定「メソッドチェーン」の書き方のアドバイス。分かりやすいデモサンプル付きjQuery(ジェイクエリー)で複数の命令をまとめて記述する「メソッドチェーン」の書き方をお探しですか?本記事ではサンプル付きで分かりやすくjQueryのメソッドチェーンの書き方について解説しています。書き方を忘れてしまった時の確認用として、勉強中の方の参考としてご活用ください。...
プログラミングなんて自分にできるの?そんな方はスクールの無料体験がオススメ。
こがねさん
こがねさん

「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ…。」

AIソルトくん
AIソルトくん
最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。

僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です

ただ、キチンとした基礎を身につける事がれば、あとは独学でも様々な言語に手を広げていく事ができます

もし独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。

「短期間でプログラミングスキルを身に付けたい。」
「しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」

そんな方は最初に短期間スクールで学んでみる事もオススメです。

もちろん今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しています。

「余計な回り道を省いて、手っ取り早くしっかりとしたスキルを身に着けたい。」

そういった方は、実績のあるオンラインスクールを一度体験してみるという方法もあります。

プログラミングのオンラインスクールも探せば色々選択肢があります。

その中でもTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースも用意されています。

独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料コースを体験してみると、プログラミング学習の行きづまりを解消すると共に、楽しさや将来への道が大きく開ける可能性があります。

無料コースを試してみてやめるもよし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみてください。
そうする事で様々なプログラミング言語の習得の難易度も一気に下がります。

奪われないし裏切らないスキルは、きっとあなたの人生の助けになります。

関連記事