.net column
.NET開発者のためのブログメディア

Webページ開発のコード

jQueryの使い方とは?覚えておきたい基本事項やサンプルを紹介

2019年10月09日
PG
jQueryを使用すると、どういうことが便利になるのでしょうか?どんな機能が利用できますか?
PL
jQueryを使うことで便利になる機能はたくさんあります。どんな機能なのか一緒に確認しましょう。

jQueryのメリット4つ


jQueryの使い方と、そのメリットを4つ紹介します。ここでは、
・コード量を少なくできる
・多くの機能がある
・保守性の高いコードを作成できる
・利用者が多い
の4つのメリットについて紹介します。

1:コード量を少なくできる

JavaScriptはオブジェクト指向スクリプト言語です。WebアプリケーションはJavaScriptだけでも実装できますが、コードの量が多くなりがちです。

そこで、jQueryと呼ばれるライブラリを使用します。jQueryを使うことで、JavaScriptの大量のコードをシンプルに記述できます。つまり、同じ機能でもコード量を少なくできるということです。

2:多くの機能がある

jQueryには多くの機能があります。例えば、特定の要素を非表示にしたり、モーダルウィンドウを表示したり、アニメーション効果を付けたり、用途に応じてメソッドを使い分ける必要があります。

3:保守性の高いコードを作成できる

JavaScriptのライブラリであるjQueryで記述することでコード量が少なくなります。コード量が少なくなると、ロジックがシンプルになります。ロジックがシンプルになると、保守性が上がります。

4:利用者が多い

jQueryは利用者が多いため、技術記事も多く存在します。インターネット上で検索すれば、サンプルコードも多く入手できます。また、不具合に遭遇した場合などに、使い方の調査がしやすいです。

jQueryで覚えておきたい基本事項3つ


jQueryで覚えておきたい基本事項を3つ紹介します。ここでは、
・セレクタとは
・よく使うメソッドとは
・イベントを使うときのメソッド
について紹介します。基本事項をマスターして応用してください。

1:セレクタとは

セレクタとは、操作したいHTML要素を指定する処理です。以下のような使い方をします。

jQueryは以下のような使い方をします。$の中に記述するのがセレクタです。

2:よく使うメソッドとは

jQueryでよく使うメソッドの使い方を紹介します。ここでは、以下の3つのメソッドを紹介します。先ほどのHTMLに対してjQueryを記述してみてください。

    • append

要素を追加するにはappendメソッドを使用します。使い方は以下の通りです。

    • css

CSSを書き換えるにはcssメソッドを使用します。使い方は以下の通りです。

    • text

文字列を書き換えるにはtextメソッドを使用します。使い方は以下の通りです。

3:イベントを使うときのメソッド

jQueryでイベントを扱う方法を紹介します。

  • click
jQueryは以下のような使い方をします。
実行結果は以下のようになります。

See the Pen
jQuery_entry_event
by kskumd (@kskumd)
on CodePen.

jQueryの使い方ガイド4STEP

jQueryの使い方を4STEPに分けて紹介します。
・STEP1:jQueryの導入手順
・STEP2:記述場所3つ
・STEP3:基本構文について
・STEP4:はじめに記述するコード

1:jQueryの導入手順

jQueryを導入する手順を紹介します。ここでは、
・CDNで配布元に公開されたファイルを使う場合
・ダウンロードしてサーバーに直接アップする場合
の2種類の方法について紹介します。

CDNで配布元に公開されたファイルを使う場合

CDNで配布元に公開されたファイルの使い方は、HTML内に以下のように記述します。jsファイルをダウンロードする必要がありません。

ダウンロードしてサーバーに直接アップする場合

ライブラリをダウンロードする使い方は、jQuery公式ダウンロードページからライブラリをダウンロードして使用します。

2:記述場所3つ

ライブラリのリンクを記述する場所を3つ紹介します。ここでは、
・HTMLのhead内に記載すること
・ダウンロードする場合は記載前にjQueryファイルをアップする
・WordPressで記述する場合
について紹介します。

1:HTMLのhead内に記載すること

CDNでjQueryを使う場合は、以下のようにheadタグ内に記述します。

2:ダウンロードする場合は記載前にjQueryファイルをアップする

ダウンロードする場合は記載前にjQueryファイルをアップして、headタグ内に記述します。

3:WordPressで記述する場合

WordPressでjQueryを記述するには、以下のように記述します。

jQueryはバージョンによって使える機能に違いがあります。対応しているjQueryに変更する必要があるため、注意してください。

3:基本構文について

jQueryの基本構文の使い方を紹介します。以下のように記述します。

基本構文の使い方をマスターして応用してください。

4:はじめに記述するコード

jQueryを使用することで動きのあるページにできます。ここでは、フェードイン/フェードアウトをトグルするメソッドを使ってみます。

jQueryは以下のような使い方をします。

実行結果は以下のようになります。

See the Pen
jQuery_entry_first
by kskumd (@kskumd)
on CodePen.

jQueryを使用するとできること5選

jQueryには主に以下のような機能があります。

・アニメーションを付ける
・ブラウザ上の要素を動かす
・ブラウザ上の要素を動的に変更する
・入力項目の入力チェックを行う
これらの機能が簡単に実現できて、なおかつコード量も少なくできます。

1:特定の要素を非表示にする方法

特定の要素を非表示にするにはhideメソッドを使用します。

jQueryは以下のような使い方をします。

実行結果は以下のようになります。

See the Pen
jQuery_entry_hide
by kskumd (@kskumd)
on CodePen.

2:モーダルウィンドウを表示する方法

モーダルウィンドウを表示するには、専用のライブラリを使用します。headタグ内にCDNを記述します。使い方を紹介します。

実行結果は以下のようになります。

See the Pen
jQuery_entry_modal
by kskumd (@kskumd)
on CodePen.

3:画像の読み込み速度を向上する方法

画像の読み込み速度を向上するにはLazy Loadというライブラリを利用します。遅延読み込みを行ってくれるライブラリです。遅延読み込みとは、画像を一度にすべて読み込まずに、必要に応じて読み込む仕組みです。

これにより画像の読み込み速度を向上できます。使い方を紹介します。

jQueryは以下のような使い方をします。

実行結果は以下のようになります。

See the Pen
jQuery_entry_lazyload
by kskumd (@kskumd)
on CodePen.

4:h1要素のテキストを動的に変更したいとき

h1要素のテキストを動的に変更するにはtextメソッドを使用します。

jQueryは以下のような使い方をします。

実行結果は以下のようになります。

See the Pen
jQuery_entry_text
by kskumd (@kskumd)
on CodePen.

5:テキストの色を変更したいとき

テキストの色を変更するには、CSSを書き換えます。cssメソッドを使用します。

jQueryは以下のように記述します。

jQueryは以下のような使い方をします。

See the Pen
jQuery_entry_css
by kskumd (@kskumd)
on CodePen.

jQueryを使ったサンプル3つ

jQueryの使い方の理解を深めるためのサンプルを3つ紹介します。ここでは、
・ボタンでフォントサイズを変えたいとき
・CSSを書き換えたいとき
・フォームを制御したいとき
について紹介します。

1:ボタンでフォントサイズを変えたいとき

ボタンでフォントサイズを変えるには、CSSを書き換えます。

jQueryは以下のような使い方をします。

実行結果は以下のようになります。

See the Pen
jQuery_entry_font
by kskumd (@kskumd)
on CodePen.

2:CSSを書き換えたいとき

JavaScriptでCSSを書き換えたい場合は、以下のように記述します。

jQueryでCSSを書き換えることで、文字の色やフォントサイズを変更できます。上記の章で紹介していますので、ここでは使い方は省略します。

3:フォームを制御したいとき

フォームの使い方を紹介します。ここでは、
・基本的なフォームの制御方法
・バリデーションを作りたいとき
について紹介します。
使い方をマスターすることで、フォームで入力した値を取得したり、入力チェックなどが手軽にできます。

基本的なフォームの制御方法

フォームに入力された文字列を取得する使い方を紹介します。

jQueryは以下のような使い方をします。

実行結果は以下のようになります。結果はコンソールログに表示されます。

See the Pen
jQuery_entry_form1
by kskumd (@kskumd)
on CodePen.

バリデーションを作りたいとき

フォームにバリデーションを追加するには、専用のライブラリ(jquery.validate.min.js)を使用します。バリデーションライブラリの使い方を紹介します。

jQueryは以下のような使い方をします。

実行結果は以下のようになります。

See the Pen
jQuery_entry_form2
by kskumd (@kskumd)
on CodePen.

JavaScriptでバリデーション(文字数チェック)を実装するには、以下のように記述します。

PG
jQueryを使うと、様々な機能を実装するのも便利になるのですね。これから使ってみたいと思います。
PL
ほかにも機能が簡単に実装できるので、jQueryを使ってWebサイトに豊富な機能を付けていきましょう。

jQueryの使い方を理解しよう

jQueryを利用すると、JavaScriptを利用するよりも簡単に様々な機能が実現できるなど、コード量も少なくできることが分かりました。
Webサイトに様々な機能が付けられるので、jQueryを利用してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags