いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】関数の書き方と使い方の基本

JavaScriptプログラミングに必須の「関数」について、その定義方法と使い方を基礎から解説します。値を受け取る「引数」や結果を返す「戻り値」といった基本はもちろん、デフォルト値や可変長引数など、より実践的な書き方もサンプルコードで段階的に学べます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptの関数とは

関数とは、特定の目的を持った一連の処理を一つの塊としてまとめたものです。関数には名前を付けることができ、その名前を呼び出すだけで、まとめた処理を何度でも実行できます。

同じコードを繰り返し書く必要がなくなるため、プログラムが管理しやすくなり、効率的な開発が可能になります。

  • 引数 (ひきすう): 関数が処理を行うために、外部から受け取る値のことです。例えば、「2つの数値を足し算する」という関数であれば、その「2つの数値」が引数にあたります。引数を使うことで、関数は呼び出されるたびに異なるデータで同じ処理を実行できます。

  • 戻り値 (もどりち): 関数が処理を終えた後、その結果として呼び出し元に返す値のことです。「2つの数値を足し算する」関数であれば、計算された「合計値」が戻り値となります。この戻り値を使うことで、関数の実行結果を次の処理に利用できます。

JavaScriptでの関数の定義方法

JavaScriptにおいて、関数は一連の処理を一つにまとめたものです。同じ処理を何度も繰り返し利用したい場合や、プログラムの特定の部分を部品化したい場合に使用します。

以下は、基本的な関数の定義方法です。

1function 関数名(引数1, 引数2, ...) {
2    // 処理内容
3    return 戻り値;
4}

この構文の各要素について説明します。

  • function 「これから関数を定義します」と宣言するためのキーワードです。関数の定義は必ずこの単語から始めます。

  • 関数名 作成する関数の名前を記述します。この名前を使って、後から関数を呼び出すことができます。

  • 引数 (ひきすう) 丸括弧 () の中に記述し、関数に外部から情報を渡すために使用します。引数を使うことで、渡される値によって関数の処理結果を変えることができます。カンマ , で区切ることで複数指定でき、必要ない場合は空にすることも可能です。

  • {} と 処理内容 波括弧 {} で囲まれた部分に、関数が実行する具体的な処理を記述します。

  • return 関数の処理を終了し、その結果として値を返すための命令です。

  • 戻り値 (もどりち) return によって返される値のことです。関数を呼び出した側は、この戻り値を受け取って、その後の処理に利用することができます。戻り値が必要ない関数の場合は、return 文を省略することもできます。

サンプルコード

この章では、JavaScriptの基本的な機能である「関数」について、様々な使い方を学びます。関数は、特定の処理をひとまとめにして、何度も呼び出して使えるようにする仕組みです。

javascript/chapter17/index.html

これは、これから作成するJavaScriptファイルを読み込むためのHTMLファイルです。ブラウザは、このHTMLファイルに書かれた順番にJavaScriptファイルを読み込み、実行します。<script>タグについているdefer属性は、HTMLの表示を妨げずにスクリプトを読み込むための指示です。

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17    <script src="./script07.js" defer></script>
18  </body>
19</html>
20

javascript/chapter17/script01.js

これは、最もシンプルな関数の形です。function greet1() で greet1 という名前の関数を定義しています。この関数は、外部から情報を受け取る「引数（ひきすう）」も、処理結果を返す「戻り値（もどりち）」もありません。greet1(); のように関数名を記述することで、定義した処理（この場合はコンソールに "Hello!" と表示する）を実行できます。

1// 引数も戻り値もない関数
2function greet1() {
3  console.log("Hello!");
4}
5greet1(); // 出力: Hello!
6

javascript/chapter17/script02.js

この関数は、処理結果を呼び出し元に返す「戻り値」を使っています。return "Hello!"; という記述により、greet2関数が実行されると "Hello!" という文字列が返されます。console.log(greet2()); は、greet2() から返ってきた値 "Hello!" をコンソールに表示しています。

1// 引数なしで戻り値を返す関数
2function greet2() {
3  return "Hello!";
4}
5console.log(greet2()); // 出力: Hello!
6

javascript/chapter17/script03.js

この関数は、外部から情報を受け取る「引数」を使っています。function greet3(name) の name が引数です。関数を呼び出す際に greet3("Alice") のように値を渡すと、その値（ここでは "Alice"）が関数内の name という変数にセットされます。これにより、渡す値によって関数の処理結果を変えることができます。

1// 引数を使う関数
2function greet3(name) {
3  return `Hello, ${name}!`;
4}
5console.log(greet3("Alice")); // 出力: Hello, Alice!
6

javascript/chapter17/script04.js

引数はカンマ（,）で区切ることで、複数指定することができます。function greet4(greeting, name) は2つの引数を受け取ります。greet4("Good morning", "Alice") のように呼び出すと、1つ目の値が1つ目の引数 greeting に、2つ目の値が2つ目の引数 name にそれぞれセットされます。

1// 複数の引数を使う関数
2function greet4(greeting, name) {
3  return `${greeting}, ${name}!`;
4}
5console.log(greet4("Good morning", "Alice")); // 出力: Good morning, Alice!
6

javascript/chapter17/script05.js

引数には、値が渡されなかった場合の初期値（デフォルト値）を設定することができます。function greet5(name = "Guest") のように記述すると、引数 name のデフォルト値が "Guest" になります。greet5() のように引数なしで呼び出すとデフォルト値が使われ、greet5("Bob") のように引数を渡すと渡された値が優先されます。

1// デフォルト引数を持つ関数
2function greet5(name = "Guest") {
3  return `Hello, ${name}!`;
4}
5console.log(greet5()); // 出力: Hello, Guest!
6console.log(greet5("Bob")); // 出力: Hello, Bob!
7

javascript/chapter17/script06.js

関数の引数の数が決まっていない場合、「可変長引数（rest parameters）」を使います。引数名の前に ... をつけると、渡された複数の引数が配列（値をまとめて管理する箱）として扱われます。この例では、sum(1, 2, 3, 4, 5) で渡された5つの数値が numbers という配列に格納され、for文を使って合計値を計算しています。

1// 可変長引数（rest parameters）を持つ関数
2function sum(...numbers) {
3  let total = 0;
4  for (let num of numbers) {
5    total += num;
6  }
7  return total;
8}
9console.log("Sum:", sum(1, 2, 3, 4, 5)); // 出力: Sum: 15
10

javascript/chapter17/script07.js

これは、これまで学んだ知識を応用した練習問題です。円の面積を計算する関数 calculateCircleArea を定義しています。1つ目の引数 radius（半径）は必須ですが、2つ目の引数 pi（円周率）には 3.14 というデフォルト値を設定しています。そのため、calculateCircleArea(radius) のように半径だけを渡すだけで、円周率を省略して面積を計算することができます。

1// 練習問題：円の面積を求める関数（円周率は3.14とする）
2function calculateCircleArea(radius, pi = 3.14) {
3  return radius * radius * pi;
4}
5let radius = 5;
6console.log("円の面積:", calculateCircleArea(radius)); // 出力: 円の面積: 78.5
7

おわりに

今回はJavaScriptの関数について、基本的な定義方法から使い方までを解説しました。関数は単に処理をまとめるだけでなく、引数でデータを受け取り、returnで結果を返すことでプログラムの部品として機能します。さらに、引数にデフォルト値を設定したり、可変長引数を使ったりすることで、より柔軟で実用的な関数を作成できます。ここで学んだ関数の知識は、今後のプログラミング学習の重要な土台となります。

【JavaScript】関数の書き方と使い方の基本 | いっしー@Webエンジニア