ここでは、初心者から実践的に学べるプログラミングスクール「ウェブカツ!!」のJavaScript・jQuery部入門を受講している生徒の方向けに、さらに「関数」についての理解度を上げるため特訓をしていきます。
出題の回答は全て「JavaScript言語」を使って回答してください。
回答のJavaScript言語は「ES5」で答えてください。
（ES5がよく分からない人は「JavaScript・jQuery部入門どおりの書き方」ってことです。）
開発環境はMacとGoogleChromeブラウザを使います。
Windowsの人もGoogleChromeブラウザを使いましょう。
まだ見てない人は先に下記を見ておきましょう。
目次
鬼練１：関数くんに仕事をお願いしよう！
では、関数くんに計算の仕事を頼みましょう。
仕様書
下記要件に従ってプログラムを組んでみてください。
「myFunc」という名前の関数くんを雇ってください。
関数くんには下記の仕事をしてもらいましょう。
・49800と5260と32839を足して、消費税8%を掛ける
・変数numにその結果を入れておく
・ console.log()を使って、変数numの中身を表示する
※開発ツール内の文字は見やすいようにデフォルトより文字サイズを大きくしています（開発ツールを開いたら、commandと＋記号で文字を拡大できます）
※コンソールの１行ごとの右側に表示されている「index.html?〜〜〜」みたいなのはそれぞれの開発環境によって異なるので無視してください
ヒント
JavaScript（以下、jsと略します）で開発ツールのコンソールに文字を表示させるには
|
1 |
console.log(カッコの中に変数や文字列を入れるとコンソールに表示されますよ〜〜〜); |
を使います。
答え
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>関数鬼練</title> </head> <body> <script> // 関数くんに仕事をお願いしよう！ // ①関数くんにやってもらう指示を伝える // 「君のやるべき仕事はこれだ！」 function myFunc() { // ③ 計算をして、その結果内容を書類箱のnumを用意して一旦そこに入れておいて var num = (49800 + 5260 + 32839) * 1.08; // ④ 同じ部屋にいる事務員のconsoleさんに書類箱のnumを渡して記録してもらう console.log(num); } // ②「よし、じゃあやってくれ！報告はいらないから！」 myFunc(); </script> </body> </html> |
jsの特訓なのでhtmlはなんでもいいです。jsのコメントは解説のために入れてあるだけですので気にせずに。
ちなみにJavaScriptを「Java」とは絶対に略さないようにしましょう。Java言語という他のメジャーなプログラミング言語のことを指してしまいます。
（初心者はやりがちなので、その時点で「あ、初心者だな」ってわかっちゃいます）
必ず略すなら「js（じぇーえす）」と略しましょう。昔は「じぇーえす」と略さずに「じゃばすく」と略してました。
「じゃばくす」と略す人は結構業界の年代が上の人（昔の人）だというのが略し方で分かってしまうんです。
ちなみに「js」も大文字の「JS」よりも小文字の方が、こなれた出来るエンジニア感が出ます。
「JAVASCRIPT」と書くのもやめましょう。現役エンジニアからするととても気持ち悪く感じてしまうんです。
「javascript」もしくは「JavaScript」です。
まぁ、そういう業界小ネタはここまでにして話を戻すと
ここではbodyタグ内にscriptタグを入れて、その中にjsを直で書いていっていますね。
入門編の部活の練習でやりましたね？いくつかのjsの書く場所があったの覚えてますか？
- headタグ内にscriptタグで囲って書く
- bodyタグ内にscriptタグで囲って書く
- headかbodyタグ内にscriptタグで別で書いて作ったjsファイルを読み込む
でしたね。
その中の２つ目の書き方ですね。
実際こんな書き方したら、現場では「低レベル」「初心者丸出し」判定くらうので注意しましょう。
見やすさ・保守性のためにも「jsは別ファイルで書いて読み込む」のが定石です。（とは言っても、古いシステムをずっと運用している現場に行くといまだにhtmlファイル内にjsが直接ベタ書きされていますが）
今後の鬼練の答えは全てこのscriptタグ内だけを記載していきます。
処理の流れはjsのコメントに書いてある通りの順番で進んでいきます。
あとは書いてあるまんま。ですね。
社長が従業員の関数くんに仕事内容を決め、「仕事しろ！」と言っただけですね。
仕事した結果の報告はこの場合求めていません。
「仕事してくれりゃいいから、勝手にやっといて〜」
みたいな感じですね。
ちなみに
|
1 |
var num = (49800 + 5260 + 32839) * 1.08; |
の部分はカッコを外してしまうと
|
1 |
32839 * 1.08 |
が先に計算され、そのあとに
|
1 |
49800 + 5260 |
とを足し合わせていくことになります。
計算式では掛け算、割り算が優先されるので注意しましょう。
「同じ部屋にいる〜」というワードはそのうち大事になってきます。
入門でやる「変数のスコープ」というものが会社に例えるなら「同じ部屋」ということになります。
（もし、わからなければ今の時点では「ふーん」でいいです。）
はい。まずは初歩の初歩でした。
鬼練２：関数くんに仕事をお願いしよう！part2
では、また関数くんに計算の仕事を頼みましょう。
ほとんど同じなんですが「びみょーに」ちがいます。
仕様書
下記要件に従ってプログラムを組んでみてください。
「myFunc」という名前の関数くんを雇ってください。
関数くんには下記の仕事をしてもらいましょう。
・49800と5260と32839を足して、消費税8%を掛けたものをconsole.log()を使って、変数numの中身を表示する
ヒント
ビミョーに違いますよね？
前回のって、変数numに一旦入れずに直接console.logで表示出来ませんか？
答え
|
1 2 3 4 5 6 7 8 9 10 |
// 関数くんに仕事をお願いしよう！part2 // ①関数くんにやってもらう指示を伝える // 「君のやるべき仕事はこれだ！」 function myFunc() { // ③ 同じ部屋にいる事務員のconsoleさんに仕事結果を口頭で伝え、事務員は記録をする console.log((49800 + 5260 + 32839) * 1.08); } // ②「よし、じゃあやってくれ！報告はいらないから！」 myFunc(); |
こう出来ますよね。
|
1 2 |
// ③ 同じ部屋にいる事務員のconsoleさんに仕事結果を口頭で伝え、事務員は記録をする console.log((49800 + 5260 + 32839) * 1.08); |
一旦資料箱に入れた上で事務員に渡して計算結果を伝えるのか、
直接口頭で伝えてしまうのか。
この違いだけです。
口頭なので、もちろん一回こっきりです。
変数に入れておけば、他で使いたい時に使えるメリットはありますが、
そもそも一回しか使わない計算結果なのであれば、直接口頭で伝えちゃた方が実際の仕事現場でイメージしてみても早いですよね。
console.logというの「ログ（履歴）をコンソール画面に表示する」というものなので、
実際のお仕事で例えるなら「ホワイトボードとかに記録する」みたいな感じでしょうか？（わからんけど）
鬼練３：関数くんに報告をしてもらおう！
では、また関数くんに計算の仕事を頼みましょう。
ただし今度はちゃんと「報告」をしてもらいましょう。報連相は実際のエンジニアでも大事です。
（とはいえ、出来てないエンジニアは結構多いので、ここをちゃんとやるだけでも実際の現場ではありがたがられるという謎の業界です）
仕様書
下記要件に従ってプログラムを組んでみてください。
「myFunc」という名前の関数くんを雇ってください。
関数くんには下記の仕事をしてもらいましょう。
・49800と5260と32839を足して、消費税8%を掛けたものを報告してもらう
その結果報告を受けて、社長は変数の箱numに入れる。
console.logで箱numを表示する
コンソールの結果は同じなので省略します。
答え
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 関数くんに報告をしてもらおう！ // ①関数くんにやってもらう指示を伝える function myFunc(){ // ④仕事をし、依頼された社長に報告する return (49800 + 5260 + 32839) * 1.08; } // ②「よし、じゃあやってくれ！報告はちゃんとしてくれよ！」 // ③関数くんから報告してもらった内容をパブリックスペースにある書類箱numに入れてもらう var num = myFunc(); // ⑤パブリックスペースにいる社長秘書のconsoleさんにパブリックスペースにある箱numを渡して記録してもらう console.log(num); |
関数くんに結果を報告してもらうには
「return」
を使うんでしたね。「return文」ってやつです。
あとはコメントの流れで処理が進むだけです。
コメントにある「パブリックスペース」というのはこれまた「スコープ」の範囲のことなんですが、
今の時点で分からなければ気にしなくて問題ないです。
ちなみに関数の中の（関数くんと一緒の部屋で仕事をしていた）consoleさんと
関数の外のパブリックスペースにいるconsoleさんを便宜上別の人にしてますが同じもんです。
鬼練４：関数くんに報告をしてもらおう！part2
では、また関数くんに計算の仕事を頼みましょう。
ただし今度はちゃんと「報告」をしてもらいましょう。報連相は実際のエンジニアでも大事です。
（とはいえ、出来てないエンジニアは結構多いので、ここをちゃんとやるだけでも実際の現場ではありがたがられるという謎の業界です）
仕様書
下記要件に従ってプログラムを組んでみてください。
「myFunc」という名前の関数くんを雇ってください。
関数くんには下記の仕事をしてもらいましょう。
・49800と5260と32839を足して、消費税8%を掛けたものを報告してもらう
パブリックスペースにいる社長秘書のconsoleさんから関数くんへ仕事を依頼し、報告された内容を記録する
コンソールの結果は同じなので省略します。
答え
|
1 2 3 4 5 6 7 8 9 10 |
// ①関数くんにやってもらう指示を伝える function myFunc(){ // ④仕事をし、報告する return (49800 + 5260 + 32839) * 1.08 } // ②「報告は直接社長秘書に伝えてくれ！指示は秘書がだす！」 // ③「関数くん仕事お願い！」 // ⑤関数くんから報告してもらった内容をパブリックスペースにいる社長秘書のconsoleさんが記録する console.log(myFunc()); |
答えはこうなります。
鬼練２のように省略できるものを省略した書き方です。
前回はパブリックスペースに書類箱numを用意して、一旦関数くんの報告内容を保存しました。（たぶん、関数くんは報告書持ってきたんでしょうね）
でも、結局consoleさんが記録するんであれば、
consoleさんに直接言っちゃえばよくない？？（よくなくない？？）
ってことです。
なので、
|
1 |
console.log(myFunc()); |
と書くことで、
consoleさんがまず仕事（記録係）をしようとしたところ、
その時に関数くんからの仕事の報告を元に記録する必要があるため、
関数くんに仕事を依頼し、
関数くんからの報告を元に記録をした。
という処理の流れになるわけです。
こうすれば、社長もいちいち書類箱買って用意しとかなくて済みますよね。
備品は無駄に買わない。
経費の無駄遣いはしない。
実際の会社でも同じですよね。
鬼練５：関数くんにお給料を渡そう！
今度は、関数くんにお給料をあげましょう。
仕様書
下記要件に従ってプログラムを組んでみてください。
「myFunc」という名前の関数くんを雇う。
パブリックスペースにアタッシュケース「変数atash_case」を用意し、3億円（数値で300000000）を入れておく
関数くんにアタッシュケースの3億円を渡す。
関数くんは3億円を自分のアタッシュケース「atash_case」で受け取り、そこから月給の1円をもらい(数値で1を引く）、残りを返す
社長は受け取った残りをアタッシュケースに戻す
パブリックスペースにいる社長秘書のconsoleさんがパブリックスペースにあるアタッシュケースの中身を記録する
コンソールはもう関係なくなってきちゃったんで結果画面は省きます。
答え
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 関数くんにお給料を渡そう！ // ①パブリックスペースにアタッシュケースを用意し、3億円を入れておく var atash_case = 300000000; // ②関数くんにやってもらう指示を伝える function myFunc(atash_case){ // ④関数くんは自らのアタッシュケースで3億円を受け取り、そこから月給の1円をもらう return atash_case - 1; } // ③「よし、じゃあアタッシュケースの中にある3億を渡すからそっからもらっていいぞ！残りはアタッシュケースに入れるから！」 // ⑤関数くんから報告してもらった内容をパブリックスペースにあるアタッシュケースに社長が入れる atash_case = myFunc(atash_case); // ⑥パブリックスペースにいる社長秘書のconsoleさんがパブリックスペースにあるアタッシュケースの中身を記録する console.log(atash_case); |
出来ましたか？
今回は初めて「引数」と呼ばれる関数の機能を使いました。
引数は
|
1 2 3 4 |
function myFunc(適当な引数名){ } myFunc(渡したいデータや変数名); |
という感じで使えるんでしたね。
今回
|
1 |
var atash_case = 300000000; |
|
1 2 3 4 |
function myFunc(atash_case){ // ④関数くんは自らのアタッシュケースで3億円を受け取り、そこから月給の1円をもらう return atash_case - 1; } |
というパブリックスペースにあるアタッシュケースと
関数くんの部屋にあるアタッシュケースの２種類が存在しています。
同じ変数名でも部屋が違うので「別物」なわけですね。
関数の中の変数のことを
「ローカル変数」
と呼びます。
ローカル変数は、関数の中だけ（部屋の中だけ）でしかつかえないものです。
なので、
|
1 |
atash_case = myFunc(atash_case); |
というのは、パブリックスペースにあるアタッシュケースを関数くんに渡したように見えますが、
アタッシュケースごと渡した。のではなく、
アタッシュケースの中身を渡した。
わけです。
そして、関数くんは「自分のアタッシュケース」にその３億円を移した。
というわけですね。
そして、給料引いた金額を社長に渡し、社長をまたパブリックスペースにあるアタッシュケースに入れた。
という流れです。
（「社長が入れた」というのはあくまでイメージです。
関数くんが直接パブリックスペースのアタッシュケースに入れた。とも言えなくもないのでここらへんはあくまでイメージ上だと思ってください）
ちなみに
月給が１円って労働基準法違反です。
（でも、業務委託契約としちゃえば月１円でもいいんだけどね。コワイね）
鬼練６：消えた3億円事件
関数くんがやらかしましたわ。。。
あいつ、やらかしましたわ。。。
仕様書
下記要件に従ってプログラムを組んでみてください。
「myFunc」という名前の関数くんを雇う。
パブリックスペースにアタッシュケース「変数atash_case」を用意し、3億円（数値で300000000）を入れておく
関数くんにアタッシュケースの3億円を渡す。
関数くんは3億円を自分のアタッシュケース「atash_case」で受け取り、そこから月給の1円をもらい(数値で1を引く）、が、返し忘れる
社長は受け取ったお金をアタッシュケースに戻す
パブリックスペースにいる社長秘書のconsoleさんがパブリックスペースにあるアタッシュケースの中身を記録する
答え
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 消えた3億円事件 // ①パブリックスペースにアタッシュケースを用意し、3億円を入れておく var atash_case = 300000000; // ②関数くんにやってもらう指示を伝える function myFunc(atash_case){ // ④関数くんは自らのアタッシュケースで3億円を受け取り、そこから月給の1円をもらう（だが、返し忘れてしまう、、、） atash_case - 1; } // ③「よし、じゃあアタッシュケースの中にある3億を渡すからそっからもらっていいぞ！残りはアタッシュケースに入れるから！」 // ⑤関数くんから報告してもらった内容をオープンスペースにあるアタッシュケースに社長が入れておく atash_case = myFunc(atash_case); // ⑥オープンスペースにいる社長秘書のconsoleさんが社長のアタッシュケースの中身を記録しようとするが、、、 // 「社長、、、お金が、、、、ありません。。。」 console.log(atash_case); |
出来ましたか？
これをコンソールに表示すると
undefined
と出てきます。
undefinedは「値がないよ。空だよ」という意味です。
要は「金がなくなった」ということです。
消えた３億。
どこいったんでしょう。
その原因は、
関数くんの返し忘れ
ですね。
returnつけ忘れ。
です。
「いや、社長受け取る時点で気づくだろ。」って話しなんですがまぁ、大目にみましょう。
（たぶん社長は受け取る時に気づいていたんでしょう。
社長：「え、、、まじで、、、、え、、、？」
って言いながら、そっと入れるはずだったアタッシュケースを閉めたんだと思います。社長の口は閉まりませんが。）
話を戻して、実際に報告をし忘れると下記の時点でmyfuncを実行しても結果が何も返って来ません。
|
1 |
atash_case = myFunc(atash_case); |
atash_caseに入れる時にはundefinedという「空ですよ」と示す値が入っちゃうわけなんです。
じゃあ、返し忘れたからまた返せばいいよね！
なんて言っても、もう時すでに遅し。
myFuncの実行が終わった（仕事が終わった）時点で、その中のデータは全部削除されます。
なので、
３億円が消えた
ってことなんです。
消えたものはもう戻ってはきません。
関数くんがやらかしましたわ。
あいつ、やらかしましたわ。。。
（え？社長の指示ミスじゃないかって？）
