.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryの使い方とは?覚えておきたい基本事項やサンプルを紹介

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

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
jQueryの使い方とは?覚えておきたい基本事項やサンプルを紹介
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    プログラマー
    jQueryを使用すると、どういうことが便利になるのでしょうか?どんな機能が利用できますか?
    プロジェクト
    リーダー
    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でバリデーション(文字数チェック)を実装するには、以下のように記述します。

    プログラマー
    jQueryを使うと、様々な機能を実装するのも便利になるのですね。これから使ってみたいと思います。
    プロジェクト
    リーダー
    ほかにも機能が簡単に実装できるので、jQueryを使ってWebサイトに豊富な機能を付けていきましょう。

    jQueryの使い方を理解しよう

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

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job