2022/10/21 (更新日:2024/12/11)

【JavaScript】関数とは？その意味と使い方を解説【関数宣言,関数式,アロー関数】

Categories > JavaScriptの入門編

関数って何？？

この記事では、JavaScriptにおける「関数」とは「何のことなのか」、そしてその「使い方」を解説しています。

「関数」はJavaScriptだけではなく、他のプログラミング言語でも必ずといっていいほどよく使う概念ですし、JavaScriptというプログラミング言語「そのものの構成要素の一つ」です。

この記事で得られる知識

関数とは？
関数のメリット
JavaScriptにおける関数の種類
JavaScriptにおける関数の具体的な使い方

また、下の動画でも「JavaScript」における関数の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

では、さっそくですが、内容へ入っていきましょう！

関数とは？

プログラミングにおける「関数」とは、「何らかの処理を一つにまとめたもの」というような意味で使われます。

例えば下記の様な３つの処理をさせたいと仮定します。

ユーザーに年齢を聞く。
20歳以上かどうかチェックする。
「お酒が飲めますね」と表示する。

このような処理を一つにまとめてたものが「関数」です。

※処理が一つでも関数はOKです。

関数があることのメリットとは？

なぜ「関数」というものがプログラミングの世界にあるかというと、便利だからです。

具体的には下記の様な点で便利ですね。

同じ処理を使いまわす時に記述が少なくて済む。
名前をしっかりつければ、何をしているか分かりやすい。

それぞれもう少し詳しく解説しますね。

同じ処理を使いまわす時に記述が少なくて済む。

例えば、５行の処理をまとめたような関数を作ったとします。

それに名前をつけて使いまわすことで、毎回５行のコードを書かなくても、「あの関数を使う」みたいな感じで書けば、その中身まで毎回書かなくても済みます。

それによって、上手く使えばコードの量がめちゃくちゃ減らせます。

名前をしっかりつければ、何をしているか分かりやすい。

たとえ１つしか処理がない場合でもそれを関数にすることがコードが読みやすくなることもあります。

また、関数に名前をつける際に、「その関数が行っていること」を上手く表すような名前をつけてあげれば、コードが読みやすくなります。

これにより、複数人での開発などではもちろん役立ちますし、自分で書いたコードを読み返す時も、分かりやすくなるかと思います。

大まかな関数の使い方

まず大まかに、JavaScriptでの「関数」の使い方について解説しますね。

下記の２つのステップで関数は使われます。

関数の使い方

関数を作る
関数を呼び出す

では、それらについてもう少し解説します。

関数を作る

まず、関数を作ります。

どんな処理を一つにまとめるかをまず書いてあげる必要がありますね。

ここで上手く名前をつけてあげることが重要です。

関数が行っていることを「分かりやすく表す」のがいいと思います。

JavaScriptでの具体的な関数の作り方は、後述しますね。

また、JavaScriptでは「関数の作り方は複数種類ある」ということもここで書いておきます。

関数を呼び出す

あとは関数にまとめた処理を実際に実行したいタイミングで、関数を呼び出してあげればOKです。

JavaScriptでの「関数の呼び出し方」もこの記事の下の方で記述しますね。

また、JavaScriptでは基本的な「関数の呼び出し方は１種類しかない」ということもここで書いておきます。

よく使われる方法が１つ、ということですね。

JavaScriptにおける関数の種類

具体的なJavaScriptでの関数の使い方を書きたいところですが「どんな関数を使うのか」によって書き方が違うので、まず「JavaScriptにはどんな関数の作り方があるか」について書きたいと思います。

JavaScriptで「よく使われる基本的な関数の作り方は３種類」あります。

それは下記の通り。

JavaScriptでの基本的な関数の作り方。

関数宣言
関数式(無名関数,匿名関数)
アロー関数

また、この中で「アロー関数」は比較的に新しくJavaScriptに追加された関数の書き方です。

ES2015（ES6）というJavaScriptの仕様の中ではじめて登場したものですね。

具体的な関数の使い方

やっとか、という声が聞こえてきそうですが、ここからはJavaScriptにおける「具体的な関数の使い方」を解説していきます。

関数宣言の使い方

まず、「もっとも基本的な関数の書き方」とも呼ばれる書き方である「関数宣言」という関数の作り方から解説します。

function 関数名() {
    関数が行う処理。
}

このように関数を作ることを「関数宣言」といいます。

関数名について

「関数名」の箇所は「ルール内」でなら「任意の関数名が自由に」つけることが可能です。

関数名の命名ルール

Unicode文字数字 _ $　が使える。
はじめの文字は数字以外
予約語は禁止
大文字と小文字は区別される

これはJavaScriptにおける変数の命名規則と一緒です。

上手い命名の方法、JavaScriptでの命名における慣習などは別の記事でまとめたいと思います。

関数の呼び出し方法

function 関数名() {
    関数が行う処理。
}

関数名();

JavaScriptでの「関数の呼び出し方法」はこのように書きます。

JavaScriptでは関数の作り方は何種類かありますが、基本的な関数の呼び出し方はこの一つなのです。

具体例

function greeting() {
    alert( "こんばんは！" );
}

greeting();

「こんばんは！」というアラートがでる関数を作って、それを呼び出してみました。

関数は「作っただけでは何も起きない」のですが、呼び出してあげることで、それが実行されます。

関数式(無名関数,匿名関数)の使い方

「関数式」という関数の作り方もあります。呼び出し方は一緒です。

function() {
    //     関数が行う処理。
}

これが「関数式」と呼ばれる関数の作り方です。

なぜ「関数式」は無名関数や匿名関数とも呼ばれるか

「 function(){} 」このように書くので、関数の名前を直接つける訳ではありません。なので、名前が無いので、「関数式」と呼ばれる関数は、「無名関数」や「匿名関数」とも呼ばれるんですね。

具体的な使い方

let fun = function() {
    alert( "こんばんは！" );
}

fun();

このように、変数に関数を代入してあげるイメージで関数を作ります。

「fun」という名前の変数を作って、それに関数を代入してあげるという「関数式」を具体的に使ってみました。

関数宣言と同様に、「関数が行っていること」を表すような名前をつけてあげればOKです。

OKといか、それが上手い使い方ですね。

名前をつけることが比較的に必要ない場面であるコールバック関数などでも使われます。

letじゃなくてもOK

「let」でも「var」でも「const」でも構いません。

アロー関数の使い方

「アロー関数」という、比較的に新しい関数の作り方もあります。

() => {
    //     関数が行う処理。
}

このように作られる関数が「アロー関数」です。

「 => 」の部分が矢印に似てるから「アロー」関数なのかな、そう個人的に思います。

他の関数の作り方と違って「 function 」と書く必要がないので、少しスッキリ書けますね。

具体的な「アロー関数」の使い方。

let fun = () => {
    alert( "こんばんは！" );
}

fun();

こんな感じで、関数式のように、変数に代入してあげて、その変数名が関数名となるイメージで、呼び出しの時に使われたすることもありますし、コールバック関数などでも使われます。

「アロー関数」はさらに簡潔に書ける。

「アロー関数」は引数が1個の場合は「 () 」が省略できます！

引数とは何かについては、この記事の下の方で解説しますが、少し説明すると、関数を作る時にでてくる「 () 」の中にカンマ区切りで、関数内で使う変数が設定できて、それのことです。

let fun = a => {
    alert( `${a} さん、こんばんは！` );
}

fun( "ペンギン" );  // ペンギンさん、こんばんは！

このような感じです！

「アロー関数」はさらに省略できる。

アロー関数の処理が「１行である」場合はさらに「 {} 」も省略できます。

let fun = a => alert( `${a} さん、こんばんは！` );

fun();

このような感じです。

大分すっきり書けますね！

「return」の１行の場合はさらに省略可能。

let fun = a => {
    return a * a;
}

fun( 2 );  // 4

このように、「アロー関数」が一つにまとめる処理が「return文だけ」である時は、下記のように書けます。

let fun = a => a * a;

fun();

何か値を与えて、それに何か処理をして、それを返却してほしい時などが結構あるかと思います。その時にそれを一行ですっきり書けるのが「アロー関数」です。

いきなり使えなくても、一般的にもよく使われているので、読めるようにしておきましょう！

慣れたらどんどん使っていきましょう！

アロー関数の歴史

「アロー関数」は、「Ecma International(Ecmaインターナショナル)」というJavaScriptの標準仕様を策定する団体が2015年に策定したバージョンのJavaScriptの標準仕様から登場しました。

「アロー関数」は便利なので今では普通に使われていますが、古いソースコードでは、更新されていない限り使われていないはずなので、これを見れば、メンテナンスなどがされているかどうか、2015年よりも後に書かれたコードかどうか、ということの推測ができるかもしれませんね。

引数とは？

JavaScriptにおける関数には、「引数」というものがあります。

引数によって関数は「値を受け取ること」が可能となります。

関数に何らかの値を渡して、それを使って何か処理をしてほしい際に使われます。

また引数には、細かく分けると下記の2つのものがあります。

仮引数
実引数

それぞれについてもう少し詳しく解説しますね。

仮引数とは？

function fun( 仮引数 ) {
    関数の中身の処理;
}

上のコードのように関数を「定義する際に()の中に入れる」のが「仮引数」です。

具体的に仮引数はどうやって使うのか。

function fun( num ) {
    console.log( num * 2 );
}

仮引数を「num」として関数を作りました。

関数の中で「num」は自由に使うことができます。

実引数とは？

function fun( num ) {
    console.log( num * 2 );
}

fun( 実引数 );

関数を「呼び出す」時に使うのが「実引数」です。

実引数によって、値を関数に渡すことができます。

具体的に「実引数」はどう使うのか。

function fun( num ) {
    console.log( num * 2 );
}

fun( 5 ); //  10

関数を呼び出すときに、「 5 」を渡してあげました。すると、「10」というのがコンソールにログとして残っていました。

こんな感じで使いますね。

仮引数と実引数の違いをまとめる。

関数を定義する時に使うのが「仮引数」で、関数を呼び出す時に使うのが「実引数」です。

function fun( 仮引数 ) {
    関数の中の処理;
}

fun( 実引数 );

どちらも単に「引数」とも呼ばれます。

引数は無くてもOK

function fun() {
    alert( "ありがとう！" );
}

fun();

こんな感じで引数は無くてもてOKです。

ですが、関数を定義する時の()と、呼び出す時の()は必要なので注意が必要です。

※アロー関数では、引数が1つの時に限り、()の省略が可能。

引数は( , ) カンマで区切ることで複数使える。

function fun( a, b ) {
    console.log( a * b );
}

fun( 3, 6 ); // 18

こんな感じで、( , )カンマで区切ることによって、複数の引数が使えます。

引数は何個使ってもOKです！

関数のスコープについて

関数の基本的な使い方を記述し終わったので、関数が作る「スコープ」に関するお話をしたいと思います。

スコープとは？

定義した「変数」や「関数」を使うことができる範囲のことを指します。

関数の中で定義された変数は、その関数の中からしか使えない。

function fun() {
    let age = 20;
    console.log( age );
}

fun(); // 20

console.log( age ); // Uncaught ReferenceError: age is not defined at main.js:11:14

この例から分かる通り、関数の中で定義した変数「age」は関数の中からは上手く使えていることが確認できますが、関数の外から「age」という変数を使おうとすると、「age」は定義されていない、というエラーがでています。

関数の外で定義された関数は、関数の中からでも使える。

let age;

function fun() {
    age = 20;
    console.log( age );
}

fun(); // 20

console.log( age ); // 20

関数の外で「age」という変数を定義してから、関数の中で「age」に「20」を代入しています。そして、それを関数の中でログに出力しています。

また、関数の中で「age」に対して行った変更が、関数の外から「age」を使った時にも残っています。

外で既に定義されている変数名も関数の中で使える。

let age = 20;

function fun() {
    let age = 17;
    console.log( age );
}

fun(); // 17

console.log( age ); // 20

関数の外で宣言されている変数と同じ名前の変数を関数の中で宣言した場合は、関数の中で宣言した変数と関数の外で宣言された変数は、名前は同じでも別物として扱われます。

この場合は、関数の外で宣言された「age = 20」に、関数は影響を与えていないことに注目して下さい。

関数の巻き上げ

fun(); // Hello

function fun() {
    console.log( "Hello" );
}

通常JavaScriptのコードは上から下へと順番に実行されていきますが、コードの下の方で「関数宣言」で作られた関数は、コードのどこからでも使用可能です。

つまり「宣言した箇所よりも上の行」に「関数の呼び出し」を書いてもOKです。

なぜか？

これは「巻き上げ」と呼ばれる現象によるものです。

これは、コードが実行される時に、まず宣言されている「変数や関数」が先に読み込まれるためです。

その後に、上から順番にJavaScriptのコードが実行されていくため、どこからでも呼び出せる訳ですね。

関数式の場合は上手くいかない。

fun();  // Uncaught ReferenceError: Cannot access 'fun' before initialization at main.js:5:1

let fun = function () {
    console.log( "Hello" );
}

このように「関数式」で関数を作った場合は、「関数を作った箇所よりも上の行」で、「関数を呼び出し」をしても上手くいきません。

なぜか？

巻き上げ自体は行われているので「宣言」自体はされていますが、「関数式を変数に代入する」というところまでは行われないので、ただ宣言しただけの「fun」という変数を関数として使おうとしちゃってる感じになって、エラーになっています。

「関数式」は「作った行よりも下の行からでしか呼び出すことができない」ということですね。

基本的に関数式よりも関数宣言を使えばOK

関数式だと、先に関数を作って、その下の行でないと関数の呼び出しができないので、少し考えることが増えます。

なので基本的に、コードのどこからでも使うことができる「関数宣言」で関数を作った方が良いと思います。

即時実行関数式という書き方もある

(function ( 仮引数 ) {
    // 処理
}( 実引数 ));

このように書くことで、関数を定義すると「同時に」実行することができます。

少し特殊な感じがするかもしれませんが、まずは「こーゆーのもあるのか」、と知っておくことで自分は使わなくても読むことができるだけでOKだと思います。

記事に情報が多くなってきましたが、何度も分からなくなったら確認で戻ってきてくれればOKだと思います。一度で全部覚える意識はもたなくて大丈夫です。

他には「ジェネレーター関数の宣言」などもありますが、この記事は基本的な関数の使い方を解説する記事なので、それについては、また別の記事で書きたいと思います。

参考リンク！

MDN。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

まとめ

プログラミングでよく用いられる「関数」とは、「複数の処理を一つにまとめたもの」という意味で使われます。

関数があることで、「コードを書く量が減らせる」とか「コードが読みやすくなる」などの便益があります。

大まかな関数の使い方の手順は、「関数を作る」、そして「関数を呼び出す」この２つです。

JavaScriptにおける、よく使われる関数の作り方は「３種類」あって、それは下記の通り。

関数宣言
関数式(無名関数,匿名関数)
アロー関数

「関数」を上手く使うと、とても便利ですし、何より楽しいです！

関数を使えるようになると書けるコードの幅がぐんと広がりますし、「よりプログラミングが楽しくなる」かと思います。

皆さんもJavaScriptでいろいろな「関数」を作ってみて下さい！

ではでは。