こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。
今回は、JavaScriptのメソッドについて学習を進めていきましょう！
基本的には「関数」のことなのですが、その定義方法が少し違っておりオブジェクトに深く関わってくるのでこの機会にスキルアップを目指してみましょう。
この記事では、
・「メソッド」とは？
・メソッドの定義方法
・メソッドの呼び出し方
・メソッドに引数を指定する
・メソッドに戻り値を指定する
という基本的な内容から、
・メソッドの一覧を取得するには？
・メソッドチェーンの作り方
などの応用的な使い方に関しても解説していきます。
この記事で、JavaScriptの「メソッド」をしっかり学習して自分のスキルアップを目指しましょう！
「メソッド」とは？
まずは、「メソッド」について基本的な知識から学習を進めていきましょう！
JavaScriptにおける「メソッド」とは、普通の「関数」と同じなのですがオブジェクトの中に定義されるものを「メソッド」と呼んでいます。
一般的にオブジェクトの構造は次のようになっています。
var obj = {
//プロパティ : 値,
//プロパティ : 値,
//プロパティ : 値,
}
このように「プロパティ」と「値」の組み合わせになるのですが、この「値」の部分に関数を当てはめたのが「メソッド」と呼ばれるわけです。
var obj = {
//プロパティ : 値,
//プロパティ : 値,
//プロパティ : 関数 ←これがメソッド
}
そのため、関数を作ったことがあればメソッドについても同じように作れるはずです！
本記事では、このようなメソッドのさまざまな作り方や活用方法を具体的に解説していくので、一緒に頑張って学習をしていきましょう。
メソッドの使い方
メソッドの定義方法
それでは、まず最初に「メソッド」の定義方法を見ていきましょう！
先ほども少し解説しましたが、メソッドはオブジェクトの中に作られるので次のようなオブジェクトを用意しておきます。
var obj = {
//ここにメソッドを書いていく
}
そして、初めてのメソッド「showText()」を次のように定義してみましょう！
var obj = {
showText: function() {
console.log( 'Hello World' );
}
}
このように、プロパティが「showText」で「値」に関数（無名関数）を当てはめるだけでメソッドの完成です！
関数の中身は、console.log()で文字列を出力するだけのシンプルなメソッドになっているのが分かりますね。
メソッドの呼び出し方
次に、作成したメソッドを利用するために呼び出し方法を解説します。
と、言っても方法はとても簡単で、次の構文で実現します。
オブジェクト.メソッドのプロパティ()
元になるオブジェクトとメソッドのプロパティ名を「. (ドット)」で連結するだけで、作成したメソッドを呼び出す（実行）ことが可能です。
次のサンプル例を見てください！
var obj = {
showText: function() {
console.log( 'Hello World' );
}
}
obj.showText();
実行結果
Hello World
この例では、先ほど作成したメソッド「showText」を実行しているのが分かりますね。
オブジェクトが「obj」であり、メソッドのプロパティ名が「showText」になるので、「obj.showText()」と記述することで呼び出すことが出来るわけです！
メソッドに引数を指定する
メソッドは関数と同じなので、もちろん「引数」を取ることも可能です！
例えば、「name」という引数を取りたければ次のように書きます。
var obj = {
showText: function( name ) {
//「name」を利用した処理を書く
}
}
「function( name )」のように記述することで、その関数内で利用できる変数「name」を作成できるわけです。
そして、メソッドを呼び出すときに引数となる「値」を当てはめれば、意図した通りに動作することになるわけです。
次のサンプル例を見てください！
var obj = {
showText: function( name ) {
console.log( 'こんにちは、' + name + 'さん！' );
}
}
obj.showText('太郎');
実行結果
こんにちは、太郎さん！
この例では、メソッドの引数に「名前」を取るための「name」が設定されているのが分かります。
そのため、メソッドを呼び出すときに「showText(‘太郎’)」と記述することで、メソッド内では「名前」が格納された「name」を使って処理を行うことができます。
メソッドに戻り値を指定する
今度は、メソッドに「戻り値」を設定してみましょう！
「戻り値」を設定することで、何らかの処理を行ったあとに目的の結果を得られるようにすることができます。
方法は関数と同じですが、メソッド内に「return」を使って結果を返すだけです。
次のサンプル例を見てください！
var obj = {
showText: function( num ) {
var result = num * num;
//計算した結果を戻り値として返す
return result;
}
}
console.log( obj.showText(10) );
この例では、引数として数値を受け取ったあとに同じ数値を掛け算した結果を返すようにしています。
ポイントは、メソッド内の処理の一番最後に「return」を記述するという点です。
「return」の処理を行うと、それ以降の処理は実行されないので注意しましょう。
メソッドの一覧を取得するには？
ここからは、メソッドの応用的な使い方について触れていきましょう！
これまで「メソッド」はオブジェクトの中に記述すると説明してきましたが、実際のオブジェクトの中には多数のプロパティが存在しています。
そして、そのオブジェクトがどのようなメソッドを持っているのかを知るためには、プロパティの一覧をすべて取得する必要があるでしょう。
そこで、一覧を取得する方法を解説するために、まずは次のようなオブジェクトがあると想定してください。
var obj = {
name: '太郎',
age: 30,
address: '東京都新宿区',
getName: function() {
console.log( this.name );
return this;
},
getAge: function() {
console.log( this.age );
return this;
}
}
この例では、メソッドも含めて5つのプロパティを持っているオブジェクトを作成しています。（実際のオブジェクトはもっと多いですが…）
さて、このプロパティの一覧を取得するにはどうすれば良いでしょうか？
最も簡単で一般的なのは「for – in文」を利用することでしょう。
次のサンプル例を見てください！
for(var item in obj) {
console.log( item );
}
実行結果
name age address getName getAge
この例では、先ほど作成したオブジェクト「obj」をfor – in文でループ処理を実行しています。
このように記述することで、変数「item」には各プロパティが1つずつ格納されていくので、それをconsole.logで出力することができるというわけです。
しかし、このままだと通常のプロパティとメソッドが混在しているため、どれがメソッドなのか分からないのでもう少し工夫が必要になります。
メソッドが存在するかを調べるには？
さて、オブジェクトが持つプロパティの一覧を取得することは出来るようになりました。
その一覧の中から「メソッド」が存在するかどうかを調べるにはどうすれば良いでしょうか？
JavaScriptには「型」をチェックするための「typeof」という演算子があり、これを使うことでどのような型を持っているか分かります。
つまり、プロパティの一覧を1つずつチェックして「function型」を持っていれば、それがメソッドであるという意味になるわけです。
次のサンプル例を見てください！
for(var item in obj) {
if( typeof obj[item] === 'function' ) {
console.log( item );
}
}
実行結果
getName getAge
この例では、まず「typeof obj[item]」で型をチェックして、その型が「function」であればプロパティ名を出力するという条件分岐になっています。
このように記述することで、任意のオブジェクト内にメソッドが存在するかどうかをチェックすることが可能で、存在していたらそのプロパティ名を出力することが出来るわけです。
任意のメソッドが存在するかを調べる
次に、特定のメソッドがそのオブジェクトに存在するか調べてみましょう！
これも先ほどのロジックを利用すれば簡単ですね。
if( typeof obj.getAddress === 'function' ) {
console.log( '存在します' );
}
else {
console.log( '存在しません！');
}
実行結果
存在しません！
今回作成したオブジェクト「obj」は、「getName()」と「getAge()」の2つのメソッドを持っていましたよね。
この例で条件式に使っている「obj.getAddress()」というメソッドは持っていないので、最終的に存在しないということになり判定はfalseとなるわけです。
windowのメソッド一覧を取得してみる
これまで学んだ手法を活かして、グローバルオブジェクトである「window」オブジェクトのメソッド一覧を取得してみましょう！
次のサンプル例を見てください！
for(var item in window) {
if( typeof window[item] === 'function') {
console.log( item );
}
}
実行結果
stop open alert confirm prompt print requestAnimationFrame cancelAnimationFrame ・ ・ ・
これまでは自分で作成したオブジェクト「obj」を利用していましたが、今回はfor – in文にwindowオブジェクトを使っているのが分かりますね。
あとの流れはこれまでと一緒で、「typeof」を使って「型」をチェックして「function」であればプロパティ名を出力すればOKですね！
実行結果を見ると分かりますが、実際のWindowオブジェクトは非常にたくさんのメソッドを持っていることが分かります。
メソッドチェーンの作り方
最後に、「メソッドチェーン」についても触れておきましょう！
これは、さまざまな用途の関数（メソッド）を「. (ドット)」で連結させて次々と処理を実行することを指しています。
例えば、それぞれ用途の異なる「split()」「reverse()」「join()」という3つの関数でメソッドチェーンを試してみましょう！
var str = 'Hello';
//メソッドチェーンで繋いでいく
var result = str.split('').reverse().join('');
console.log( result );
実行結果
olleH
これは「split(”)」で文字列を1つずつに分割して配列にし、「reverse()」で配列の順番を反転させて「join(”)」で再び文字列に戻すという処理を連続で実行しています。
このように「. (ドット)」で複数の関数を連結できるのがメソッドチェーンの特徴であり、面白いところでもあります。
そこで、先ほど作成したメソッド「getName」「getAge」でも簡易的にチェーンできるように改造してみましょう！
var obj = {
name: '太郎',
age: 30,
getName: function() {
console.log( this. name );
return this;
},
getAge: function() {
console.log( this.age );
return this;
}
}
obj.getName().getAge();
実行結果
太郎 30
この例では、それぞれのメソッド内の最後に「return this」という記述を追記しています。
これにより、1つのメソッドが実行されたあとに「this」が返るので、オブジェクト自身が戻り値となりそこからさらに次のメソッドを実行するという意味になります。
簡単な例ですが、このようなチェーンによる実行ができるという点はJavaScriptの特徴なので覚えておくようにしましょう！
また、チェーンを作る際に重要な「this」についてもっと知識を深めたい方は、次の記事でさまざまなサンプル事例と一緒に分かりやすく解説しているので参考にしてみてください！
関数(function)の使い方総まとめ
関数の様々な使い方についてはこちらの記事で解説しているので、ぜひ確認してください。
まとめ
今回は、JavaScriptにおける「メソッド」についてさまざまな角度から学習をしました！
最後に、もう一度おさらいをしておきましょう！
・「メソッド」はオブジェクト内にプロパティの値として作成される
・「メソッド」は関数と同じく、引数・戻り値を指定できる
・「メソッド」の一覧を取得するには「typeof」演算子が有効である
・メソッドチェーンを作るには「this」を返すことが必要
上記内容を踏まえて、ぜひ自分でも積極的にプログラムへ取り入れて活用できるように頑張りましょう！
