〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

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

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

UIHACK
編集長
UIHACK 編集長

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

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

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

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

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

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

そもそも関数とは?

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

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

UIHACK
編集長
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
JavaScript
UIHACK
編集長
UIHACK 編集長

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

JavaScript関数の補足説明

関数の定義

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

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

関数を呼び出す

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

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

関数の実行

console.log(result);

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

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

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

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

関数の定義

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

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

解説

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

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

関数の呼び出し

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

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

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

let result = addNumbers(5, 3);
UIHACK
編集長
UIHACK 編集長

解説

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

関数の戻り値

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

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

解説

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

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

function()の使い方まとめ

・関数はfunctionキーワードを使って定義されます。
・関数は名前があり、それを使って呼び出します。
・関数は引数を受け取ることができ、処理の結果を戻り値として返すことができます。
・関数を使うことで、同じ処理を何度も書く必要がなくなり、プログラムがスッキリして保守しやすくなります。

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

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

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

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

UIHACK
編集長
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, ...) => {
  // 処理内容
};
関数を変数に代入するメリット
  1. コールバック関数の扱いやすさ
    関数を変数に代入することで、他の関数に引数として渡したり、コールバック関数として使用することが容易になります。例えば、addEventListenerメソッドにコールバック関数を渡す場合、変数に代入した関数を使うことでコードがスッキリし、可読性が向上します。
    ※詳しくは以下の章で解説してます。
  2. 高階関数の作成
    関数を変数に代入することで、高階関数を作成しやすくなります。高階関数は、他の関数を引数として受け取ったり、戻り値として返したりする関数です。これにより、より柔軟で再利用可能なコードを記述できます。
    ※詳しくは以下の章で解説してます。
  3. クロージャの利用
    関数を変数に代入することで、クロージャを利用することができます。クロージャは、関数内で別の関数を定義し、その内部関数から外側の関数の変数にアクセスできるようにする機能です。クロージャを使用すると、プライベート変数の作成や、変数の値を保持したり、状態を管理したりすることができます。

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
編集長
UIHACK 編集長

解説

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

executeOperation高階関数の実行結果

5
6
JavaScript

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

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
編集長
UIHACK 編集長

解説

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

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

createGreetingFunction高階関数の実行結果

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

高階関数 (Higher-Order Functions)のまとめ

他の関数を使って処理を便利に行う方法です。関数を変数のように扱えるため、コードを簡潔にし、同じ処理を繰り返し使えるようになります。

例1: executeOperation関数は、他の関数(addやmultiply)を引数として受け取り、その関数に値を渡して実行します。

例2: createGreetingFunction関数は、新しい関数を作成して返します。引数として渡した挨拶と名前を組み合わせることで、異なる挨拶を簡単に作成できます。

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

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

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

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

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

解説

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

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

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

Button Clicked!
JavaScript

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

<button id="myButton">Click me!</button>
コールバック関数 (Callback Functions)のまとめ

コールバック関数は、他の関数が終了した後に実行される関数のことです。非同期処理やイベントの制御に役立ちます。

例: addEventListenerメソッドにより、ボタンがクリックされたときにonClickButton関数が実行されます。

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

関数は、functionを使った通常の関数定義と、アロー関数(=>)の2種類があります。それぞれの使い方によって、関数の書き方が異なります。

引数は、関数にデータを渡すための入力箱のようなものです。関数はこれらの引数に基づいて処理を行います。

return文は、関数が結果を外部に返すために使われます。関数が計算した値や処理結果を呼び出し元に戻すのに使います。

コールバック関数は、他の関数に引数として渡され、後で実行される関数のことです。例えば、ボタンをクリックしたら実行される関数がコールバック関数です。

高階関数は、他の関数を引数として受け取るか、戻り値として返す関数のことを指します。関数の組み合わせや再利用に役立つ重要な概念です。

新しいJavaScript機能を使用する場合は、ブラウザのサポート状況を確認することが重要です。古いブラウザや一部のモバイルブラウザは、最新の機能をサポートしていない場合があります。

Can I use などのWebサイトを利用して、特定のJavaScript機能がどのブラウザでサポートされているかを確認します。

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

UIHACK
編集長
UIHACK 編集長

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

本記事で学んだ事
  • 関数とは?
  • function()とは?
  • 関数の引数を参照渡しする方法
  • 関数を変数に代入する方法とその利点
  • 高階関数とコールバック関数をしっかり理解しよう
  • executeOperation高階関数の実行結果

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です