JavaScript 関数の基礎,returnなど　6,7,8日目　2024/10/12～14（お金持ちまでの道のり）

本日はJavaScriptの関数の基礎です。プログラミングの学習を始めてから、初の週末です。しかも３連休。４歳の娘を連れて出かけたり遊んだりかなりの時間が家族サービスになってしまうので今までのような勉強時間が確保できませんが、うまく隙間時間を見つけて頑張ります！ということでこの記事は３日分です。

初めての人はお金持ちまでの道のり：０日目をまず読んでみてください！よろしくお願いします★

JavaScript 関数の基礎
本日の感想

JavaScript 関数の基礎

1. 関数の定義

関数の基本的な構造

function 関数名() {
　// この中に実行したい処理を書きます
}

function：これは、関数を定義するためのキーワードです。
関数名：関数の名前です。好きな名前を付けることができます。後でこの名前を使って関数を呼び出します。
{}：中括弧の中に、関数が呼び出されたときに実行したい処理を書きます。

具体例

function sayHello() {
　console.log("こんにちは！");
}

sayHello という名前の関数を定義しています。この関数が呼び出されると、「こんにちは！」 というメッセージがコンソールに表示されます。

まとめ
・関数の定義は、function キーワードを使って行い、関数名と中括弧 {} で囲まれた処理をセットで書きます。
・関数を呼び出すと、その中に書かれた処理が実行されます。
・関数を使うことで、コードの再利用性が高まり、プログラムが整理しやすくなるため、とても便利です。

2. 関数の呼び出し

定義した関数は、好きなタイミングで呼び出して実行することができます。呼び出すには、関数名の後に () を付けます。

sayHello(); // 関数を呼び出して実行

なぜ関数を使うのか？

関数を使うと、同じ処理を何度でも呼び出せるため、コードを何度も書き直す必要がありません。例えば、何度も挨拶をしたい場合、関数を使わなければ以下のようになります。

console.log("こんにちは！");
console.log("こんにちは！");
console.log("こんにちは！");

関数を使うと以下のようになります。（例：関数を3回呼び出す）

function sayHello() {
console.log("こんにちは！");
}

sayHello(); // 1回目の呼び出し
sayHello(); // 2回目の呼び出し
sayHello(); // 3回目の呼び出し

実行結果：

こんにちは！
こんにちは！
こんにちは！

関数を使うことで、同じ処理を何度でも簡単に実行でき、コードがすっきりします。

条件に応じて関数を呼び出す

関数は、必要なタイミングで呼び出して実行できます。例えば、ユーザーの入力に応じて呼び出すこともできます。

function greetMorning() {
　console.log("おはようございます！");
}

function greetAfternoon() {
　console.log("こんにちは！");
}

function greetEvening() {
　console.log("こんばんは！");
}

let time = "afternoon"; // "morning", "afternoon", "evening" から選択

if (time === "morning") {
　greetMorning(); // 朝の挨拶を呼び出す
} else if (time === "afternoon") {
　greetAfternoon(); // 昼の挨拶を呼び出す
} else {
　greetEvening(); // 夜の挨拶を呼び出す
}

letの復習

・let は、変数を宣言するためのキーワードです。変数とは、値を一時的に保存するための「箱」のようなものです。
・time は、この変数の名前です。ここでは「time」という名前の箱を作っています。
・= は、右側の値を左側の変数に代入するという意味です。つまり、「右の値を左の箱に入れる」というイメージです。
・"morning" は、文字列（一連の文字）です。この場合、「morning」という文字列が変数 time に代入されます。

ifの復習

・変数の値が２種類の時は、ifとelseを使う
・変数の値が３種類の時は、ifとelse ifとelseを使う

まとめ
・関数を呼び出すには、関数名に () を付けて実行します。
・一度定義した関数は何度でも呼び出し可能で、コードを繰り返し実行できます。
・関数を呼び出すタイミングは自由で、プログラムの中で必要に応じて実行できます。

3. 引数とパラメータ

引数とパラメータとは？

パラメータと引数は、関数が動作する際に、関数に渡す情報やデータを扱うための仕組みです。関数をより柔軟に使えるようにするために、データを関数に渡すことができます。
　・パラメータ：関数を定義するときに指定する「変数の受け皿」です。
　・引数：関数を呼び出すときに渡す「実際の値」です。

引数とパラメータを使った関数

関数の定義

function greet(name) { // name がパラメータ
　console.log("こんにちは、" + name + "さん！");
}

name はこの関数のパラメータです。関数の中で「name」という変数の受け皿として使われ、引数として受け取った値がここに入ります。
※関数を定義するときに使う変数のことを「パラメータ」と呼びます。関数の定義内で、どのデータを受け取るかを指定する場所に書かれるものです。
※関数を呼び出すときに渡す具体的な値を「引数」と呼びます。関数が実行されるときに、実際にパラメータに代入されるデータです。

関数の呼び出し

greet("たろう"); // "たろう" が引数
greet("はなこ"); // "はなこ" が引数

"たろう" や "はなこ" が引数です。関数を呼び出すときに実際の値を渡します。関数が呼び出されると、パラメータ name に引数 "たろう" が渡され、メッセージが生成されます。

実行結果

こんにちは、たろうさん！
こんにちは、はなこさん！

引数を使う理由

引数を使うことで、同じ関数に異なるデータを渡して動作させることができます。例えば、複数の名前を挨拶するときに、毎回異なる名前を表示するために、引数を使って処理をカスタマイズできます。

複数の引数を使う関数

2つの引数を使う関数

function introduce(name, age) { // name と age がパラメータ
　console.log(name + "さんは" + age + "歳です。");
}

introduce("たろう", 25); // "たろう" と 25 が引数
introduce("はなこ", 30); // "はなこ" と 30 が引数

実行結果

たろうさんは25歳です。
はなこさんは30歳です。

まとめ
・パラメータ：関数を定義するときに使う「変数の受け皿」。（name と age がパラメータ）
・引数：関数を呼び出すときに渡す「実際の値」。（"たろう" と 25 が引数）
・引数を使うことで、関数を柔軟に使い回すことができ、同じ関数に異なるデータを渡して処理をカスタマイズできます。

4. 返り値（戻り値）

返り値（return）とは？

返り値とは、関数が実行を終えた後に、結果として値を返すことです。関数が計算や処理を行った結果を、他の部分で利用したい場合に使います。return キーワードを使って、関数の処理が終わったときに値を返すことができます。

※「返す」という言葉は、関数が処理を実行した結果を、関数の外に渡すという意味です。関数は独立した処理のブロックであり、通常その中で何らかの計算や処理を行いますが、その結果を関数の外で使いたいときに「返す」必要があります。
※関数の外とは、関数の定義部分以外の場所、つまり関数のブロック {} の外側の部分を指します。
※「戻り値」と「返り値」は、どちらも同じ意味を持っています。どちらを使っても間違いではありませんが、一般的に**「返り値」**の方がよく使われる言葉です。

基本的な構造

function 関数名() {
　// 何らかの処理
　return 値; // 処理の結果を返す
}

・return は「返す」という意味で、関数が処理を終えた後にその結果を返す役割を持ちます。
・return の後に指定した値が、関数の実行結果として呼び出し元に返されます。

●再掲
※「返す」という言葉は、関数が処理を実行した結果を、関数の外に渡すという意味です。関数は独立した処理のブロックであり、通常その中で何らかの計算や処理を行いますが、その結果を関数の外で使いたいときに「返す」必要があります。
※関数の外とは、関数の定義部分以外の場所、つまり関数のブロック {} の外側の部分を指します。