関数とは?

---

関数とは 「何度も使う処理をまとめておいたもの」です。
プログラムを書いていると、全く同じ処理が何度か必要になる事がよくあります。

例えば、以下のような処理があったとします。

【サンプル１】

console.log('おはよう');
console.log('こんにちは');
console.log('こんばんは');
console.log('日本語は時間帯によって挨拶が変わります');
console.log('ひらがな');
console.log('カタカナ');
console.log('漢字');
console.log('３種類も文字があります');

この8行のかたまりをプログラムの中で何度か使用したかったとします。
そんな時に、この8行のコードを毎回書くというのもあまりスマートではありませんよね。

そこで、
①この処理に「 japanese 」という関数名をつけたとします。
②すると、あとは japanese(); と1行書くだけで、上のコードを書いたのと同じ効力を発揮します。

関数にする方法は、 function + 関数名() {} という形を作ります。
あとはそのまま処理を {} の中に入れるだけです。
それでは、実際に【サンプル１】を関数化してみましょう。

【サンプル１：関数化】

//関数を定義
function japanese() {
    console.log('おはよう');
    console.log('こんにちは');
    console.log('こんばんは');
    console.log('日本語は時間帯によって挨拶が変わります');
    console.log('ひらがな');
    console.log('カタカナ');
    console.log('漢字');
    console.log('３種類も文字があります');
}
//関数を呼び出す
japanese();

試しに japanese();をもう1行追加してみます。
「 おはよう 」から「 ３種類も文字があります 」のまとまりが2つ分、つまり16行がコンソールに出力されるはずです。

引数、戻り値returnについて（もう一度関数のおさらい）

---

ここでは、関数を『ジュースを作る工場』に例えてみます。
注文を受けたらジュースを作成して、発送するというジュース工場があったとします。

このジュース工場を関数の形で書いてみると次のような形になります。

function ジュース工場() {
    ジュースを作る処理
    注文した所へ発送する処理
}

工場は注文を受けないとジュースを作り始めないのと同じように、関数も作っただけでは動作しません。
工場に動いてもらうためには注文をする。
関数に動いてもらうには 「関数を呼び出す」 必要があります。

例えば、上のジュース工場の関数を実行するには、ジュース工場() ; の形で呼び出せますね。

引数

---

ではここで、いろいろな種類のジュースを作りたいという場合を考えてみます。
みかんジュース、りんごジュース、ぶどうジュースなど…。

果物の種類ごとに工場（関数）を増やしていくのはかなり無駄がありそうです。
そこで、注文を受けた時に工場（関数）に「果物を受け取れる仕組み」があれば、それを材料にしていろいろな種類のジュースを作成することが出来るようになるはずです。

具体的には、次の準備が必要になります。

【注文する側】
ジュース工場();の形でジュースを注文する時に () の中に使用してほしい果物名を入れる。

【工場（関数）側】
指定された果物を function ジュース工場() {} の () の中で受け取れる準備をしておく。

//【工場（関数）】
function ジュース工場(果物) {
    ジュースを作る処理
    注文した所へ発送する処理
}

このように工場（関数）を作っておくと、注文する（関数を実行）時に、
ジュース工場('みかん'); とすることで、みかんを工場（関数）に渡して処理に使ってくれるようになります。
　

【注意点】
注文する側は、どんな果物名を入れてもOKです。
しかし、工場（関数）側の () の中には 「みかん」や「ぶどう」など特定の果物名を指定しないようにしましょう。
（※エラーになって動かなくなるというわけではありません）
工場（関数）側は果物全般なんでも受け取りますよという意味で「果物」という名前にしておいた方がいいからです。

//【注文する側（関数実行）】
ジュース工場('みかん'); //みかんジュースができる
ジュース工場('りんご'); //りんごジュースができる
ジュース工場('ぶどう'); //ぶどうジュースができる

戻り値return

---

ここまでで、果物を持っていくと、そのジュースを作ってくれるという工場（関数）が完成しました。
あとは、完成したものを注文者の元に届けることができれば完了です。
return という記述で、結果を返すことができます。

何をreturnしたいのかというと、「作成したジュース」です。
いつreturnしたいのかというと、「ジュースを作成し終わった時」です。

以上をふまえて関数を書くと、

ジュース工場(果物) {
    //指定の果物でジュースを作る処理

    return ジュース;
}

工場（関数）側が、returnで「完成したものは返します」と言っているので注文した側はそれを受け取る準備をしておかなければいけません。

では、受け取る手順です。
ジュース工場('みかん'); で、関数を実行すると、returnで完成した「みかんジュース」が返ってくるので、それを受け取って変数に入れてあげます。

//返ってきたそれぞれのジュースを変数に入れる
let orangeJuice = ジュース工場('みかん');
let appleJuice = ジュース工場('りんご');
let grapeJuice = ジュース工場('ぶどう');

これで、一つの工場（関数）でいろいろな種類のジュースを作成することができるようになりました。

【ポイント】
関数を作成する時に、必ずしも「仮引数」「戻り値return」が必要というわけではありません。
一番上に書いた japanese() という関数は引数も戻り値もありませんでしたね。

仮引数は 「この値を処理に使ってくれ！」 というものがあれば、それを受け取るために準備しておきます。
returnは処理の結果を関数の呼び出し元で使いたい時に使用してください。

工場の例だと、どんな果物名が来ても受け取ってジュースを作りたいので、それを受け取るために仮引数（果物）を用意しました。
そして、作成したジュースを注文者（呼び出し元で）に自由に使ってもらいたいからreturnで返しました。

課題

---

理解度チェック
JavaScript→1-5というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。

問1：
今まで日本語で書いてきた「ジュース工場」をしっかりとJavaScriptで書いてみます。
以下の要件を満たすように、果物名を受け取ってジュースを作る「ジュース工場」関数を作成してください。

【要件】
関数名：createJuice
仮引数名：fruits
処理：
・「〇〇を受け取りました。ジュースにして返します」と出力
・受け取った果物に「ジュース」という文字列を結合する
・結合した結果を呼び出し元に返す
・呼び出し元で、返ってきたジュースを適当な変数に入れて、「〇〇ジュースが届きました」と出力する

//①関数名を適切なものに変えてください
//②仮引数を適切なものに変えてください
function ジュース工場(果物) {
    //③「〇〇を受け取りました。ジュースにして返します」と出力

    //④受け取った果物にジュースという文字列を結合して、呼び出し元に返す
    
}
//⑤関数の実行：「みかん」を渡して、結果を受け取れるように適当な変数（orangeJuice）を用意
//⑥返ってきた変数を利用して「〇〇が届きました」と出力する