【初心者用】JavaScriptが苦手なWebデザイナー向け「jQueryの基本的な書き方」

JavaScriptの数あるライブラリの中でも、最も有名なのが「jQuery」。Web業界で働いている方は、毎日コード目にしていると思いますが、デザイナーさんの中には苦手な人も多いのではないでしょうか（私です）。

そこで今回は個人的な備忘録も兼ねて、jQueryの基本的な書き方を解説しようと思います。これからjQueryをはじめようとしている人や、サンプルコードをコピペして使っているけど、仕組みや書き方がよくわからない人向けの内容です。

jQueryの書き方

jQueryの処理は、まず以下のように記述します。

$(document).ready(function(){
    ここにjQueryの処理を書く
});

下記の記述でも同じ意味です。

$(function(){
    ここにjQueryの処理を書く
});

この“$(function(){});”は、jQueryのお約束なので絶対に必要になります。コードの意味は「ページの読込が終わったら～」、命令を実行するという意味になります。実務だと短い下のコードの方がよく目にしますかね。

ネットなどでjQueryのサンプルコードを見ると、これが省略されているサイトがたくさんあります。必ず必要な記述なので、わざわざ書いていないのだと思いますが、私が本当に初心者の頃はコピペしても“$(function(){});”がないため動かない…なんてことがよくありました。

jQueryの基本構文は、操作する要素を指定する「セレクター」、操作するタイミングを決める「イベント」、操作する内容の「命令」の3つで構成されています。

$(セレクター).イベント(function() {
    $(セレクター).命令
});

実際の例だと次のようになります。

$(function(){
  $('#bg').mouseover(function () {
    $(this).fadeOut("slow");
  });
});

上記のコードは、要素にマウスオーバー（イベント）すると#bg(セレクター)がゆっくりフェードアウト（命令）します。これくらいのコードなら、英語もなんとなくわかるので理解しやすいですね。

あとは「セレクター」の指定方法と「命令」「イベント」にどんなものが用意されているのかを覚えれば、基本はバッチリ。私もjQueryは苦手なので、きちんと理解してコードをガリガリ書けるよう頑張ろうと思います。