【再利用】JavaScript関数(function)と引数の使い方！

本記事は、「JavaScript関数の意味や使い方がよくわからない」と思いつつ

UIHACK 編集長

・勉強しらJavaScript関数が動かない人
・関数を効率的に書く方法はあるのかを考えている人
・再利用可能なコードを書きたい人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、JavaScript関数の実装方法について、さらには高階関数やコールバック関数までを詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

JavaScript関数とは？基本からしっかり理解する

そもそも関数とは？

プログラム内で同じ処理を何度も使いたい時に便利な道具のようなものです。今このページを見ている「あなた」が同じ計算を何度もしなければならないと考えてみてください。毎回同じ計算を繰り返すのは退屈で、ミスの可能性も高まってしまいますよね？

関数は、そんな時に役立つ仕組みです。例えば、「2つの数を足す」処理を関数にまとめておけば、同じ計算を何度も繰り返す必要がなくなります。

UIHACK 編集長

慣れる為にも、いきなり関数を見てみよう。
次のようなJavaScript関数は2つの数を足す処理をしています。

function addNumbers(number1, number2) {
  return number1 + number2;
}

この関数を使うと、次のようにして2つの数を足す計算ができます。

let result = addNumbers(5, 3); // この場合、resultには8が入ります

今回のコードをまとめると以下のようなコードになります。

function addNumbers(number1, number2) {
  return number1 + number2;
}

let result = addNumbers(5, 3); // この場合、resultには8が入ります
console.log(result);

addNumbers関数の実行結果

8

UIHACK 編集長

関数を使うとプログラムがスッキリし、同じ処理を繰り返さなくて済むので、効率的にコーディングできるようになりますよ！

JavaScript関数の補足説明

関数の定義

function addNumbers(number1, number2) {
  return number1 + number2;
}

このJavaScriptの関数は、addNumbersという名前で定義されています。この関数は2つの引数を受け取り、それらの引数を足した結果を返します。

関数を呼び出す

let result = addNumbers(5, 3); // この場合、resultには8が入ります

例えば、addNumbers(5, 3)のように関数を呼び出すと、引数に与えられた数値、つまり5と3がnumber1とnumber2に渡されます。そして、この2つの数値を足した結果、8が関数から返され、result変数に代入されます。

関数の実行

console.log(result);

したがって、result変数には8が入るので、console.log(result)を実行するとコンソールに8が表示されるでしょう。

JavaScriptのfunction()とは？意味と使い方を解説

functionは、複数の処理をまとめて実行するためのブロックであり、再利用性とコードの整理に役立つ仕組みです。functionを使うことで、特定の処理を名前を付けて定義し、その名前を呼び出すことで処理を実行できます。

functionの意味と使い方を3STEPで詳しく解説します。

関数の定義

関数はfunctionを使って定義します。基本構文は以下のようになります。

function 関数名(引数1, 引数2, ...) {
  // 処理内容
}

UIHACK 編集長

解説

関数名 関数には名前があり、関数を呼び出す際にこの名前を使います。

引数1, 引数2, 関数が受け取る値を指定する引数のリストです。関数を呼び出すときに引数に対応する値を渡します。

関数の呼び出し

関数を呼び出すには、関数名に括弧()を付けて呼び出しを行います。引数が必要な場合は、括弧内に引数の値を渡します。

関数名(引数1の値, 引数2の値, ...);

例えば、先ほどのaddNumbers関数を呼び出す場合は次のようになります。

let result = addNumbers(5, 3);

UIHACK 編集長

解説

addNumbers(5, 3)の部分で、number1に5が、number2に3が渡され、関数の中でそれらの値が足し合わせられます。

関数の戻り値

関数は処理を実行した結果を返すことができます。これを「戻り値」と呼びます。return文を使って戻り値を指定します。

function 関数名() {
  // 処理内容
  return 戻り値;
}

UIHACK 編集長

解説

関数内でreturn文が実行されると、その時点で関数の実行が終了し、指定された値が戻り値として返されます。もしreturn文がない場合、関数はundefinedを返します。

例えば、先ほどのaddNumbers関数はnumber1とnumber2を足し合わせた結果を返すので、return number1 + number2;となります。

Javascriptで関数の引数を参照渡しする方法

関数の引数はデフォルトで「値による渡し（値渡し）」として扱われます。つまり、関数に引数を渡す際、引数の値がコピーされて関数内で使用されます。したがって、関数内で引数の値を変更しても、元の引数には影響を与えません。

しかし、参照渡しのように引数の値が変更されると元の引数にも影響を及ぼす方法を模倣することはできます。そのためには、オブジェクトを引数として渡すことが必要です。

オブジェクトは参照型であり、関数に渡されたオブジェクトは実際にはオブジェクト自体の参照が渡されるため、関数内でオブジェクトのプロパティを変更すると、元のオブジェクトにも影響が及びます。

UIHACK 編集長

具体的な方法を示します。

// オブジェクトを引数として受け取る関数（参照渡し）
function modifyObject(obj) {
  obj.property = 'new value';
}

// オブジェクトを作成
const myObject = {
  property: 'value'
};

// 関数を呼び出す
modifyObject(myObject);

// オブジェクトのプロパティが変更されていることを確認
console.log(myObject.property); // 結果: 'new value'

この例では、modifyObjectという関数にmyObjectというオブジェクトを渡しています。

modifyObject関数内でオブジェクトのプロパティを変更していますが、元のmyObjectにも影響が及んでいることが分かります。

JavaScriptで関数を変数に代入する方法とその利点

JavaScriptでは、関数を変数に代入することができます。これは、関数を値として扱うための強力な機能であり、高度な機能を実現するのに役立ちます。関数を変数に代入する方法とその利点について説明します。

関数を変数に代入する方法

関数を変数に代入するには、以下のように関数名を変数に代入します。

const 関数の変数名 = function(引数1, 引数2, ...) {
  // 処理内容
};

または、アロー関数を使用する場合は次のようになります。

const 関数の変数名 = (引数1, 引数2, ...) => {
  // 処理内容
};

JavaScriptの高階関数とコールバック関数をしっかり理解しよう

高階関数とコールバック関数は、JavaScriptにおける重要な要素です。理解して活用することで、柔軟なプログラムの設計と処理の効率化が可能になります。以下にそれぞれの概念を解説します。

そもそも高階関数とは?

他の関数を使って処理を行う便利な方法です。関数を変数のように扱えるため、コードをシンプルにしたり、同じ処理を再利用したりできます。

以下に、高階関数のサンプルプログラムがありますのでご覧下さい。

関数を引数として受け取る高階関数

// 関数を引数として受け取る高階関数
function executeOperation(operation, a, b) {
  return operation(a, b);
}

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

const result1 = executeOperation(add, 2, 3); // 5
const result2 = executeOperation(multiply, 2, 3); // 6

UIHACK 編集長

解説

この例では、executeOperationという高階関数があります。この関数は他の関数を引数として受け取り、その関数に値を渡して実行します。add関数とmultiply関数を引数として渡して、それぞれの計算結果を得ています。

executeOperation高階関数の実行結果

5
6

関数を戻り値として返す高階関数

function createGreetingFunction(greeting) {
  return function(name) {
    return `${greeting}, ${name}!`;
  };
}

const greetInEnglish = createGreetingFunction('Hello');
const greetInJapanese = createGreetingFunction('こんにちは');

console.log(greetInEnglish('John')); // "Hello, John!"
console.log(greetInJapanese('太郎')); // "こんにちは, 太郎!"

UIHACK 編集長

解説

この例では、createGreetingFunctionという高階関数があります。

この関数は、挨拶を含む新しい関数を作成して返します。greetInEnglishとgreetInJapaneseにそれぞれ異なる挨拶を渡して新しい関数を作り、名前を渡して挨拶を作成します。

createGreetingFunction高階関数の実行結果

Hello, John!
こんにちは, 太郎!

コールバック関数 (Callback Functions)とは？

コールバック関数とは、他の関数が終わった後に実行される関数のことです。コールバック関数は、非同期処理やイベントの発生時に使われます。

以下に、コールバック関数のサンプルプログラムがありますのでご覧下さい。

// ボタンクリック時に実行されるコールバック関数
function onClickButton() {
  console.log('Button Clicked!');
}

// ボタン要素にクリックイベントを設定
const button = document.getElementById('myButton');
button.addEventListener('click', onClickButton);

UIHACK 編集長

解説

この例では、onClickButtonという関数がコールバック関数として使われています。

addEventListenerメソッドを使って、myButtonというIDを持つボタンがクリックされたときに、onClickButton関数が実行されます。

コールバック関数 onClickButtonの実行結果

Button Clicked!

ボタンをクリックすると、開発者ツールのコンソールに「Button Clicked!」というメッセージが表示されるでしょう。
ご自身で確認されたいと思いまでの、対応するHTMLを併せて記載します。

<button id="myButton">Click me!</button>

「FAQ」
JavaScriptの関数についてよくあるご質問

JavaScriptの例外処理とはにはについての結論とまとめ

UIHACK 編集長

今回は、JavaScript関数の実装方法について、さらには高階関数やコールバック関数についてご紹介しました。それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から「JavaScript関数とは？基本からしっかり理解する」を読む↑

JavaScriptのエラーが起きるとどう対処すればいいか分からない方はぜひ以下の記事もご覧ください。

2023年7月19日 【例外処理】JavaScript try-Catch文の基本と例外を対処する方法を解説します。

JavaScriptの配列の書き方がイマイチ分からない方はぜひ以下の記事もご覧ください。

2023年7月18日 【初心者向け】JavaScript配列の基本と要素の追加・削除・検索方法まで解説する