JavaScriptでメソッドを使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【メソッド】を使う方法を解説した記事です。メソッドとは、オブジェクトのプロパティに代入された関数のことを言います。実際にプログラムを書きながら、どうやって使うのか説明していきます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでメソッドを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、あわせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
メソッドとは
メソッドとは、オブジェクトに関連付けられた関数のことを言います。
あるオブジェクトのプロパティに関数を定義した場合、関数と呼ばずに、そのオブジェクトのメソッドと呼びます。
つまりメソッドとは、オブジェクトとして定義したデータの専用の関数です。
では、なぜ関数ではなくメソッドにしたほうが良いかというと、分かりやすいプログラムになるからです。
オブジェクトとはその名の通り、プログラム上で「モノ」を表現します。
/* 信号機のオブジェクト */
var traffic_light = {
/* 信号機 状態の定義 */
blue: "go", yellow: "slow down", red: "stop",
/* 信号機 現在の状態データ */
current: " "
}
関数やメソッドは、プログラムで「動き」やふるまいを表現していますね。
/* 信号機の光る色を変える関数 */
function change_light(){
/* 現在の状態を変更する処理 */
}
この世の中では「モノ」と「動き」はセットになっていることが多いです。
| オブジェクト「モノ」 | メソッド「動き」 |
| 信号機 | 光る色が変わる |
| モンスター | 攻撃する |
| 車 | 走る |
| 合計金額 | 消費税を課税 |
プログラムで表現するときも、セットでまとまったほうが分かりやすいですね。
オブジェクトにメソッドとして処理を関連付けておくことで、オブジェクト専用の処理としてまとめます。
/* 信号機のオブジェクト */
var traffic_light = {
/* 信号機 状態の定義 */
blue: "go", yellow: "slow down", red: "stop",
/* 信号機 現在の状態データ */
current: " "
/* 信号機の光る色を変えるメソッド */
change_light: function (){
/* 現在の状態を変更する処理 */
}
}
オブジェクトとして整理してプログラムを分かりやすく書く考え方を、オブジェクト指向というんです。
言葉だけではわかりづらいですよね。
実際にプログラムを書きながらみていきましょう。
田島メンター！メソッドとは何でしょうか？関数とは違うんですか？
オブジェクトが持っている関数を特別にメソッドって言うんだよね。
前にJavaScriptのプロパティについて学びました。
そうそう。プロパティの中に値じゃなくて、関数を代入することができるんだよ。さっそく作り方を見てみよう！
メソッドを作ってみよう
下のプログラムでは、信号機のblue・yellow・redをもとにしたオブジェクトを生成し、traffic_lightという変数に入れています。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop"
}
</script>
</body>
</html>
ここにさらに、currentというプロパティも追加します。
currentには、信号機が今何色を示しているかが入ります。
（※current…今の、現在の）
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " "
}
</script>
信号機の色を変える関数をchange_lightと定義します。
そして、このcurrentの値をchange_lightというメソッド（関数）を呼び出すことで、変えていくということを考えます。
まずはメソッドのもとになる関数change_lightを定義しよう
上のプログラムに続けてfunctionを使い、いったん普通に関数change_lightを定義しましょう。
この信号機において、change_lightを呼ぶたびに、その時々のcurrentの中身に応じて、次に呼び出されるプロパティが決まるという挙動を考えてみます。
◆change_lightを、switch文を使って4つのパターンで設定します。
- currentに入っているプロパティがblueなら、次のプロパティをyellowに
- currentに入っているプロパティがyellowなら、次のプロパティをredに
- currentに入っているプロパティがredなら、次のプロパティをblueに
- デフォルトはblue
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " "
}
function change_light(){
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
</script>
ここまでできたら、いったんconsole.logでcurrentを呼び出して確認してみましょう。
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " "
}
function change_light(){
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
change_light();
console.log(traffic_light.current);
</script>
デフォルトのプロパティをblueに設定しているため、blueの値であるgoが出力されますね。
console.logでの呼び出しを、さらに3回繰り返します。
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " "
}
function change_light(){
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
change_light();
console.log(traffic_light.current);
change_light();
console.log(traffic_light.current);
change_light();
console.log(traffic_light.current);
change_light();
console.log(traffic_light.current);
</script>
currentが デフォルトblue → yellow → red → blue と変化するのに伴い、値もgo → slow down → stop → go と出力されました。
関数change_lightをtraffic_lightのメソッドにしよう
では、ここまでで定義した関数change_lightを、オブジェクトtraffic_lightのプロパティに、メソッドとして設定します。
どうするかというと、current: ” “のあとにプロパティ名change_lightを設定し、「:」で区切ったら、function以下の関数をそのまま値にもってきます。
（このとき、functionに続く関数名change_lightは重複するので消しましょう）
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " ",
change_light:function(){
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
}
</script>
これで、change_lightというメソッドを、traffic_lightオブジェクトは持つことになります。
同じようにconsoe.logで呼び出してみましょう。
ここでは一気に4回呼び出します。
オブジェクト内の各プロパティを呼び出す場合、変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができましたね。
よって、変数traffic_lightに入っているオブジェクト内のメソッド（プロパティ）を呼び出したい場合、以下のようになります。
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " ",
change_light:function() {
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
}
traffic_light.change_light();
console.log(traffic_light.current);
traffic_light.change_light();
console.log(traffic_light.current);
traffic_light.change_light();
console.log(traffic_light.current);
traffic_light.change_light();
console.log(traffic_light.current);
</script>
出力してみます。
結果は変わりませんね。
関数change_lightがtraffic_lightというオブジェクトのメソッドになっただけなので、もちろん挙動は変わりません。
しかし、プログラムが全体的にすっきりしたのがおわかりいただけると思います。
必要に応じて使ってみてください。
まとめ
いかがだったでしょうか。
メソッドを使うことで、データとふるまいのつながりが分かりやすくなりました。
チームで開発する現場では、分担して作業したり、自分で書いたプログラムを別人がバージョンアップしたりします。
理解しやすいプログラムを書くことは、完成させることの次に大事、と言っても過言ではありません。
ぜひメソッドやオブジェクト指向を取り入れ、分かりやすいプログラムを目指してくださいね。
JavaScriptでメソッドを使う方法については以上です。
JavaScriptのオブジェクトを使う方法の記事もあわせてご覧ください。
traffic_lightの後にドット(.)を書いて、プロパティの値や関数にアクセスできるんですね。
そうそう。traffic_lightという変数(オブジェクト)の中にプロパティとメソッドがある形になってるよね。
変数なのかオブジェクトなのか、わかりづらいですね。
入っている中身によって変わってしまうんだよね。変数にも見えるけど、オブジェクトが入っているのでtraffic_lightは、オブジェクトを操作するハンドルみたいな感じになってるんだ。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
