🔰

jQueryとは＋脱jQueryの理由＋基本書式

2023/07/21に公開

jQuery

プログラミング初心者

tech

はじめに

プログラング初心者がアウトプットのために記述しています🙇

jQueryとは

簡単便利に使えて、プログラミング初心者のファーストステップにおすすめなjQuery。
「JavaScriptを短いコードで簡単に書けるようにしたもの」がjQuery。

jQueryでできること

1.コードをJavasprictで記述するよりも、短く簡単に記述できる。
HTMLのDOM操作をとても楽に実装することができたり、Ajax通信（POST等）を簡単に実装できることなどが特に注目され、活用されてきました。

2.HTMLとCSSを操作して…

要素の大きさ・色・透明度などを変更できる
表示・非表示の切り替え
フェードイン・フェードアウト・スライド・アニメーションなど動きを加える
ユーザーが入力した内容を取得・反映など
外部ファイルを取得・表示

などなど…

脱jQueryと言われる理由

1.動作が遅くなることがある
jQueryを読み込むまでの間は、html情報のパース（html構造の解析）が行われません。そのため、jQueryを使用していない場合に比べて、読み込みに遅延が発生します。

2.ほかのフレームワークライブラリとの併用が難しい。
最近はReact・Vue.jsなどのモダンフレームワークを導入するケースが多くなっています。その場合、使用するコードによっては、コードの競合が起こり、トラブルの原因になることも。

3.プラグインが古いことが多い
jQueryのメリットの一つでもあった豊富なプラグインですが、作成者が更新していないなどさまざまな理由でプラグインが最新のバージョンのjQueryに対応していないことがあります。

基本書式

jQueryを読み込みます。
【例】

〇〇.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <script src="jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

jQueryを書くには、HTMLファイル内に直接記述するか、専用のJavasprictファイルに記述します。
【例】

〇〇.js

$(document).ready(function () {
  $('body').html('<h1>Hello jQuery!!</h1>');
});

何が書かれているか

$(document).ready(function () {
 //jQueryプログラムの内容
});

【省略型】

$(function(){
  //jQueryプログラムの内容
});

基本書式の中身

$(セレクタ).メソッド(パラメータ);

記述にするとこう

$('body').html('<h1>Hello jQuery!!</h1>');

基本書式に関わる用語

セレクタ
操作の対象になる部分です。今回のコードは、「body」がセレクタです。
メソッド
今回のコードでは、「html」がセレクタです。

メソッドにパラメータを指定すると、その内容に書き替えられます。
パラメーターを取得しない場合には、メソッドが取得されます。

セレクタ＝「body」
メソッド＝「html」
パラメータ＝「<h1>Hello JQuery!!</h1>」

jQueryでは、上記3つを用いて、どこに対して何を行うかを記述しています。

今回だと、「bodyのタグ内のhtmlを、<h1>Hello JQuery!!</h1>で書き換えなさい」という記述になる。