【CodeLife】多いって！！jQueryのfunctionの使い方まとめ【10日目】

2020 6/06

2020.06.06 2020.06.06

プログラミング学習をはじめて10日目で本格的にjQueryを学習し始めた。jQueryといえばとにかくfunctionが多い（偏見）。コード一行書くごとにfunctionをかいて、しかも先頭に書いたと思ったら、次はカッコの中に出現するからわけが分からなくなる。

ということで今回は今まで僕が学習した中で出てきたfunctionの使い方について復習していこうと思う。

jQueryのfunctionとは

JavaScriptの関数には、名前を付けることも、匿名にすることもできます。任意の関数を変数に割り当てたり、メソッドに渡したりできますが、この方法でメンバー関数を渡すと、別のオブジェクトのコンテキストで（つまり、別の「this」オブジェクトを使用して）関数が呼び出される場合があります。
https://api.jquery.com/Types/#Function

これはjQueryを配布している公式サイトの引用だけど、よくわからない。自分なりに噛み砕くとfunctionは「関数をまとめるもの」、でいいと思う。

引用文の「匿名にする」ていうのは名前を定義しないことで、jQueryにはこの無名関数が大量に出てくる。

jQueryのお決まり文$(function(){…})

functionのいちばん最初の登場がこのときだ。$(function(){…})はjQueryにおけるお約束分で、なにか処理を書くときは必ずこの中に書いていく。

$(function(){…})の役目は、「htmlが全て読み込まれてからこの処理を行うよ」という予約システムみたいな機能で、これがあることでhtmlが読み込まれる前にjQueryの処理が行われることを防いでいるんだ。

ちなみにhtmlが読み込まれる前にjQueryの処理が行われると、処理の対象だったidとかも当然なにもないから何も起こらないか変な挙動になる。

$(function(){…})の他には、

$(document).ready(function{
 //処理
});

jQuery(document).ready(function(){
 //処理
});

jQuery(function(){
 //処理
});

なども全部同じ意味合いだ。

jQueryの引数にfunction(){…}が紛れ込んでいる

これは冒頭でもちらっと言ったんだけど、こんな感じのやつだ。

$(function(){
    $('#toggle').on('click', function() {
        $('#target').toggle("slow");
        $('#target').css("background","red");
    });
});

あれ？なんでfunctionが引数（＝onの次のカッコの中にあるやつ）になってんの？っていう。

このプログラムのclickは第一引数でfunctionは第二引数何だけど、この2つは同時にonにたいして処理内容を渡しているという意味になるんだ。

そもそもfunctionは関数として出てきたんだけど、こういう場合には、click以下の処理を引数として渡すという役割がある。

ここで引数という言葉が出てきてるんだけど、引数の意味についての例えがあるからここにのせておきたい。

初歩的な理解のために、次のようなものをイメージしてください。
ここに、「海水を真水に変える装置」があるとします。
この装置に海水を投入すると、真水が得られます。
この装置に投入する海水が引数にあたります。
海水を真水にする装置がプログラムです。
その結果出てきた真水が戻り値です。
この装置に投入する海水が引数にあたります。
引用：引数とは何ですか？難しいのでわかりません(>_<)！

で、今回の場合で考えると、functionという海水を、$(‘#toggle’).onという装置に入れた結果、帰ってくるのが反応なんだけど、そのfunction自体も関数（装置）になっていて、結果真水に当たるものは、functionの真水と同じになる。

例えを使ったはいいものの、それによって余計わかりづらくなるいい例。

jQueryの関数宣言function sample() {…}

これは関数の定義だ。例えばこんなプログラムがあるとする。

$(function(){
    $('#typo')
        .on('mouseover', function(){
            // 処理A
            // 処理B
            // 処理C
        });
    $('header')
        .on('mouseover', function(){
            // 処理A
            // 処理B
            // 処理C
        });
    $('footer')
        .on('mouseover', function(){
            // 処理A
            // 処理B
            // 処理C
        });
});

この場合、function(){ //処理A; //処理B; //処理C; };　を毎回書いているより、一つにまとめてしまったほうが効率がいい。

このときにjQueryの関数宣言が役立つ。処理A,B,C を sampleABC という名前でひとくくりにして、上でfunctionと3回書いたところを、sampleABC に置き換えることができる。

$(function(){
    $('#typo')
        .on('mouseover', sampleABC);
    $('header')
        .on('mouseover', sampleABC);
    $('footer')
        .on('mouseover', sampleABC);
    function sampleABC () {
        // 処理A
        // 処理B
        // 処理C
    }
});

いきなりコードでこれが出てくるとビビるけど、早めに慣れておくと使い勝手が良さそう。

ここまでの内容で応用

で、これは応用になるんだけど、もし「jQueryの引数にfunction(){…}が紛れ込んでいる」のところで紹介したプログラムを関数宣言を使って書こうとするとどうなるか….

答えは下記。

$(function(){
    $('#toggle').on('click', toggle);

    function toggle() {
        $('#target').toggle("slow");
        $('#target').css("background","red");
    }
});

toggleという任意の名前にファンクションで関数を割り当て、それがonの第二引数担っているという構造で、代入していけば上のプログラムと変わらない。

toggleという関数をどのくらい使いたいのかで書き方が変わってくる。