JavaScriptの関数（function）は、処理をひとまとめにして名前をつけることができる機能です。
関数を上手に活用することで、コードの見通しがよくなったり、同じ処理を何度も書かなくて済むようになります。
この記事では、JavaScriptのfunctionについて、初心者の方にもわかるよう基本的な使い方から丁寧に解説していきます。
実際のサンプルコードを交えながら説明するので、初めてfunctionに触れる方も理解しやすいはずです。
- 未経験からWebエンジニアとして転職成功（年収 30% アップ）
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
functionの基本的な働き
まずはfunctionの役割について見ていきましょう。
functionを使うと、ある特定の処理をひとかたまりにして、名前をつけることができます。
functionを使うメリットは主に以下の2つです。
- 同じような処理を何度も書かなくて済む
- 処理に名前がつくことでコードの見通しがよくなる
例えば以下のようなfunctionを定義したとします。
function hello(name) {
console.log('こんにちは、' + name + 'さん');
}この関数helloは、引数で名前（name）を受け取り、「こんにちは、〇〇さん」というあいさつ文をコンソールに出力する処理をしています。
一度このような関数を定義しておけば、あとはhello('太郎')やhello('花子')のように関数を呼び出すだけで、同じ処理を実行できるわけです。何度も同じコードを書く必要がなくなりますし、helloという名前を見ればどんな処理をする関数なのかがひと目でわかります。
functionの定義方法
JavaScriptでfunctionを定義する方法は主に3つあります。それぞれ見ていきましょう。
関数宣言
functionキーワードを使って以下のように定義します。もっともシンプルでよく使われる書き方です。
function 関数名(引数1, 引数2, ...) {
// 処理
return 戻り値;
}関数式
functionを変数に代入する形で定義する方法です。「無名関数」「匿名関数」とも呼ばれます。
const 関数名 = function(引数1, 引数2, ...) {
// 処理
return 戻り値;
};アロー関数
ES2015で導入された新しい書き方で、=>（アロー）を使うのが特徴です。一般的な関数式と同じように変数に代入する形で定義します。
const 関数名 = (引数1, 引数2, ...) => {
// 処理
return 戻り値;
};引数と戻り値
functionは「引数」を受け取り、「戻り値」を返すことができます。
引数
引数とは、関数に渡す値のことです。関数を定義するときに仮引数を指定しておき、関数の中で変数のように使うことができます。
function multiply(a, b) {
return a * b;
}この例では、multiply関数はaとbの2つの引数を取り、それらを掛け合わせた結果を返します。
戻り値
戻り値は、関数が呼び出し元に返す値のことです。関数内でreturn文を使うことで指定します。
function square(x) {
return x * x;
}このsquare関数の戻り値は、引数xを二乗した値です。
戻り値は関数の外で変数に代入したり、別の関数の引数として渡したりできます。
const result = square(3);
console.log(result); //=> 9関数の呼び出し方
定義した関数を実際に使うには、関数を呼び出す必要があります。
関数名(引数1, 引数2, …)の形で呼び出します。引数がない場合は関数名()とします。
function hello(name) {
console.log('こんにちは、' + name + 'さん');
}
hello('太郎'); //=> こんにちは、太郎さん
hello('花子'); //=> こんにちは、花子さんまた、ボタンのクリックなどのイベント発生時に関数を呼び出すこともよくあるパターンです。
document.getElementById('button').addEventListener('click', function() {
console.log('ボタンがクリックされました');
});スコープに注意
関数内で宣言された変数は、基本的にその関数の中でしか参照できません。これを変数のスコープ（有効範囲）と言います。
function fn() {
const x = 1;
console.log(x); //=> 1
}
fn();
console.log(x); //=> ReferenceError: x is not defined関数fn内で定義された変数xは、fnの外からは参照できないので注意しましょう。
まとめ
JavaScriptのfunctionについて、基本的な使い方を説明してきました。
ポイントは以下の通りです。
- functionは処理をまとめて名前を付けられる
- 関数宣言、関数式、アロー関数の3つの定義方法がある
- 引数を受け取って処理し、戻り値を返せる
- 関数名(引数)の形で呼び出す
- 関数内で宣言した変数のスコープ（有効範囲）に気をつける
functionを使いこなせると、コードの重複を減らしたりプログラムの見通しを良くしたりできます。
もちろん、ここで紹介した以外にもfunctionには応用的で便利な使い方があります。
まずは基本をしっかり抑えて、どんどん活用していきましょう！
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
