Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@KentOhwada_AlibabaCloudJapan(kent Ohwada)inAliEaters (Alibaba Cloud Developers meetup)

jQuery: レスポンシブなWebサイトの構築

Last updated at Posted at 2021-08-16

Alex, Alibaba Cloud Community Blog 著者

jQueryは、軽量でより少ない記述でより多くのことができ、JavaScriptライブラリと呼ばれ、HTMLプログラムの開発を容易にします。jQueryの主な目的は、Webサイトの開発にJavaScriptを使用することを容易にすることです。jQueryは、反復的な作業を排除し、1行のコードで呼び出されるメソッドを通じてJavaScriptの問題に取り組みます。ブラウザ技術の高度化やクライアントロジックの要求により、JavaScriptやHTMLを扱うことは非常に困難になっています。しかし、代表的なJSライブラリの1つであるjQueryは、機能の標準化とその実装を容易にします。

jQueryを使用する利点の1つは、ライブラリの習得や作業にそれほど苦労することなく、生産性が大幅に向上することです。jQueryを使うことで、UIの要求やフロントエンドの論理的な問題に取り組むJavaScript開発者のスキルが大きく向上します。この記事では、クライアントサイドの開発に関連するjQueryのコアコンセプトを紹介します。

この記事を理解するためには、HTML、CSS、JavaScriptの基本的な知識が必要です。

#jQueryの特徴
jQueryを実際に使用する前に、jQueryの主な機能を紹介します。

###DOM要素セレクタ
jQueryには、DOM（Document Object Model） Element Selectorsが組み込まれており、操作方法によってDOM要素の選択が可能になります。ドキュメント内の単一または複数の要素を、それぞれのID、CSSクラス、属性フィルター、またはそれらの関係を使って取得します。

###jQueryオブジェクト(ラップ集合)について
ラップ集合は、DOM Element Selectorsから派生したjQueryオブジェクトです。その構造は配列に似ており、インデクサーを介して要素にアクセスすることができます。jQueryの関数は、ラップ集合に対して簡単に適用することができます。

###ラップ集合の操作
jQuery のラップ集合操作は、ラップ集合内でのすべての操作の適用を可能にします。jQuery.fnオブジェクトを使用すると、マッチしたセットに対する操作やDOMオブジェクト選択時の操作に100以上の関数を使用することができます。また、スタイル、要素の複製、新しい要素の作成など、他の操作へのアクセスも容易になります。また、ラップ集合操作では、jQueryのラップセットオブジェクトから結果を得て、1つのコマンドでより強力な操作を行うことができます。全体的には、比較的小さなAPIから学べる機能をうまく選択しています。

###jQueryによるイベント処理
ブラウザによって、DOMの実装に対する要件は様々です。しかし、JavaScriptはAJAXコールやDOM操作などの非同期イベントを処理するため、さまざまなブラウザに対応する際に課題となります。jQueryは、サポートされているブラウザ間でイベントモデルを処理する標準的な方法を提供します。

###jQueryのフットプリント
jQuery は、コンパクトなライブラリに多くの機能を搭載しており、わずか 16 KB で多くの機能にアクセスできます。

###簡単なプラグイン API
jQueryは使いやすいプラグインAPIを提供しており、様々なDOM操作を行うために何百もの新しいプラグインを組み込むことができます。さらに、豊富な機能のライブラリも提供しています。

###jQueryを始めるには
jQuery を使い始めるには 2 つの方法があります。

  • jQuery.com からライブラリをダウンロードする。
  • Google や Microsoft などのコンテンツ・デリバリー・ネットワーク (CDN) を通じて jQuery をインポートする。

jQueryのウェブサイトでは、製品版と開発版のライブラリをダウンロードすることができます。以下のように、HTMLのheadセクションにscriptタグを使用して、単一のJavaScriptファイルを参照します。

<head>
<script src="jquery-3.3.1.min.js"></script>
</head>

または、jQueryのCDNからライブラリをインポートします。Google APIの場合は、以下のように実装します。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

同様に、Microsoft CDNについても以下のコードを実行してください。

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

ほとんどのユーザーが他のウェブサイトにアクセスしながらライブラリをダウンロードしているため、CDN方式を使用すると便利です。CDNでは、ユーザーが他のWebサイトにアクセスする際にライブラリをダウンロードしているため、それがキャッシュされ、ユーザーがWebサイトにアクセスした際に自動的に読み込まれるため、レスポンスが向上します。CDNでは、ユーザーに最も近いサーバーからリクエストを処理するため、レスポンスタイムはさらに改善され、より最適化されます。

#jQueryの構文
前項で述べたように、jQueryはHTML要素を照会したり、操作したりすることができます。jQueryの構文では、HTML要素の選択や、サポートされている様々な操作を行うことができます。

jQueryの構文：$(selector).action()

  • $: jQueryを定義またはアクセスする
  • (selector)：HTML要素のクエリ
  • action()：DOM 要素に対して行う操作を定義する

jQueryの代表的な構文をご紹介します。

  • $(this).hide() ¨C 現在処理しているDOM要素を非表示にする
  • $("p").hide() ¨C 記載されているすべての要素を非表示にする
  • $(".test").hide() ¨C 記述されたクラスのすべての要素を非表示にする
  • $("#test").hide() ¨C 記述されたidを持つ要素を非表示にする

#jQuery セレクタ
jQueryのセレクタは、処理する要素を指示します。jQueryにしかない要素もありますが、CSSとの親和性が高いです。次のスニペットは、jQueryセレクタの構造を示しています。

$("selector")

以下は、よく使われるjQueryセレクタの一覧です。

  • $("*") - Wildcard：ページ上のすべての要素を選択

  • $(this) - Current：関数の中にある単一の要素を選択

  • $("p") - Tag：タグ内のすべてのインスタンスを選択
    タグ内のすべてのインスタンスを選択します。

  • $(".example") - Class:example クラスに関連するすべての要素を選択

  • $("#example") - Id: exampleのidを持つインスタンスを一つだけ選択

  • $("[type='text']") - Attribute：属性タイプにテキストが適用されているすべての要素を選択

  • $("p:first-of-type") - Pseudo Element：から最初の要素を選択
    .

通常、ほとんどの実用的なアプリケーションは、クラスとIDを扱います。

#jQuery Effects
jQuery Effectsは、イベントを様々な操作と結びつけることで、アニメーションの追加など、ウェブページ上の要素の操作を可能にします。実際の例を使って、ポップアップオーバーレイを実装する方法を見てみましょう。

ここでは簡単に、2つのIDを使う場合とは異なり、1つのクラスでオーバーレイの開閉を2つの関数ではなく1つの関数で行い、以下のような仮想的なHTMLファイルで考えます。

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Effects</title>
  <style>
  div {
    background-color: red;
    width: 80px;
    border: 1px yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go">&raquo; Run</button>
<div id="block">Animation!</div>
 
<script>
// Using multiple unit types within one animation.
 
$( "#go" ).click(function() {
  $( "#block" ).animate({
    width: "60%",
    opacity: 0.4,
    marginLeft: "1in",
    fontSize: "2em",
    borderWidth: "10px"
  }, 1500 );
});
</script>
 
</body>
</html>

jQuery .animate()は、アニメーション効果を出すのにとても便利です。このメソッドは、すべてのCSSプロパティ・オブジェクトに適用できます。.css()メソッドでは、いくつかの限られた機能を持つものの、プレーンなオブジェクトを定義する必要があります。CSSのプロパティ値を変更すると、要素がある状態から別の状態に変化します。ただし、背景色などの文字列はアニメーションしません。数値は、width: "60%", opacity: 0.4, "show", "hide", "toggle" などの文字列のみです。

以下に、代表的な方法をご紹介します。

- toggle() 
- show()
- hide() 
- fadeToggle()
- fadeIn()
- fadeOut()
- slideToggle() 
- slideDown()
- slideUp()
- animate()

一般的にjQueryのエフェクトは以下のようなものが多くあります。

- jQuery Hide/Show
- jQuery Fade 
- jQuery Slide 
- jQuery Animate 
- jQuery stop() 
- jQuery Callback 
- jQuery Chaining

jQueryのエフェクトでは、ユーザーがWebページ上の要素に影響を与えるアクションを起こすと、要素の操作が行われます。

#jQuery イベント
jQueryイベントは、ユーザーがウェブページ上で行うすべてのアクションを記述するもので、通常はページが反応するアクションを指します。いくつかの例を挙げてみましょう。

  • 要素上でのマウス・カーソルの移動
  • ラジオボタンの選択
  • 要素のクリック

jQuery のイベントに関連するメソッドがあります。以下に、その例を示します。

click()

このメソッドは、ユーザーがウェブページ上の要素をクリックしたときに、HTMLの要素にイベントハンドラ関数を付加します。以下の例では、現在の要素が表示されなくなります。

$("p").click(function(){
    $(this).hide();
});

dblclick()

このメソッドは、ユーザがWebページ上の要素をダブルクリックしたときに、HTMLの要素にイベントハンドラ関数をアタッチします。以下の例では、現在の要素が表示されなくなります。

$("p").dblclick(function(){
    $(this).hide();
});

mouseenter()

このメソッドは、ユーザーがウェブページ上の要素の中央にマウスカーソルを移動させたときに、HTMLの要素にイベントハンドラ関数をアタッチします。以下の例を参照してください。

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

mouseleave()

このメソッドは、ユーザーがウェブページ上の要素からマウスカーソルを移動させたときに、HTMLの要素にイベントハンドラ関数をアタッチします。

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});

さらに、on()メソッドを使って、複数のイベントハンドラを連結することも可能です。以下の例を考えてみましょう。

$("p").on({
    mouseup: function(){
        $(this).css("background-color", "orange");
    }, 
    mousedown: function(){
        $(this).css("background-color", "green");
    }, 
    click: function(){
        $(this).css("background-color", "red");
    } 
});

#まとめ
この記事では、jQueryを使って要素を選択したり操作したりする方法を紹介しました。イベントとエフェクトを組み合わせて、パワフルなユーザーエクスペリエンスを実現する方法を説明します。一言で言えば、このチュートリアルは、jQueryの構文とメソッドによって、ユーザーの入力に応じてHTML要素を簡単に処理できることを説明しています。舞台裏でデータをロードするためのシンプルなメソッドを備えたjQueryライブラリは、複雑さを伴わないレスポンシブなWebサイトの構築に役立ちます。

本ブログは英語版からの翻訳です。オリジナルはこちらからご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。

アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
アリババクラウドジャパン公式ページ

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?