JavaScript・jQueryの関数について

jQuery 最高の教科書を読んで、

javascript・jQueryを改めて勉強・まとめていこうと思いました。

よく使う「関数」についてまとめてみた。

関数とは

「何らかの一連の処理を行う、複数の命令の集まり（命令群）」

関数は、同一コード内は元より、他のコードからも呼び出すことができる。

• 繰り返し実行する処理
• 何度も利用する処理

また、一連の処理をまとめることによって、処理内容を変更する際の手間を大幅に軽減することができる。（保守性）

関数を使用しない場合

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

関数を使用した場合

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

• 処理が複雑になればなるほど、関数を使用するメリットは高くなる
• コード量が軽減できる
• 一連の処理の所在が明らかになる
• 処理内容の修正に対応しやすくなる

引数について

引数をよく理解できてなかったので、調べてみました。

引用元 参考サイト

引数とは何ですか？難しいのでわかりません(>_<)！ Yahoo知恵袋

初歩的な理解のために、次のようなものをイメージしてください。

ここに、「海水を真水に変える装置」があるとします。

この装置に海水を投入すると、真水が得られます。

この装置に投入する海水が引数にあたります。

海水を真水にする装置がプログラムです。

その結果出てきた真水が戻り値です。

• 装置 → プログラム
• 海水 → 引数
• 結果 → 戻り値

関数には引数を渡すことができる

料理をするための材料・もしくは道具みたいな感じだと思いました。

引数とは、関数に与える数値や文字列などの情報となります。

関数の作り方

関数の作り方 構文

function 関数名 (引数1, 引数2...) {
    実行する処理(引数1と引数2は関数内では変数のように利用できる)

    return 値;
}

• 最初に「function」を記述する
• function に続いて任意の関数名を指定する
• 関数名に続いて () を記述し、必要な場合は「,」(カンマ)区切りで引数を指定する
• 引数は複数指定することも、指定を省略することも可能
• () に続いて {} を記述し、その中に「実行する処理」を記述する
• {} 内では、引数は変数と同様に使用できる
• 関数の呼び出し元に何らかの値を返す場合は return 文を記述する
• return 文は省略可能(何も値を返さない場合)

関数の作成例

function add (num1, num2) {
    return num1 + num2;
}

関数の呼び出し方

関数の呼び出し方 構文

関数名( 引数1, 引数2 ...);

使用する関数名の後に()を記述し、その()の中に引数(関数内の処理で使用するデータ)を指定

※関数に引数が指定していない場合は呼び出し時も省略できる

var added1 = add(1, 2);
var added2 = add(6, 7);
var added3 = added1 + added2;

function add(num1, num2){
    return num1 + num2;
}

無名関数

関数名を省略した関数を作成することができる。

このような関数のことを「無名関数」と呼ぶ

function('引数', '引数'){
    実行する処理（引数1と引数2は関数内では変数のように使用できる）

    return 値;
}

jQueryのメソッドの引数に関しては、よく無名関数が使われる

$(function(){
    $('#typo').on('mouseover', function(){
        $('#typo').css('color', '#ebc000');
    });
});

無名関数内では、$('typo').css('color', '#ebc000');という処理が実行されています。

処理を複数の箇所で使い回すためではなく、引数として一連の処理を直接渡す際などにも無名関数を利用できる

無名関数を変数に格納する

無名関数を以下のように変数に格納すると、その変数名を用いて関数を呼び出すことが可能である。

■構文 無名関数を変数に格納する方法

var 変数名 = function( 引数1, 引数2... ) {
    実行する処理(引数1と引数2は関数内では変数のように使用できる)
    return 値;
}

■無名関数の使用例（関数名の指定）

var add = function(num1, num2){
    return num1 + num2;
}
var added1 = add(1,2); //変数added1には「3」が格納される

無名関数名に関数名を割り当てると、通常の関数のように別の箇所から関数を呼び出すことが可能になる。

※通常の関数と名前付き無名関数には「関数を実行できるタイミング」に違いがある

• 通常の場合(functionに続けて関数名を指定した関数)

関数の作成箇所に関わらず、その関数を使用できるスコープ内であれば、どこからでも呼び出すことが可能

• 変数に格納した無名関数の場合

関数の作成箇所よりも下部でないと呼び出すことができない