ブログに戻る

jQueryとは何か、そしてどのように使えるのか？

author
Pranay Kapgate2021-08-18 · 6 min read
jQueryとは何か、そしてどのように使えるのか？

はじめに

プログラミングの世界に馴染みがある方なら、プログラミング言語がいかに重要であるかをご存知でしょう。最も重要で頻繁に使用されるものには、以下のようなものがあります。HTML, CSS、そしてJavaScript。HTMLとCSSがウェブサイトのデザインと構造化を支援するのに対し、JavaScriptはウェブサイトにインタラクティブ性を持たせることを可能にします。ウェブプロジェクトにユニークな機能を追加するために使用できるJavaScriptライブラリは数多くあります。その中の一つがjQueryライブラリです。

jQuery自体はプログラミング言語ではありません。これは、JavaScriptでのウェブ開発を容易にするために使用できるツールです。これにより、タスクがよりシンプルで簡単になります。「Write Less, Do More（より少ない記述で、より多くのことを）」というコンセプトに基づいていることで有名です。ウェブ開発を容易にするだけでなく、jQueryはクロスブラウザ互換性という追加のメリットも提供します。これは、出力にどのブラウザが使用されているかに関わらず、コードが適切にレンダリングされることを意味します。

jQueryによってどのように記述が簡潔になるかをより具体的にイメージするために、例を考えてみましょう。例えば、「Hello, World!」プログラムを書くとします。JavaScriptとjQueryでは、それぞれ以下のように記述します。

これら両方のコード行は同じ結果をもたらします。しかし、ご覧の通り、jQueryを使用することで、より簡潔で的を射た記述になります。

このチュートリアルでは、jQueryの基本についてすべて学びます。 このツールは、こちらのウェブサイトからダウンロードできます。このチュートリアルでは、jQueryに関する知識がまったくない完全な初心者であることを前提として進めていきます。jQueryのインストール方法と、それに関連するいくつかの基本的な概念について説明します。jQueryにおける一般的なセレクター、イベント、エフェクトのいくつかを探求します。その後、役立つ例を通じて、API、DOM、CDNなどの開発概念をテストする方法を学びます。読み進めて、jQueryの世界に親しんでいきましょう。

始める前に

事前に知っておくと有利になることがいくつかあります。例えば、HTMLとCSSの仕組みについて基本的な理解があると、非常に役立ちます。このチュートリアルではそれらについては説明しません。少なくともシンプルなウェブサイトを構築する方法を知っているという前提で進めます。また、プログラミング全般の仕組みについても基本的な理解が必要です。だからといって、進めるためにJavaScriptのエキスパートである必要はありません。プログラミングにおける論理、変数、データ型といったものに少し馴染みがあるだけで十分です。

システムにjQueryをセットアップする方法

まず、システムにjQueryをセットアップする方法を見てみましょう。jQueryはJavaScriptライブラリであるため、JavaScriptファイルとして提供されています。このファイルをウェブサイトのHTMLコードにリンクする必要があります。これを行うには2つの方法があります。前述のように、1つの方法はこちらからダウンロードすることです。公式サイト以外にも、Google Hosted Librariesのこちら.

でもjQueryを見つけることができます。もう1つの方法は、コンテンツデリバリネットワーク（CDN）を使用してファイルをリンクすることです。CDNは、ウェブコンテンツをローカルに配信するのを支援するサーバー群で構成されています。CDN経由でjQueryファイルをホストすると、コンテンツがユーザーにはるかに速く届くようになります。そのため、このチュートリアルではこれ以降、コンテンツデリバリネットワークを使用します。

最初の例では、ウェブプロジェクトを作成します。この小さなプロジェクトには、 style.css が css/ ディレクトリに含まれています。 script.js は js/ ディレクトリに配置されています。最後に、 index.html がウェブプロジェクトのルートに存在します：

Project Structure

このプロジェクトに従って、HTMLのスケルトンを作成します。その後、これを index.html:

ここにjQueryファイルをリンクします。前述のように、CDN経由でリンクします。jQueryのリンクは、 </body> タグの前に入力します。その後、今回の例の script.jsであるカスタムJavaScriptファイルを追加できます。JavaScriptファイルは、このように常にjQueryライブラリの下に配置することを忘れないでください。

代わりにjQueryライブラリのローカルコピーをダウンロードした場合はどうすればよいでしょうか？その場合は、jQueryファイルを js/フォルダに保存する必要があります。その後、次のようにリンクできます： js/jquery.min.js.

jQuery：基本

詳細に入る前に、jQueryの基本をいくつか確認しておきましょう。jQueryの主な役割は、DOMを使用してブラウザ内のHTML要素を接続することです。DOMとは、Document Object Modelの略です。これは、JavaScriptがブラウザ内でHTMLと対話できるようにする手法です。ウェブページを右クリックして「検証」を選択することで、DOMを視覚化できます。デベロッパーツールに表示されるHTMLがDOMです。

ノードは、DOM内の個々のHTML要素です。JavaScriptは、これらのオブジェクトや要素をすべて変更できます。これらのオブジェクトの配置は、ツリーのような構造としてイメージできます。 <html>がルート（根）にあり、そこから要素がさらに枝分かれしています。

右クリックして「ページのソースを表示」を選択すると、ウェブサイトの生のHTMLが表示されます。これはDOMとは異なることに注意してください。DOMは変更可能ですが、HTMLソースは完全に静的です。JavaScriptで行った変更は、このHTMLファイルには影響しません。全体の <html>ノードは、documentオブジェクトと呼ばれる外側のレイヤーでラップされています。

次に、jQueryを使用してウェブページとその機能を操作する方法を見ていきます。ただし、その前に、ページが準備できていることを確認する必要があります。

Type in the following after making the script.jsファイルを、 js/ディレクトリに作成した後、以下を入力します：

これで、記述するすべてのコードがこのコード内にラップされます。jQueryはコードの準備が整ったことを検出します。この関数内のコードは、DOMの準備が整ったときにのみ実行されます。

チュートリアルの最初で説明した「Hello, World!」スクリプトをもう一度見てみましょう。このスクリプトを開始したいとします。jQueryを使用してこのテキストをブラウザに出力するには、次のように空のブロックレベルの段落にID demoを適用する必要があります。

jQueryを呼び出すには、 $記号を使用する必要があります。CSSの構文とメソッドを適用して、jQueryでDOMにアクセスできます。簡単な例は次のとおりです：

これがjQueryで使用する形式です。すでに知っているように、 #記号はCSSでIDを表します。したがって、 #demo.html()セレクターを使用してdemo IDにアクセスできます。このメソッドを使用すると、要素内に存在するHTMLを変更できます。

次のコードは、「Hello, World」プログラムをscript.jsファイルのjQuery ready() ラッパーに記述する例を示しています：

このコード行を script.jsファイルに追加する必要があります。このファイルを保存してください。その後、 index.htmlファイルをブラウザで開くことができます。出力として Hello, World!が表示されるはずです。これは、理解を深めるためにDOMを確認するのにも良いタイミングです。「Hello, World!」のテキストを右クリックします。「検証」を選択します。DOMには次のように表示されます： <p id="demo">Hello, World!</p>。一方、「ページのソースを表示」をクリックすると、生のHTMLのみが表示されます。この場合、次のようになります： <p id="demo"></p>.

セレクターとは何ですか？

ここからは、jQueryの重要な機能のいくつかを見ていきましょう。その一つがセレクターです。jQueryセレクターは、操作したい、または「選択」したい要素をプログラムに伝えます。これらは、CSSで使用するセレクターと非常によく似ています。jQueryでセレクターにアクセスするための基本フォーマットは次のとおりです：

シングルクォーテーションまたはダブルクォーテーションで囲まれた文字列を使用できますが、jQueryスタイルガイドでは後者が推奨されています。必要に応じて、jQueryセレクターの完全なリストをこちらの公式ページで確認できます。参考までに、最も頻繁に使用されるセレクターのいくつかを以下に示します：

  • $("*")

これはワイルドカードセレクターです。ページ上のすべての要素を選択します。

  • $(this)

これはカレント（現在の）セレクターです。現在関数で操作している要素を選択します。

  • $("p")

これはタグセレクターです。以下のタグのすべてのインスタンスを選択します：<p> タグ。

  • $(".example")

これはクラスセレクターです。以下のクラスが適用されているすべての要素を選択します：example クラス。

  • $("#example")

これはIDセレクターです。以下のIDの単一のインスタンスのみを選択します：example ID。

  • $("[type='text']")

これは属性セレクターです。これは、text が type 属性に適用されている任意の要素を選択します。

  • $("p:first-of-type")

これは疑似要素セレクターです。最初の <p> を選択するのに役立ちます。.

イベントとは何ですか？

ウェブページには、ページが読み込まれるとすぐに読み込まれる機能があります。「Hello, World」の例を考えてみましょう。この場合、ソースHTMLに直接コードを追加することもできます。しかし、機能の読み込みにユーザーのインタラクション（操作）が必要な場合はどうなるでしょうか？そこでjQueryが役立ちます。

ユーザーがボタンをクリックした後にテキストを表示させたいとします。この機能を追加するには、次の要素を <button>要素を index.htmlファイルに追加する必要があります。このボタンはクリック「イベント」を監視（リスン）します：

ユーザーがブラウザを操作することはすべてイベントとみなされます。操作はマウスポインターまたはキーボードを介して行われます。上記の例では、ボタンのクリックがイベントです。そのため、クリックイベントと呼ばれます。

次に、「Hello, World」コードを持つ関数を呼び出す必要があります。そのためには、次の click() メソッドを使用します：

ご覧のとおり、 <button>要素のIDは triggerと名付けられています。これは $(“#trigger")を使用して選択できます。 click()メソッドを追加する目的は、プログラムにクリックイベントを監視させることです。次に、メソッド内に出力テキストのコードを持つ関数を配置します：

最終的なコードは次のようになります：

これで、 script.jsファイルを保存できます。その後、 index.htmlファイルを更新します。 ブラウザで変更を適用します。ボタンをクリックすると、テスト出力の「Hello, World!」が表示されます。

click以外にも、さまざまな種類のjQueryイベントがあります。これらのイベントメソッドの完全なリストは、こちらの公式ドキュメントから確認できます。以下は、時々目にする可能性のある、最も頻繁に使用されるイベントの一部です。

  • click()

clickイベントは、マウスを1回クリックしたときにコードを実行します。

  • hover()

hoverイベントは、マウスポインターが要素の上に重なったときにコードを実行します。また、マウスが要素に入ったとき、または離れたときにコードをトリガーするかどうかを、それぞれ mouseenter() および mouseleave() で指定することもできます。

  • submit()

フォームを送信すると、コードがトリガーされます。

  • scroll()

画面をスクロールすることが、コードを実行するイベントになります。

  • keydown()

キーボードのキーを押すと、コードが実行されます。

エフェクトとは何ですか？

jQueryエフェクトはjQueryイベントと連携して動作します。その言葉通り、エフェクトの主な目的はページにアニメーションを追加することです。要素を操作して、さまざまな種類のエフェクトを適用できます。これらのエフェクトは、特定のイベントによってトリガーされます。

理解を深めるために、例を考えてみましょう。ポップアップオーバーレイを開閉したいとします。1つの方法は、2つの異なるIDを使用することです。1つはオーバーレイを開き、もう1つは閉じます。もう1つの方法は、クラスを使用してこれを行うことです。クラスを使用するメリットは、同じ関数でオーバーレイの開閉ができることです。

Open your index.htmlファイルを開きます。次に、bodyから <button> と <p> タグを削除します。次に、HTMLに以下のコードを追加します：

次に、 style.cssファイルを見てみましょう。ここでの目標は、最小限のCSSを使用してオーバーレイを非表示にすることです。そのために、 display: noneを使用し、このように中央に配置します：

次に、 toggle()メソッドを使用します。このメソッドを使用すると、 displayプロパティを noneと blockの間で切り替えることができます。そのため、クリックするたびにオーバーレイが非表示になったり表示されたりします。このコードを script.jsファイルに追加します：

最後に、 index.htmlを更新して変更を適用します。これで、モーダルの表示と非表示を切り替えることができるようになります。ボタンをクリックするだけです。これと組み合わせて使用できるjQueryエフェクトは他にもあります。たとえば、単純な toggle() から slideToggle() または fadeToggle().

以下は、jQueryでよく使用されるエフェクトメソッドの一部です：

  • toggle()

このメソッドを使用すると、要素の表示状態を変更できます。これに関連する一方向のエフェクトは、 show() および hide().

  • fadeToggle()

このメソッドを使用すると、アニメーションを通じて要素の表示状態と不透明度を切り替えることができます。この場合の一方向のエフェクトは、fadeIn() および fadeOut().

  • slideToggle()

このメソッドを使用すると、スライド効果を使用して要素の表示状態を切り替えることができます。この場合の一方向のエフェクトは、 slideUp() および slideDown().

  • animate()

このエフェクトメソッドを使用すると、カスタムアニメーション効果を実行できます。指定された要素のCSSプロパティを使用します。

まとめ

このチュートリアルが、jQueryの徹底的な入門書として役立つことを願っています。これは、Web開発やコード作成を容易にする上で非常に役立つツールです。プログラミングの世界に入って比較的日が浅い場合は、特にその効果を実感できるでしょう。

jQueryの基本を構成するさまざまな要素について説明しました。また、これらの要素を選択および変更する方法や、イベントやエフェクトを効果的に活用する方法についても学びました。jQueryのようなツールをマスターすれば、魅力的なユーザー体験を提供するインタラクティブな機能に満ちたWebサイトを作成できるようになります。

JavaScriptの作業に役立つ、当社のブログのリソースをぜひご覧ください：

ハッピーコンピューティング！

author

Pranay Kapgate

著者 · CloudSigma

Preslav DobrevはCloudSigmaのクリエイティブデザイナーであり、従来型および革新的なマーケティングチャネルを活用した一貫性のあるビジネスアイデンティティに注力しています。彼は芸術的なビジョンと戦略的マーケティングを融合させ、インパクトのあるブランドナラティブを生み出すことに長けています。

コメント

コメントはまだありません。最初のコメントを投稿しましょう。