Help us understand the problem. What is going on with this article?

エンジニア一年生によるjQuery入門

More than 1 year has passed since last update.

jQueryとは

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
( -- https://jquery.com/ -- )

カッコつけて公式ページの What is jQuery? という部分から引っ張ってきました。笑
えーと、まとめると、
jQueryってJavaScriptのライブラリなんだよ!!!:sunglasses:
ってことでいいと思います。(一文目の訳にしかなってませんが。笑)

「ライブラリ」ってなんぞや?
って人もいると思うので説明しておくと、
ライブラリとはある程度まとまったプログラムをあらかじめ作ってくれているファイルのことを言います。

ざっくりイメージで言うと、

JavaScript: 野菜そのもの
jQuery(JSのライブラリ):カット済み野菜(コンビニやスーパーなんかに売ってるやつ)

って感じです。笑
これだと、料理するときにかなり差が出てきますよね?工数変わりますよね?
ライブラリはカット野菜のように便利だから重宝されるとひとまず思ってくれればいいと思います。

それで結局jQueryって?笑

話が少し脱線しましたが、

jQueryは、世界標準で愛されるカット済み野菜のように便利なJavaScriptのライブラリなんだと覚えてもらえたかと思います。

ということはつまり、jQueryでできることはJavaScriptでも書けるということになります。(コード量はかなり変わりますが...)

そもそもjQueryはどういったときに活用するのかというと、
 WEBページに動き(アニメーションや変化)をつけたいときに使います!

よくあるもので言えば、
- マウスオーバーするとその部分に色がつく、文字が変わる
- 入力フォームが入力内容に応じて変わる
- 画面をスクロールしていくとポップアップが表示される

みたいなものが挙げられます。
みなさんが普段見ているWEBページには、ほぼ間違いなくjQueryが使われると思ってくれていいかと!

jQueryのメリット

いくらjQueryが便利だ便利だと言っても、どうしてJS(JavaScript)のライブラリとして
jQueryが最も有力かというと、
それは、

jQueryはどんなブラウザにも適応するから!!!
だと言えると思います。

ブラウザには、Windowsに標準で入っている「IE(インターネットエクスプローラー)」、Googleの「Google Chrome」、MacやiPhoneで使われている「Safari」など様々な種類があります。
エンジニアの方でなければ、意外と意識せずに同じようなものとして使っていると思います。(一年前の自分がそうです。笑)

しかし実は、ブラウザごとにそれぞれ微妙に仕様が違います。
それが原因で、同じJavaScriptのコードでも動かなかったり、動きが変になってしまうブラウザがあったりします。
ただ、jQueryではその問題が起こりません!
これがjQueryの人気をさらに確固たるものにしていると言えるでしょう。

jQueryの使い方

jQueryを使うためには、主に二つのパターンがあります。

①ファイルをダウンロードして、読み込むパターン
②Webから直接jQueryファイルを指定して読み込む

どちらでも機能的な差異はありませんが、
②の場合はネットワーク環境でなければ作動しないため、①のパターンの方が推奨されるかもしれません。

*また、どちらの方法であっても</body>の直前に記述するのがオススメされています!

なぜかというと、HTMLがすべて表示されてからjQueryを読み込んだ方が、
ユーザーに読み込み時間を意識させなくて済むというメリットがあるからだそうです。

jQueryの書き方

jQueryプログラミングの記述方法は、至って簡単です。
基本的には、 【 対象要素 + 行いたい処理 】の組み合わせ だと覚えてください!!

jQueryでは「セレクタ指定」 によって、要素を簡単に見つけることができます!
「セレクタ指定」とは、「$(‘ ‘)」の中へ目的の要素を記述することです。

例えば、h1要素を見つけたい場合は、下記のようにします。

$('h1')
jQueryでは「.(ドット)」で連結することで、対象要素と行いたい処理を組み合わせることができるため、

$('h1').text('Qiita is a good tool')

のようになります。

最後に

jQueryに関しては、仕事でも使うことが多そうなので、
どんどん記事書き足して行く予定です!
とりあえず今回は、jQueryって何かの整理をしてみましたー!!
誰かの参考になれば幸いです。

お読みいただき、ありがとうございました。

byピカピカのエンジニア一年生

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away