JavaScript初心者向けに、当記事では、JavaScript関数の基本的な概念や書き方について丁寧に解説します。
関数の使い方や定義方法を理解することで、より効果的なコードの記述が可能になります。
プログラミングにおいて基本的で重要な概念であるJavaScript関数について、
簡潔かつ理解しやすい形で解説してますので最後まで見てってください！
新人：グラミちゃん今日はJavascript 関数と書き方も含めて教えてくれるんでしょうか？
エンジニア：プロくんもちろんだよ、グラミちゃん！関数はJavascriptでとても重要な概念だからね。まずは簡単に説明しよう！
JavaScript 関数とは？
新人：グラミちゃんえっと、まずJavascriptの関数って何なんですか？
エンジニア：プロくん関数は、複数の処理をまとめて1つのブロックにまとめたものだよ。
プログラムの中で同じ処理を何度も繰り返さなくても、関数を使うことで便利になるんだ。
関数は、特定のタスクや計算を行うコードの塊で、
それに名前を付けて再利用できるようにしたものだよ。
例えば、計算機プログラムで足し算をする関数を作ったら、
いちいち足し算のコードを書かなくてもその関数を呼び出すことで、
簡単に足し算ができるんだ。
Javascriptの関数の書き方（基本構文）
新人：グラミちゃんじゃあ、関数ってどうやって書くんですか？
エンジニア：プロくん基本的な構文はこんな感じだよ。
function 関数名(引数1, 引数2, ...) {
// 処理を書く
return 結果;
}Javascript 関数の引数とは
エンジニア：プロくん関数名は自分で好きな名前をつけることができて、
引数は関数に渡す情報のことだよ。
そして、処理が終わったら return で結果を返すことができるんだ。
関数の引数は、関数が実行されるときに渡される値で、それを使って関数内で特定の処理を行うことができるんだ。
例えば、足し算の関数なら、引数に渡された2つの数を足して結果を返すような処理が考えられるね。
新人：グラミちゃんどうやって作るの？
エンジニア：プロくん簡単だよ。こんな感じの書き方だよ。
function 足し算する関数(数1, 数2) {
let 結果 = 数1 + 数2;
return 結果;
}これで、「足し算する関数」という箱（関数）ができたんだ。
この箱（関数）に数を渡すと、足し算してくれて、結果を返してくれるんだ。
Javascriptの関数の呼び出し
新人：グラミちゃんそれじゃあ、Javascriptの関数ってどうやって使うんですか？
エンジニア：プロくん簡単だよ。関数を呼び出すと、中に書いた処理が実行されるんだ。
こんな感じだよ。
let 結果 = 関数名(引数1, 引数2, ...);関数を呼び出すことで、その関数内の処理が実行され、結果が 結果 という変数に格納されるんだ。これで、関数を利用して特定の処理を何度も行うことができるようになるんだ。
例えばこんな感じだよ
let 結果1 = 足し算する関数(5, 3);
let 結果2 = 足し算する関数(10, 7);
console.log(結果1); // 8
console.log(結果2); // 17関数を呼び出すと、箱の中の処理が実行されるんだ。
結果が出てきて、それを変数に入れて表示できるんだよ。
Javascriptで関数を使うのはなぜ？
新人：グラミちゃんなるほど、でもなぜJavascriptでは、関数を使うんですか？
エンジニア：プロくん関数を使うことで、コードが整理されて可読性が上がるんだ。
同じ処理を何度も書かなくて済むし、修正も楽になるんだよ。
例えば、あるプログラムで同じ計算を何度も行う必要があるとしよう。
関数を使えば、その計算処理を一度関数にまとめておけば、
どこからでもその関数を呼び出して使うことができるんだ。
もし何か変更があれば、関数の中身だけを修正すれば良いから、コード全体を修正する必要がなくなるんだよ。
例文: Javascriptの関数を使った実際のコード
新人：グラミちゃんすごいですね！Javascriptで関数を使った実際の例が知りたいです！
エンジニア：プロくんもちろんだよ。例えば、2つの数を足す関数を作ってみよう。
function 足し算する関数(数1, 数2) {
let 結果 = 数1 + 数2;
return 結果;
}
let 結果1 = 足し算する関数(5, 3);
let 結果2 = 足し算する関数(10, 7);
console.log(結果1); // 結果1には 5 + 3 の結果が入るので、8が表示されるよ
console.log(結果2); // 結果2には 10 + 7 の結果が入るので、17が表示されるよ
//表示結果
8
17これで、同じ足し算の処理を何度も書く必要がなくなったね。
関数を使うことで、コードが簡潔になり、修正もしやすくなるんだ。
まとめ
新人：グラミちゃんなるほど、Javascriptの関数ってすごく便利なんですね！
エンジニア：プロくんそうだよ、グラミちゃん。関数を上手に使えるようになると、プログラムがより効率的で分かりやすくなるんだよ。