jsの話・・・変数とか戻り値とか

jQueryはJavaScript(以降、js)だと「おまじない」の項で書きましたが、そういうわけで、jsと考え方は同じだし、jsと同じように変数やメソッド(命令・・・と考えてよいです)も使えます。
jQueryはjsをよく知らなくてもわりと簡単に記述できますが、ここではjQueryを使いこなすうえで、jsの知っておいた方がおトクなことをいくつか挙げておきます。

あくまで、知っておいた方が良いことをご紹介するだけで、詳しくは説明しません。


sample

aさんはリンゴを1個、bさんはリンゴを2個持っています。二人合わせて何個のリンゴがあるでしょう?

答えは・・・ここをクリック!

クリックするとダイアログボックスが開きます。「OK」をクリックして閉じてください。
2回目のクリックには反応しません(ブラウザを再読み込みすれば、何度も確認できます)。


サンプルの解説

<p>aさんはリンゴを1個、bさんはリンゴを2個持っています。二人合わせて何個のリンゴがあるでしょう?</p>
<p class="jq">答えは・・・ここをクリック!</p>

上のサンプルのhtmlはこうなっています。
jQueryのコードでは、変数a、bを用意して、それぞれに数値を代入、計算結果をalertメソッドで表示させるようにしています。

$(function(){
    var a = 1;
    var b = 2;
    $('.jq').one('click',function(){
        b = a + b ;
        alert(b);
    });
})

変数の宣言には[var]というおまじないを使っています。
値は[=]を使って代入しています。
変数を使うと煩雑なソースがすっきりするなど、いろいろ便利です。
ここでは詳しく説明しませんが、変数とは値を入れておく箱だと思っていただければよいです。
変数には文字列を入れておくこともできます。文字列はクォーテーション('または")で囲むことになっています。

class[jq]をクリックしたら、変数aとbを足して、変数bに代入し、alertで変数bの値を表示させるという処理させています。
計算は算数と同じような演算子を使って行えます。左辺に代入先の変数(など)、右辺に計算式・・・というこの形式を覚えてください。

alertはダイアログボックスで()内の値を表示させることができるメソッドです。
変数を指定すると、変数に格納された値を表示します。
alertは、jqueryのコードがどこで間違っているのか、意図した結果にならないものの途中の数値は正しく取得できているのか・・・といったことを確認する際にとても便利なので、覚えておいてください。

変数も詳しい話をする長くなるのですが、ここではそこまで解説しません。
変数以外にも最低でも次のことはわかっていた方が、ネットに落ちているjQueryのサンプルコードを拝借するときやプラグインのカスタマイズをする時に楽になります。(リンク先はあくまで参考例なので、もっとわかりやすい説明や、もっと詳しいことを知りたいときはgoogle先生にお願いしてください)

ちなみに蛇足になりますが、クリックしたときにどうする・・・という記述が「イベントによる処理」と書き方が違うとお気づきになったかと思います。
実は、これが「イベントによる処理」の下の方にメモしてある「イベント委譲」の書き方になります。one()は1回だけ実行するときに使います。

    $('.jq').click(function(){
        b = a + b ;
        alert(b);
    });

で良いのでは?といいたくなると思いますが、これだとクリックのたびにaの値が加算されてダイアログが表示されます。
これを回避するためにone()を使っています。


引数と戻り値とreturn

function test(a){
    return a*a;
}

jsでfunctionのあとに関数名(この例では[test])を書くこのようなコードをよく見かけると思いますが、関数とはいくつかの処理をまとめたものです。
関数名を付けておくことで、何度か呼び出して、繰り返し同じ処理をすることができます。
関数名のあとの()内が空の場合と、変数(もしくは実際の値)が入っている場合があると思います。この()内に書く変数(もしくは値)を引数といいます。関数(処理のまとまり)に値を渡して、演算します。
演算して終わりの場合もありますが、この例のようにreturnで値を返すこともあります(この値を戻り値といいます)。ここでの戻り値はa*a(の計算結果)です。
こうすることで、test関数の戻り値をほかの関数で利用したりできるようになります。

return false;

戻り値の中でも、素敵なおまじないreturn falseは覚えておきましょう。jQueryでも困った時のおまじないとして、結構使います。
return falseは何をしているのか?使いどころは?といったことを説明しだすと、嫌になってくるので、割愛します。気になる人は例によってgoogle先生を頼ってください。


コメント

htmlのソースコードで<!-- -->を使って、ソースの覚書を書いたりとかしたことがあると思いますが、jsでもそういうのがあります。
jQueryでも同じ書き方をします。

// 一行コメント

/*
複数行
コメント
*/

その他、参考リンクとか

jsについて詳しく解説すると、とても煩雑になり、かえってわからなくなってしまうと思うので、とりあえずはこの程度にしておきます。
もっと知りたい人は、以下のリンクを参照してください。

知っていた方がお得なことを上の方にいくつかあげましたが、余裕が出てきたら、知らなくてもなんとかなるけど知っておいたら良いのではないかなーというキーワードも以下に挙げておきます。
もっと詳しく理解したい人はとっかかりにしてください(一気に理解しようとすると、頭がこんがらがるので少しずつで良いです)。

また、ネットにはjsの便利な例文・サンプルがたくさん落ちています。説明文を読むよりもそれらを参考に実際に記述→実行してみて、わからないことをgoogle先生に訊くなどした方が、身につくかもしれません。

なお、上のほうにちらっとalertについて、ソースのどこで間違っているのかなどを確認する(デバッグする)のに便利だとご紹介しましたが、ブラウザの開発ツールのコンソールとjsのconsole.logを使ったデバッグ方法もあります。参考ページをいくつかご紹介しておきます。

デバッグ用にjsのソースにalertやconsoleを使った後、そのまま納品してしまうことがあります。alertはページを表示した際や何らかのアクションをしたときに誰もがわかる形で表示されるので、納品前に気づけたり、最悪でも納品先で誰かが発見してくれたりしますが、consoleはだれも気づかないまま放置(同業のユーザーとかに発見されて「あちゃー」って思われる)ってことがあったりなかったりするので、気をつけましょう。「あちゃー」ぐらいで済めばいいですが、コンソールが搭載されていない古いブラウザでエラーになって、動作しなくなるといったこともあります。

戻る

Top