今さら聞けない！jQueryとは【初心者向け】
プログラミング初心者向けに、jQueryとは何か、何ができるのかなど詳しく解説しています。JavaScriptライブラリの一つですが、Webデザインやフロントエンドのスキルを身に付けたい人は知っておきたい内容です。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
jQueryとは、JavaScriptライブラリでありますが初心者向けにどんなことが出来るのかなど詳しく紹介しています。jQueryで何ができるのか、何が便利なのか分からない人向けに説明しています。
jQueryは、WebサイトやWebサービスを作る上で便利なものなので、デザインのスキルを向上させたいという人は、ぜひ知っておきましょう。実際にjQueryでアニメーションを作る書き方も紹介しているので、書きながら覚えてみてください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
jQueryとは
jQueryとは、JavaScriptのライブラリ（便利な機能を使いやすくしたもの）の一種です。
jQueryが出る前からJavaScript製のライブラリは幾つか開発されていましたが、jQueryが発表されるとそれらのライブラリを抑えて急速に使用されるようになりました。
その理由はjQueryのロゴにもある通り、「write less, do more」という言葉です。短いコードで思い通りの、よりリッチなUIを実現することができます。
近年フラットデザインやマテリアルデザインなどのよりシンプルなデザインが、Webデザイン界では流行りとなっていますが、そういったデザインの中でも効果的に動きを出すことでユーザーに情報を与えやすくしています。
そのページに動きを出す機能をjQueryは担っています。
完全に静的なページというのはほとんど存在しないので、WebデザイナーにとってjQueryは必須と言っても過言ではないライブラリです。
jQueryというのは、何でしょうか？
JavaScriptの書き方などを簡単にすることが出来る、JavaScriptで作成されたライブラリなんだ。
新しい書き方を覚えるのは、少し面倒じゃないですか？
そうだね！ただ、一番のメリットはブラウザの互換性なんだよね。異なるブラウザでJavaScriptが微妙に違ったりするんだ。では、jQueryで出来ることを見てみよう！
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
jQueryで出来ること
jQueryではCSSやHTMLでは実現できないような、ページに動きをつけたリッチなUIを実装することができます。
- アニメーションをつける。
- 時間によってページの色を変更する。
- ユーザーの動作によってCSSを変更してレイアウトを変える。
などユーザーにより驚きを与えるようなページを作ることができます。
CSSでも簡単なアニメーションを作成することができます。しかし、CSSは元々レイアウト用に作られた言語であるのに対して、jQueryはページにより動きを出すために作られたライブラリで、そのための便利な機能がたくさん存在します。
jQueryの読み込み方法
jQueryを利用する為には、開発しているHTMLの中にjQueryを読み込む必要があります
読み込みをする方法は、2つありますのでそれぞれ解説していきます。
1つ目は、jQueryの公式ホームページからダウンロードしてきて直接読み込むという方法です。
上記のアドレスから最新のものをダウンロードし、自分のパソコンの中に保存しましょう。
そして、bodyタグの中ににコードを書いて、保存した場所を記述することでjQueryを読み込むことができます。
（下記のようにHTMLタグの中にコードを書いてみましょう。）
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="格納場所/jquery.min.js"></script>
もうひとつが上のコードのsrcという場所に、Webのアドレスを記述することで簡単に読み込む方法です。
（下記のソースを参考にするといいと思います。こちらはGoogleのサービスを利用した物になります。）
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQueryの書き方
jQueryのコードを書く場所は二種類存在しています。
一つ目は、HTMLファイルに直接書き込む方法です。
<script type="text/JavaScript"> //コード </script>
scriptタグに書かれた中にコードを書いていきます。
二つ目の方法は別のファイルを読み込む方法です。
<script type="text/JavaScript" src="パス/ファイル名"></script>
どちらの方法でも実行結果に差は出ません。
実際に書いてみよう
今回は、以下のようなアニメーションを実装してみます。とても簡単な記述で実装できるので、ぜひ自分でも同じように書いてみてください。
まずコードを書く場所ですがbodyタグの中（<body> </body>）に書きましょう。
body内ですが、最初に上記で説明した記述でjQueryを読み込みを行いましょう。
次にJavaScriptを書き込む場合の約束事ですがJavaScriptは「<script></script>」でくくります。
そして、jQueryの始まり書き方の基本ですがjQueryは、「$(function(){」から始まります。
処理自体の記述方法ですが、今回はHTMLの文字列を使って上から下へ移動させるという事をループさせたいと思います。
まず、HTMLの記述が以下のようになります。
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="jQuery.css" media="all">
</head>
<body>
<div id="content">
<div id="target">target</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
この中にはCSSを読み込んでいるところもありますが、CSSは以下のような記述です。
CSS
#content {
position: relative;
width:300px;
height:350px;
overflow:hidden;
background:#fff;
}
#target {
position: absolute;
left:10px;
top:50px;
background:#87d3aa;
width:50px;
padding:10px 0px;
text-align:center;
color:#fff;
}
続いてjQueryの書き方が下記のようになります。
jQuery
$(function () {
setTimeout('act()'); //アニメーションを実行1
});
function act() {
$("#target").animate({ //2
top: "350px" //要素を動かす位置3
}, 3000).animate({//4
top: "10px" //要素を戻す位置5
}, 0)//6
setTimeout("act()", 3000);//アニメーションを繰り返す間隔7
}
この画像は番号を振ってると思いますので番号順に処理を説明していきます。
- ここはsetTimeoutとかかれていますが、単純にかっこの中に入っているact（）という関数を呼び出してくださいという意味です。2番以降に書かれているものが関数になります。
- $(“#target”)と書かれているところがHTMLのidがtargetの文字に今から何かをしますという宣言です。
そして横の.animate({というものが文字にアニメーションを行う宣言です。 - 上下に文字を何ピクセル動かすか指定する記述です。
- }, 3000).animate({ とありますが、この部分が上記のアニメーションを何ミリ秒で行いますという指定。1000で1秒なので、今回は3秒です。
- 3番目と同様
- 4番目と同様
- 3秒後にactを呼び出してくださいという宣言です。
上記のコードを利用するとHTMLの文字を上から下に動かすアニメーションができます。是非上記のコードで試してみてください、下記のように動くアニメーションになります。
jQueryの学習方法
学習サイト
ドットインストール
このサイトでは、情報が書いてあるだけではなく動画もついていますので、とてもわかりやすいかと思います。
どちらかというと初心者向けになりますね。
jQuery入門
このサイトは入門とはかかれていますが、初歩的な事から応用的な所も書いてあります。
調べたいことも非常に調べやすいのでおすすめのサイトです。
書籍
jQuery最高の教科書
この書籍の利点としては、初心者向けになっているのでわかりやすく丁寧に書かれていることです。
これからjQueryを学習しようと思っている人は基礎から応用まで理解できるはずです。
jQuery入門道場
この書籍の良いところは、Webサイトに途中まで書籍の内容が乗っているという点です。
他のものより書いているパターンなどが多く、より理解を深める為にもよいでしょう。
今回はjQueryの概要について解説しました。
これからWebデザイナーを目指すという方も趣味でWebページを作成するという方も、今後リッチなページを作るためにはjQueryは必須となってきます。
プログラミングは難しいと思われるかもしれませんが、jQueryは短いコードで簡単に実装する事ができるので、ぜひ試してみてください。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
jQueryを書く場所というのは、JavaScriptと同じなんですね。
そうそう。jQueryもJavaScriptで作られてるので同じなんだよ。jQueryが書かれたファイルを読み込むと、該当のページで書き方を変えて書くことが出来るんだ。
jQueryを読み込んで、それからjQueryの書き方でJavaScriptを書く、という感じですか？
その通り！
また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
