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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

この記事を書いた人

テックアカデミーマガジン編集部

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

今回は、JavaScriptでメソッドを使う方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

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

 

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

目次

1時間でできる無料体験!

そもそも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が出力されますね。

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以下の関数をそのまま値にもってきます。

(このとき、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>

 

出力してみます。

4-1

 

結果は変わりませんね。

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

しかし、プログラムが全体的にすっきりしたのがおわかりいただけると思います。

必要に応じて使ってみてください。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

まとめ

いかがだったでしょうか。

メソッドを使うことで、データとふるまいのつながりが分かりやすくなりました。

 

チームで開発する現場では、分担して作業したり、自分で書いたプログラムを別人がバージョンアップしたりします。

理解しやすいプログラムを書くことは、完成させることの次に大事、と言っても過言ではありません。

 

ぜひメソッドやオブジェクト指向を取り入れ、分かりやすいプログラムを目指してくださいね。

 

 

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

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

 

大石ゆかり

traffic_lightの後にドット(.)を書いて、プロパティの値や関数にアクセスできるんですね。

田島悠介

そうそう。traffic_lightという変数(オブジェクト)の中にプロパティとメソッドがある形になってるよね。

大石ゆかり

変数なのかオブジェクトなのか、わかりづらいですね。

田島悠介

入っている中身によって変わってしまうんだよね。変数にも見えるけど、オブジェクトが入っているのでtraffic_lightは、オブジェクトを操作するハンドルみたいな感じになってるんだ。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する