JavaScript 入門 基礎編 09 – 関数を使ってみよう(function)

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

関数についてです.

DEMO

今回制作するデモはこちら.

VIDEO

チュートリアルムービー

CODE

<pre>
<script>

/**
 * JavaScript Tutorial - function
 */

/**
 * ご挨拶
 */
function writeHelloWorld()
{
    document.write("Hello, world!\n");
}
writeHelloWorld();
writeHelloWorld();
writeHelloWorld();


/**
 * パラグラフ表示
 */
function writeParagraph(msg)
{
    document.write("<p>" + msg + "</p>");
}
writeParagraph("JavaScript が好きです.");
writeParagraph("でもゾウさんのほうがもっと好きです.");


/**
 * 合計を計算
 */
function calcSum()
{
    var sum = 0;
    // 引数は arguments という配列にすべて入っています(正確には配列ではありませんが...)
    for (var i=0, len=arguments.length; i<len; ++i) {
        sum += arguments&#91;i&#93;;
    }
    
    return sum;
}
document.write("合計 : " + calcSum(2, 4, 8, 16, 32));
document.write('\n');


/**
 * 平均値を計算
 */
function calcAverage()
{
    return calcSum.apply(null, arguments) / arguments.length;
}
document.write("平均 : " + calcAverage(2, 4, 8, 16, 32));
document.write('\n');


</script>
</pre>

TIPS

関数

関数とは複数の処理をまとめたもののことです. 繰り返し呼ぶような処理をひとまとめに(関数化)することで開発の効率が爆発的に上がります.

関数は

function hoge() { ... }

もしくは

var hoge = function() { ... };

という形で定義できます(個人的には後者が好き)

また, JavaScript での関数は CやC++, Java といったメジャーな言語とはちょっと扱いが違います. なんと, こいつもオブジェクトだったりするのです!! なので上記の hoge に hoge.name = "foo"; 的なことができちゃったりします.

これを第一級関数といい, 私が JavaScript や Python が大好きな理由のひとつだったりします.

この仕組みにより, 処理の塊を簡単に変数として渡せるので自由度の高いプログラミングが可能になります.

引数(arguments)

関数を実行すると必ず arguments という変数が存在します. この中には引数として渡した変数が配列(っぽく)入っており, これを使うことで引数を可変とすることができます.

apply/call メソッド

ちょっと難しい関数ですが, 便利なので今回のサンプルに入れてみました. apply は Function のメソッドで, 引数を2つ受け取ります.

一つ目が this として扱うオブジェクト(今回は気にしないでください. null で大丈夫です), 2つ目が引数の配列です.

これを使うことで可変の引数を受け取る関数に渡された引数をそのまま他の関数に渡すことができます.

だいぶ色々と端折っちゃいましたが JavaScript 入門 基礎はこの辺にしておきます. なんとなく使い方を覚えてしまえばあとは慣れだったりするので, ざっくりと理解していただければ幸いです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT