第九回: 関数その3 関数に渡すもの

第九回では、関数にいろいろ渡す事について説明していきます。 JavaScriptの用語ではargumentsの説明となります。

第八回のreturnとはちょうど対照的な話です。 もともと一回だったものを二つに分けたので、こっちは短めです。たまにはいいでしょう。

「渡す」とお嬢様とセバスチャン

今回の内容を第八回で見た「お嬢様とセバスチャン」というたとえで説明すると、 関数に何かを渡すというのは、お嬢様からセバスチャンに「呼びかける時に渡す物」という事になります。

例えば欲しい物のメモとかをお嬢様がさらさら書いて、「セバスチャン、これよろしくね」と渡す感じですね。

それをセバスチャンが受け取って、そこに書いてあることを元にいろいろやる、という事になります。

お嬢様ー＞セバスチャン

という向きを意識するのが大切です。
では具体的に見ていきましょう。

これまでの例から見る「渡す」

渡すというのは、実はこれまでこっそりやっていました。 これまで見てきた、MessageBox.show("むぇーー");やMath.randomInt(5);というのは、 実は第九回のテーマである渡すという事をやっています。

そこで導入として、これまでやってきた渡すというコードについて、該当部分を見てみる事から始めましょう。

文字を渡す、数字を渡す

第七回では、関数を作って使う、という話をしました。 lucy();などのように、()をつけると関数が使える、という話でした。

ですが、第七回でやったlucy();のような関数の呼び方と、MessageBox.show("むぇーー");には、名前の所が長い以外にも違いがあります。

"むぇーー"というのがカッコの中に入ってますね。 これが関数に文字を渡すというコードになります。 お嬢様がMessageBox.showさんに"むぇーー"と書いたメモを渡す感じです。

また、第五回では、Math.randomInt(5);という乱数を作る方法もやりました。 こうすると、0から4までの数字がランダムに得られる、という奴です。

で、このMath.randomInt(5);も実は関数だったのです！
って別に驚かないですか。そうですか(´・ω・｀)

とにかくこれは関数を使っているコードなのですが、やはりカッコの中には5が入ってますね。 つまり(5)となっている。 この(5)も、関数に5を渡している、というコードになります。 この場合はお嬢様がrandomIntさんに5と書いたメモを渡している感じですね。

このように、何かを関数に渡す時は、その関数を使う時に、(と)の間にそれを入れます。

さらに、MessageBox.yesNoは、3つも文字を渡します。 例えば以下のコードは、

MessageBox.yesNo("こちんこちん？", "はい", "いいえ");

以下の3つの文字を渡しています。

1. "こちんこちん？"
2. "はい"
3. "いいえ"

もう一つ例を挙げると以下のコードは

MessageBox.yesNo("ついに念願のアイスソードを手に入れたぞ！",
"そう関係ないね",
"殺してでもうばいとる"
);

以下の3つの文字を渡しています。

1. "ついに念願のアイスソードを手に入れたぞ！"
2. "そう関係ないね"
3. "殺してでもうばいとる"

このように、文字を3つとか渡す時は、,で区切って並べる事で複数の文字を渡す事が出来ます。

このように、「渡す」は既にやっていた

ここまでで、導入として既に見てきたコードを見直す事で渡すという事について、簡単に見てきました。

実は第九回のテーマのうち半分は別に新しくありません。 ただこれまであまりちゃんと説明せずにやっていた事なので、今回はそれをちゃんと説明していこう、という話です。

後半では関数を使う側でそれをどう使うか、という新しい話も出てきますが、 まずは渡すというのをこれまでのコードとしっかり結びつけた上で見ていくと、 整理されて見えてくると思います（だといいな）。

今回の難しい部分も、結局は嬢様とセバスチャン的な考え方がちゃんと出来るか、という問題になります。 そういう点で難しい部分のかなりの部分は第八回でやってしまった事になります。 だから意外とちょろいかも？

という事で以下で個々の解説をしていきましょう。

関数に渡す、受け取る

ここでは、関数に文字などを渡し、関数の側では受け取るという事を話していきます。 お嬢様が渡して、セバスチャンが受け取る訳ですね。

それぞれ関数を使う側と作る側に対応しています。

使う側（お嬢様側）	作る側（セバスチャン側）
（文字や数字を）渡す	（文字や数字を）受け取る

渡す側はここまで見てきた、MessageBox.show("むぇーー");などの事です。 この渡された文字を、関数を作る側ではargumentsという特殊な変数で受け取る、というのが、第九回の全体像となります。

関数に文字や数字を渡す

まずはお嬢様側から。

関数を使う時には、文字や数字を渡す事が出来ます。

まず、関数は、変数名の後に()をつけると使う事が出来る、というのを第七回でやりました。 naku();とかlucy();とかですね。

このカッコの中に渡したい物を入れると、渡す事が出来ます。 例えば、

naku("ほげー");

とか

lucy("こちんこちん");

とかで、文字を渡す事が出来ます。

複数の文字とか数字を渡したい場合は、,で区切ります。

lucy("こちんこちん", 15321, 25);

という感じです(数字に意味は無いです）。

渡された文字や数字を受け取る(arguments)

次にセバスチャン側。

関数を作る時に、使われる時に渡される物をargumentsという変数で受け取る事が出来ます。 argumentsは配列になっています。 1つ目がarguments[0]、2つ目がarguments[1]で取り出せます。 セバスチャン側はお嬢様から渡された物をargumentsという変数で見てみる事が出来る訳です。

やってみましょう。

var awa = function() { MessageBox.show(arguments[0]); }; awa("むぇーー"); 結果:

　
短いですがなかなか複雑なプログラムです。 重要な所を抜き出してみましょう。

var awa = function() {
   MessageBox.show(arguments[0]);
};

関数を作る時には（セバスチャン側）、argumentsという変数で、数字や文字を受け取る事が出来ます。 このarugmentsは配列になっていて、（お嬢様側から）一番目に渡されたものを、arguments[0]で、 二番目に渡された物をarguments[1]で受け取る事が出来ます。

だから上のコードの関数の中身、つまり以下の部分は、

   MessageBox.show(arguments[0]);

1つ目にお嬢様側から渡された物を表示する、という意味となります。

だから、使う時がawa("むぇーー"）;なら"むぇーー"と表示されますし、 awa(5, "コケー");なら5が表示されます。1つ目が表示されるので"コケー"じゃない事に注意です。

やってみましょう。

var awa = function() { MessageBox.show(arguments[0]); }; awa(5, "コケーー"); 結果:

　
なお、渡されてない物を受け取ろうとすると、そんなの無い、とエラーになります。

もうひとつ例を見てみましょう。文字を3つ受け取って、受け取った物を逆の順番に表示する、という関数を作ります。

var gyaku = function() { MessageBox.show(arguments[2]); MessageBox.show(arguments[1]); MessageBox.show(arguments[0]); }; gyaku("こちんこちんに", "冷えた", "麦茶"); 結果:

　
実行してみると、渡した順番と逆の順番で表示されますね。

var gyaku = function() {
   MessageBox.show(arguments[2]);
   MessageBox.show(arguments[1]);
   MessageBox.show(arguments[0]);
};

セバスチャンとしては、お嬢様から渡される物を、2番目、1番目、0番目という逆の順番でshowしている訳です。

そしてお嬢様の側は以下のコードになっています。

gyaku("こちんこちんに", "冷えた", "麦茶");

0番目	"こちんこちんに"
1番目	"冷えた"
2番目	` “麦茶”`

という順番に文字を渡しているので、これを2, 1, 0の順番に表示すると、上のような結果となります。

ま、いろいろやっていくと分かってくる部分もあると思うので、幾つか実際にやってみましょう。

課題：むぇーと表示せよ

渡された"むぇー"を表示してください。 渡されてない物を表示しても正解って出ちゃいますが、ズルしないで！

// TODO: 以下をargumentsを使って書き換えよ var awa = function() { }; awa("むぇー"); 結果:

答え:
var awa = function() {
    MessageBox.show(arguments[0]);
}

　
次はもうちょっと複雑なのをやってみましょう。

課題：こちんこちんに、麦茶、冷えたと受け取る奴

以下の関数を書き換えて、

1. "こちんこちんに"
2. "麦茶"
3. "冷えた"

の順に表示せよ。

ヒント： 上のgyakuと似てる。

// TODO: 以下を書き換えよ var lucy = function() { }; lucy("こちんこちんに", "冷えた", "麦茶"); 結果:

答え:
var lucy = function() {
    MessageBox.show(arguments[0]);
    MessageBox.show(arguments[2]);
    MessageBox.show(arguments[1]);
}

　
もっと難しいのもやってみますか。

課題: ニワトリか餅かに応じて、「むぇー」か「コケー」を表示せよ

今度はランダムで"ニワトリ"か"餅"が渡ってきます。 "ニワトリ"だったら"コケー"と表示し、"餅"だったら"むぇー"と表示してください。

これは第九回の内容どうこうよりも、これまでやってきた所が難しい、という課題ですね。

ヒント

• argumentsを使います
• 関数の中でif文が必要です
• お嬢様側のコードは理解しなくても、何が渡されてくるかだけ気をつければ書けるはずだし、そうやって反対側を考えない方がむしろ良い。（その為、わざとお嬢様側は難しく書いてます）

// TODO; 以下を渡される物に応じて表示を変えよ var awa = function() { } // 以下はいじらないでね。 var labels = ["餅", "ニワトリ"]; awa(labels[Math.randomInt(2)]); 結果:

答え:
var awa = function() {
    if(arguments[0] == "餅") {
        MessageBox.show("むぇー");
    } else {
        MessageBox.show("コケー");
    }
}

　
もしこのままでは分からない場合の追加のヒント。お嬢様側は以下と同じコードになります。

var niwatori = Math.randomInt(2);
if(niwatori == 1) {
   awa("ニワトリ");
} else {
   awa("餅");
}

一見難しいですが、理解しなくてはいけないのは、以下の2つがランダムに呼ばれる、という事だけ！

• awa("ニワトリ");
• awa("餅");

課題：「当たり！」を出せ

次はセバスチャンはこちらで用意したものを使う事にして、お嬢様側を書く、という課題をやってみましょう。

今回はtakarakuji関数のコードを読んで、「当たり！」がでるように渡す物を考えて関数を呼び出します。 複雑に見えるようにしてますが、こけおどしなので騙されてはいけません。

var takarakuji = function() { if(arguments[0] == 1) { MessageBox.show("ハズレ！"); } else if(arguments[0] < 3) { MessageBox.show("ハズレ！"); } else if(arguments[0] == 5132) { MessageBox.show("当たり！"); } else { MessageBox.show("ハズレ！"); } }; // TODO: 以下を書き換えて「当たり！」と表示せよ takarakuji(0); 結果:

答え:
takarakuji(5132);

　
もうひとつお嬢様側を書く課題をやってみましょう。

課題：安心と信頼の雲鯖

プレーヤーに「twitterとmastodon、どっちが安定している？」と質問して、 twitterって答えたら"鳥はオワコン"と表示し、mastodonと答えたら"安心と信頼の雲鯖"と表示するように、 関数kumosabaを呼び出すコードを書いてください。

普通に書くとif文が要ります。（配列を使ってif文無しでも解けます）

// 以下はいじらないでください。 var kumosaba = function() { if(arguments[0] == "雲鯖") { MessageBox.show("安心と信頼の雲鯖"); } else if(arguments[0] == "鳥") { MessageBox.show("鳥はオワコン"); } else { // ここには来ないように！ MessageBox.show("むぇー"); } }; var docchi = MessageBox.yesNo("twitterとmastodon、どっちが安定してる？", "twitter", "mastodon"); // TODO: 以下をdocchiを使って書き直せ。（ヒント：ifが要ります） kumosaba(); 結果:

答え:
if(docchi == 1) {
    kumosaba("鳥");
} else {
    kumosaba("雲鯖");
}

　
arguments自体はどうって事無くても、課題はかなり難しいですね。 課題が解けなくてもその前まで理解出来ていればそんな落ち込まなくてもいいと思います。

まとめ

1. 関数を使う側（お嬢様側）は、文字や数字を渡せる。
2. 関数を作る側（セバスチャン側）は、文字や数字をargumentsという変数で受け取る事が出来る。

ついでに言っておくと、この渡す物をプログラムの用語で引数と呼びます。読み方は「ひきすう」です。 別にこんな言葉は使わなくてもいいですが、よその解説読む時に出てくるかもしれないので、一応触れておきます。