入門編『引数と戻り値』
「これから『引数と戻り値』の話をしよう」
魔導書が言い放った。
「また覚える単語が増えた」
エイダは少しウンザリする。今日だけでも、かなりの事を学んでいる。
「そんなに難しい事でもない。実際の所エイダは関数を使う際、ちゃんと引数を使いこなしている」
<script>
alert("ボクはわるい魔導書じゃないよ");
</script>
魔導書のページに、一番最初の例題が表示される。
「引数は『引き渡す数』と考えるとわかりやすい。alertの関数を呼び出す時、何を引き渡してると思う？」
「文字列の『ボクはわるい魔導書じゃないよ』を引き渡してる？」
「そう。これが『引数』。渡す値を変えるだけで、関数に手を加えずに、警告文の表記を自由に変えられる。これがないと、すごく不便だ」
「ん、わかった。もう一つの『戻り値』は？」
エイダは理解したと頷き、次の単語の説明を促す。
「戻り値の方は、実際に関数を作って見せた方が理解しやすいと思う」
<script>
function odoroku(word){
return word+”ー！！”;
}
</script>
新たな術式がページに書き込まれ、魔導書は説明を続ける。
「これで『odoroku』という関数が宣言された。これは引き渡された値に『ー！！』を追加し、作られた文字列を返してくれる便利な関数だ！」
<script>
function odoroku(word){
return word+"ー！！";
}
alert(odoroku("なんだって"));
</script>
画面に『なんだってー！！』が表示される。
「このように関数が返す値のことを『戻り値』という。先頭の『function』は関数の宣言をし、()に囲まれているのが引数で渡された値で『word』という変数に収納される。{}に囲まれているのが関数の中身。そして最後に「return」文で返される値を定義している。因みに関数は、呼び出しの前でも後ろでも、どこで宣言されても大丈夫だったんだよ！」
<script>
alert(odoroku("なんだって"));
function odoroku(word){
return word+"ー！！";
}
</script>
再度『なんだってー！！』が表示される。
「先生、質問があります」
今まで静かに聞いていたエイダが質問する。
「はい、エイダ君。何でしょう？」
「術式は英語じゃないといけないと思ったのですが、何で『odoroku』って日本語が使われているんですか?『surprise』じゃないといけないと思います」
「いい質問だ。実は変数や関数の名前は術士が好き勝手に付けて良い。だから極端な話、これでも術式は動く」
<script>
alert(驚く("なんだって"));
function 驚く(セリフ){
return セリフ+"ー！！";
}
</script>
「え〜？さすがに変数名や関数名が日本語だと駄目だよ」
魔導書は術式を実行する。3度目の『なんだってー！！』が表示される。しばらく場に沈黙が流れる。
「……魔導書さん、絶対に今ニヤニヤしてるでしょう」
「いや、してないよ」
魔導書は白々しく答えた。
「まぁ日本語で書くと違和感が強すぎて、ちょっと読みにくいとは思う。アルファベットで書くのに慣れ過ぎたかな？」
「私もせっかくお母さんに教えてもらってるから、英語で書く。英語の方が専門家って感じだし」
エイダも別の理由で、英語表記に同意する。
「さて大体の説明も終わったし、エイダの好きな意地悪クイズをまたしよう」
「え〜」
エイダの抗議を無視して、魔導書は続ける。
<script>
alert();
</script>
「これはどうなると思う？」
エイダは人差し指を顎に当て、首を捻って考える。
「引数がないから、何も表示されない？じゃなくて警告文は表示されるけど、中身は空っぽ？」
「その通り」
中身が空白の警告文ダイアログが表示される。
「さて次の問題。これはどうなるでしょう？」
「さっきのが前フリで、絶対これが本命」
エイダは注意深く、表示された問題を読む。
<script>
alert(alert());
</script>
「え〜？」
警戒してたのに、うっかり声が出てしまった。エイダはバツが悪そうに、魔導書にヒントを尋ねる。
「alert関数には戻り値があるの？」
「alert関数には、return文はないと思う」
魔導書の変な言い回しに、エイダの警戒網に何か引っかかった。エイダは質問を変えて聞き返す。
「return文が無い関数の場合、どんな戻り値が返されるの？」
魔導書は観念した様に答える。
「return文が無い関数の場合、未定義値『undefined』という戻り値が返される。」
「そっか。じゃ後は『外側のalert()』か『内側のalert()』のどちらが先かが問題だね」
エイダは今までの例題を思い返す。
「例題のalert(odoroku("なんだって"))の時は、先にodoroku関数で文字列が作られてから、次のalert関数で表示されたんだと思う。だって文字列が作られる前だったら『なんだってー！！』って表示されないはず。ということは関数は『内側』『外側』の順番。ということは、最初は空白の警告文が表示され、次に『undefined』警告文が表示される」
「正解」
魔導書はガッカリした様に答える。空白と『undefined』の警告文ダイアログが次々に表示された。
「ふふん、そう何回も騙されないですよ〜だ」
エイダはご機嫌だ。意地悪なひっかけ問題に引っかからず、魔導書を出し抜いたのだ。
「じゃ、次行こうか……」
魔導書はやる気がなさそうに、次の問題を出す。
<script>
alert(odoroku);
function odoroku(word){
return word+"ー！！";
}
</script>
「あれ、魔導書さん。丸括弧『()』忘れてるし、引数も渡してないよ？」
「あ、本当だ……まぁいいか。これどうなると思う？」
テンション低めに魔導書が答える。エイダも一応警戒し質問する。
「構文が間違えてる場合、どうなるの？」
「構文が間違えている場合、構文エラーが出て怒られる」
「じゃその構文エラーが出る」
「じゃあ実行するよ」
魔導書の少しウキウキした声に、エイダはすぐに不用心だったと後悔した。警告文ダイアログには『odoroku』関数の中身が表示された。
function odoroku(word){
return word+"ー！！";
}
「え〜、何で？」
「残念。前フリは二つで、これが本命だったのだ！迂闊だったな、エイダ」
勝ち誇った様に魔導書は宣言をし、説明を続ける。
「実は関数名を引数として渡した場合、関数そのものを送ったことになる。そしてalertなどで関数を表示する場合、その中身が表示される」
エイダは無言で聞いている。
「『構文が間違ってる』と思ってしまったのが運の尽きだったな。ははは」
「教えてない事で引っ掛けるのは、不公平だと思う。それに関数を渡すとか、ちゃんと説明してくれないとわからないよ」
プィと怒るエイダ。
「ごめん、ちょっと調子に乗りすぎました」
エイダの機嫌を直すのに、魔導書は数十分を要した。
ーーーーーーーー ログ ーーーーーーーーーー
エイダは『引数』を理解した。
エイダは『戻り値』を理解した。
エイダは関数宣言『function』を覚えた。
エイダは『return』文を覚えた。
『関数』スキルがLV2になった。
ーーーーーーーーーーーーーーーーーーーーーー
登場人物
エイダ・ラブレス
冒険者に憧れている９歳の普通の女の子。
魔導書のテンションに、時々ついていけなくなる。
職業：術者 LV1
称号：初心者
スキル：『関数 LV2 up』『構文 LV1』『文字列 LV1』『コメント LV1』『算術演算子 LV1』『文字列演算子 LV1』『変数 LV1』『代入演算子 LV1』
関数：『alert()』
HTMLタグ：『<script>』
喋る魔導書
エイダが森の奥で出会った喋る魔導書。
授業が若干騙し合いになっているが大丈夫？
作者より
後１日頑張れば５日間連続更新。ストックがないと結構きついですね。
「文法」スキルを「構文」スキルに名前を変えました。
参考にしたページ
変数名のつけ方(識別子) 変数名にUnicode文字を使っていい事、今日初めて知りました。
https://www.ajaxtower.jp/js/var/index3.html
関数の定義と呼び出し 関数名は変数名と同じ規則でつけていいそうです。
https://www.ajaxtower.jp/js/function/index2.html
戻り値で関数から値を返す(return文) returnがない場合、undefinedが返される
https://www.ajaxtower.jp/js/function/index4.html
JSfiddleサンプル
なんだってー！！
https://jsfiddle.net/AkiraMeru/r236hu60/
なんだってー！！ 前後入れ替え
https://jsfiddle.net/AkiraMeru/r236hu60/1/
なんだってー！！ 日本語
https://jsfiddle.net/AkiraMeru/r236hu60/2/
意地悪クイズ１
https://jsfiddle.net/AkiraMeru/r236hu60/4/
意地悪クイズ２
https://jsfiddle.net/AkiraMeru/r236hu60/5/
意地悪クイズ３
https://jsfiddle.net/AkiraMeru/r236hu60/3/
