jQueryとは?【使い方を解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

jQueryとは?

jQueryとはJavascriptのライブラリ(Javascriptで作った機能を簡単なコードで使い回しが効くようにまとめたもの)の代表的なもののひとつで、 Javascript自体をより簡単なコードの記述で使うことが出来るようにしたものです。

jQueryを使うメリット

Javascriptで行う処理を短く簡単なコードで扱うことが出来るので作業負担は軽減されます。

jQueryではほぼ直接といっても過言ではなくHTMLやCSSのセレクタを指定して値の変更などを行うことが出来るので 直感的に記述していくことが出来ます。

初めてプログラミング言語を学習される方にとっても、いきなりJavascriptを学ぶよりもJQueryから学習し始めることによりプログラミング言語の記述の流れなどを理解しやすくなると思います。

jQueryを使うには?

jQueryをサイトに読み込むことで使用できる

jQueryはjQueryのファイルを読み込んで使用します。

公式サイトからファイルをダウンロードして自身のサーバーにアップして読み込む方法と、CDNというオンライン上に公開されているデータを直接読み込む方法があります。

CDNで読み込む場合は、
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
を自身のサイトの</head>の直前に貼りつければOKです。

        <!DOCTYPE>
        <html>
            <head>
                <title>sample</title>
                -省略-
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            </head>
            <body>
                -省略-
            </body>
        </html>
    

jQueryの記述の仕方

jQuery本体をサイトに読み込ませたら、いよいよjQueryを記述していきます。

HTMLの中に記述する場合は、<script></script>タグの中に記述していきます。

HTMLやCSSを操作する際の基本としては、$("")の中にタグやセレクタを記述して操作する対象を指定します。

こうして指定した対象に対してメソッドと呼ばれるあらかじめ用意された操作の命令文を使って実際に処理を行います。

例としてjQueryを使用してテキストの書き換えを行ってみます。

    <p>おはようございます。</p>
    <p>よろしくお願いします。</p>
    

おはようございます。

よろしくお願いします。

「おはようございます。」を「こんにちは。」に書き換えます。

    <script>
        jQuery(function($){
            $("#sample").text("こんにちは。");
        });
    </script>
    <p id="sample">おはようございます。</p>
    <p>よろしくお願いします。</p>
    

おはようございます。

よろしくお願いします。

最初に記述した$(function(){は、jQueryを使う上での定型文のようなものです。
$("#sample")で対象のセレクタを指定し、text()メソッドでテキストを書き換えるように操作しています。
セレクタとメソッドは「.」(ドット)でつなぎます。

まとめ

jQueryを使用することでJavascriptよりも直感的に記述できるので初心者でも比較的簡単に扱うことが出来ると思います。Javascriptを使うべきではないという 記事も見かけますが、個人的には簡単なjQueryから習得に取り掛かったことでプログラミングそのものへの理解が深まったと感じていますので初心者の方には 最初の足がかりとしてjQueryを学ぶことをオススメします。

広告
広告

関連する記事

サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。
サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]