【JavaScript】関数とメソッドの違いを初心者にも分かりやすく解説

この記事では、プログラミングにおける関数とメソッドの違いについて解説していきます。

どのプログラミング言語においても似たようなことは言えますが、ここでは特にJavaScriptの場合を例に、理解していきましょう。

一言で解説

いきなり一言で答えを言ってしまうと、

関数：複数の箇所から共通で呼び出せるプログラムの塊
メソッド：オブジェクトがプロパティとして持っている関数

です。

少し詳しく解説

関数とは

関数は、プログラムを書く上で何度も出てくる同じような処理を、どこからでも呼び出せる「部品」としてまとめたものです。

たとえば以下の関数は、JavaScriptの処理の中でURLパラメーターを取得するための関数です。
（ここでは中の処理を理解する必要はありません。export等の記述も気にしないでください）

export function getParams(){
let arg = {};
const pair = window.location.search.substring(1).split('&');
for (let i = 0; pair[i]; i++) {
const kv = pair[i].split('=');
arg[kv[0]] = kv[1];
}
return arg;
}

フロントエンドJavaScriptを書いているとき、画面側でURLパラメーターを取得したい場合もたまにあると思います。
そんなときは、色々な画面でそれぞれバラバラに処理を書くのではなく、一か所に処理を記述しておいて、それを呼び出すことでURLパラメーターが手軽に取得できたら便利です。

そういったときのために、function(){}などという記号を用いて処理を切り出しておくのです。
（最近ではfunctionという書き方をせずにアロー関数というものを用いることもとても多いですが、本題ではないのでここでは割愛します。）

このように書いておけば、別のJavaScriptファイルからでも、一度書いた処理を何度でも使いまわすことができます。

この関数を呼び出す側では、getParams()と書くだけで、上記の長い処理を呼び出すことができてしまいます。

関数を用いることによって、何度も同じような処理を書くようなプログラミングの作業を効率化できるのです。

また、いろいろな箇所から何度も呼び出すような処理ではなくても、プログラムを読みやすくするために関数を用いることもあります。

長々と単調に処理を記述するのではなく、適切な長さで関数に分けて呼び出しあうことによって、プログラムの意味の切れ目が分かりやすくなり、整理された、読みやすいプログラムになるのですね。

メソッドとは

メソッドとは一言で言うと、
オブジェクトが持っている関数
です。

オブジェクトというものは、プログラミング言語によって少し扱いが異なる概念ですが、

JavaScriptの場合のメソッドは、

オブジェクトのプロパティに代入されている関数
と言うことができます。
（分かりにくいと思うので、詳しく解説します）

JavaScriptにおけるオブジェクトは、一言で言うと連想配列です。
連想配列とは「キー」と「値」をセットで持っているようなデータ構造のことを言います。

ちょっと分かりにくいので、例を見てみましょう。

たとえば、以下のfruitsBoxというオブジェクトは、それぞれの果物の個数を格納しておくためのオブジェクトです。

const fruitsBox = {
apple: 2,
orange: 7,
grape: 3
};

リンゴが２つ、ミカンが７つ、ブドウが３つ入ったようなフルーツボックスのイメージですね。

ここで言うappleとか、orangeなどという文字列が、この連想配列（オブジェクト）のキーとなっており、2とか7などという数値が、それぞれのキーに対応する値になります。

このように、JavaScriptにおけるオブジェクトとは、キーと値がセットで格納された連想配列のことです。

（JavaScript以外の言語では、オブジェクトと連想配列は同じものではない場合も多いので、注意してください）

このキーと値のセットを、オブジェクト指向の用語で言い換えると、プロパティという言葉になります。

プロパティとは、オブジェクトが保持している値のことです。
この呼び方をする場合、キーという概念は、プロパティ名などと呼ばれることが一般的です。

さて、JavaScriptに限らず、オブジェクト指向言語で言うところのオブジェクトは、プロパティの他にもう一つ持っているものがあります。

それがメソッドというものです。

オブジェクト指向におけるオブジェクトは、値と振る舞いをセットで持っているようなもので、値をプロパティ、振る舞いをメソッドと呼びます。
（ちょっとこの話は最初はパッとは理解しにくいと思うので、分からなければスルーしていただいて大丈夫です。）

つまり何が言いたいのかというと、メソッドというものは、オブジェクトが持っているものなのです。

なぜなら、メソッドという言葉は、オブジェクト指向の用語ですから。

ここが関数との違いです。

確かに、関数もメソッドも、どちらもプログラムの処理を部分的に切り出したものではあるのですが、
関数はオブジェクトに限らず一般的に処理を切り出したものなのに対して、
メソッドはオブジェクトが持っているような処理です。

オブジェクトが持っている処理って何?という点に関して、以下で例を交えながら詳しく見ていきましょう。

JavaScriptにおけるメソッド

先程、
関数はオブジェクトに限らず一般的に処理を切り出したものなのに対して、
メソッドはオブジェクトが持っているような処理、
ということをお話ししました。

実はJavaScriptにおいては、メソッドも関数のうちです。

オブジェクトがプロパティとして持っているような関数を、特別にメソッドと呼ぶのです。

例を見た方が分かりやすいと思うので、以下では、JavaScriptのメソッドをどのように書くのかということを、実際のプログラムを見ながら確認していきましょう。

たとえば、上記のフルーツボックスが、「ボックス内の全ての果物の合計数をお知らせしてくれる」という機能を持った、便利な箱だったとしましょう。

その時、合計お知らせ機能は、以下のように記述することができます。
（本題ではないので、ここではfunctionの中の処理をしっかり理解する必要はありません。）

上記のプログラムの赤字で描かれた箇所が、alertSumという名前のメソッドです。

上記のようにfruitsBoxを宣言した後に
fruitsBox.alertSum();
のようにメソッドを呼び出すと、「12」という結果が表示されます。

この12という結果はフルーツボックスの中に入っている、リンゴとミカンとブドウの数の合計ですね。（2 + 7 + 3）

この処理では、フルーツボックスというオブジェクトの中に入っている果物の数の合計を計算しているのです。

このことからも、メソッドというものは、オブジェクトに紐づいている処理であることがわかると思います。

JavaScriptのちょっと特殊なところ

冒頭でも既にご説明した通り、以下の２点がこの記事の結論です。

関数：複数の箇所から共通で呼び出せるプログラムの塊
メソッド：オブジェクトがプロパティとして持っている関数

この考え方は、JavaScript以外の言語にも通じる部分はあるのですが、JavaScriptならではの考え方も含んでいます。

このトピックに関連するところで、JavaScriptのちょっと特殊な点と言えば、以下の２点だと思います。

オブジェクトがただの連想配列
関数が第一級オブジェクト

一つ目の「オブジェクトがただの連想配列」に関しては、既にこの記事の中でお話した内容ですね。

二つ目の「関数が第一級オブジェクト」に関しては、なにやら難しそうな響きですが、

一言で言うと、
関数を変数に代入して使える
ということだと考えてください。

関数自体を、数値や文字列と同じように変数に代入したり、受け渡したりできるのです。

ただ、JavaScript以外の言語でも無名関数やラムダ式というような仕組みを取り入れている言語も多いですから、「JavaScriptでしかできないこと」という訳でもありませんね。

長々と説明してしまいましたが、この記事では、以下の２点だけ覚えておいてもらえれば幸いです。