JavaScriptでメソッドを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【メソッド】を使う方法を解説した記事です。メソッドとは、オブジェクトのプロパティに代入された関数のことを言います。実際にプログラムを書きながら、どうやって使うのか説明していきます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでメソッドを使う方法について解説します。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

目次

 

 

メソッドとは

メソッドとは、オブジェクトのプロパティに代入された関数のことを言います。

あるオブジェクトのプロパティに関数を定義した場合、関数と呼ばずに、そのオブジェクトのメソッドと呼びます。

プロパティとは、あらかじめ設定しておいた特定の情報(値)に、名前(プロパティ名)をつけたものです。そのプロパティのなかでも、関数を特に「メソッド」と言います。

 

言葉だけではわかりづらいですよね。実際にプログラムを書きながらみていきましょう。

 

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メソッドを作ってみよう

下のプログラムでは、信号機の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が出力されますね。

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 と出力されました。

4

 

 

 

関数change_lightをtraffic_lightのメソッドにしよう

では、ここまでで定義した関数change_lightを、オブジェクトtraffic_lightのプロパティに、メソッドとして設定します。

どうするかというと、current: ” “のあとにプロパティ名change_lightを設定し、「:」で区切ったら、function以下の関数をそのまま値にもってきます。(このとき、fanctionに続く関数名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というメソッドを、teaffic_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>

 

出力してみます。

4-1

 

結果は変わりませんね。

関数change_lightがtraffic_lightというオブジェクトのメソッドになっただけなので、もちろん挙動は変わりません

しかし、プログラムが全体的にすっきりしたのがおわかりいただけると思います。必要に応じて使ってみてください。

 

JavaScriptでメソッドを使う方法については以上です。

JavaScriptのオブジェクトを使う方法の記事も合わせてご覧ください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。