【前置き】
jQeryが浸透して久しいですが、モバイル端末からのFlashの駆逐、HTML5とモバイル端末との親和性により、JavaScriptは必要不可欠の技術となったと思います。
ちなみに僕が昔勉強していたXHTMLの時代には、JavaScriptよりもFlashの方がクロスブラウジング（今ほど大変ではないですが）対策が簡単に出来て楽だったのですが、今ではすっかりJavaScriptが当たり前になり、それを簡単に扱えるjQueryがかなり浸透しているという状況だと思います。
【前置き終わり】
「jQueryは便利らしい、でもやっぱりよく分からない！」という方へ向けて、超入門記事を書いていきます！
出来るだけ分かりやすく書いていきますので、「もうコピペでいいよ」って思ってた方も、是非お付き合いくださいませ！
※こちらの記事は、「HTML、CSSはなんとなく分かるけど、jQueryってよく分からない！」という方を対象としております。
まずjQueryってなんだ？
ザックリ言うと、JavaScriptを簡単に書けちゃうぞ～っていう、ライブラリと呼ばれるものです。
詳しいことは置いておいて、まずは自分で書いてみて、思ったように動作させることができれば、楽しくなってそのまま勉強が進むと思うので、気楽に見てください！
とりあえずjQueryを読み込む
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> </body> </html>
こちらの6行目でjQueryを読み込んでいます。これはCDNと呼ばれるもので、今回はGoogleさんがみんなが使えるようにと公開してくれているものを使用します。
こちらは深く考えずにコピペでＯＫです！
超入門ということで、あえてHTMLの宣言から記載しています。
分かる方はスルーしてください。
さて、これでjQueryを使う準備は整いました！
jQueryを使うと宣言する。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
//ここに処理を書く
});
</script>
</head>
続いて、先ほどの6行目の次に、<script></script>タグで囲んで
$(function(){
});
と書きます。この中に書いたものが、jQueryですよー！
ということで、ページの読み込みが終わったら、自動的にこの中の処理をスタートしてくれる賢い子です！！
注意することは、HTMLが上から順番に処理されるため、先ほどのjQueryの読み込み（6行目ですね！）より下に書かないといけないということです！
では早速、jQueryを書いてみましょう！
まず、「何を何するか」を考えます。
そして、それをそのままjQueryとして書くだけ！
早速やってみよう
今回はサンプルとして、青い箱を用意しました。
ソースはこちら。
<div id="box" style="width:50px;height:50px;margin:15px auto;background-color:#00f;"></div>
では、この箱の横幅を2倍にしたいと思います。
「何を何するか」
で考えると、
「id=”box”のwidthを100pxにする」
という風に考えます。
「何を」の部分は、idを指定することが多いですが、こちらはCSSのセレクタが使用できますので、htmlやbodyなどの要素を指定することもできます。
そして「何する」の部分は、大体のことができると思っていただいて大丈夫です！
できないことは、勉強していくと自然に覚えます！！
それでは早速書いてみましょう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$('#box').css({width:'100px'});
});
</script>
</head>
<body>
<div id="box" style="width:50px;height:50px;margin:15px auto;background-color:#00f;"></div>
</body>
</html>
上記のjQueryを記入すると…
こうなったかと思います！！
つまり
どういうことかと言いますと、
「何を」⇒$(‘#box’)⇒id=”box”を
「何する」⇒.css({width:’100px’});⇒width100pxにする
ということです！！
簡単でしょ？？
「何を」の部分は、$(”)で囲んでCSSのセレクタを記入します。
「何する」の部分は、.(ドット)の後に命令を書きます。今回は.css()という命令で、cssの内容を書き換えたわけですね。
最後には;(セミコロン)をつけてあげてください。
これで一行分の命令が終わりましたよという合図です。
これだけです。
もちろん、細かいルールやたくさんの命令があったりして、覚えないといけないことはたくさんあります（今回でも、.css()の括弧の中の書き方など）。
しかしそれ以上に、簡単に自由に色々なことができるようになります。
まず第一歩はこちらから！
次回は「何の時、何を何する」編です！！
もっともっと簡単にwebを楽しみましょう！
コメント