【JavaScript】クラスメソッドを定義する【コード付き】

どうも、つよぽんです！

今回は、「JavaScriptのクラスでクラスメソッドを定義する方法」について解説していきます。

今回の記事は次のような方に向けて書きました。

想定読者

オブジェクト指向がどういうものかざっくりとでもイメージが付いている
JavaScriptでクラス・インスタンスを作成できる

上記2点について以前書いた記事「【スライド解説付き】オブジェクト指向とは【概念を理解する】」、「JavaScriptでクラスとインスタンスを作る【基本・入門】」で解説しました。

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた

JavaScriptのクラスにクラスメソッドを定義できるようになる

今回の記事の内容は以下の解説記事でも使っているスライドの内容をさらに詳しく解説したものとなります。

クラスメソッドとは？

クラスメソッドは、その名前の通り「クラスのメソッド」のことです。

クラスメソッドと似たようなもので「インスタンスメソッド」というものがあり、こちらは以前書いた記事「【JavaScript】インスタンスメソッドを定義する【コード付き】」で解説しました。(「メソッド」についての解説もしております。)

クラスメソッドはインスタンスに依存しない機能を実装するのに利用できる

「クラスメソッド」も「インスタンスメソッド」も、どちらもそのクラス、またはそのクラスから生成されたインスタンスで共通して使われる機能になりますが、両者の違いはなんでしょうか？

クラスメソッドとインスタンスメソッドの違いを表すと次のようになります。

クラスメソッド : インスタンス固有の情報に依存しない機能を実装するに使える
インスタンスメソッド : インスタンス固有の情報に依存する機能を実装するのに使える

つまり、インスタンスのプロパティに「依存する」か「依存しない」かの違いです。

具体例

クラスメソッドとインスタンスメソッドの違いをイメージつけやすくするために、ここでは「ある1種類の車」を例に解説します。

インスタンスメソッドの場合

車は、1台1台固有の情報を持っています。例えば「ナンバープレートの番号」や「車の色」などです。

これらの情報をメソッド経由で取得する場合は「getNumber」「getColor」というメソッド名がつけられて、これらのメソッドは特定の1台の車の情報に依存していると言えます。(ナンバーや色は1台1台異なるため)

クラスメソッドの場合

それに対して、その1種類の車を作った会社はどの車も同じです。(トヨタなど)

車を作った会社名を取得したい場合は「getCorpName」のようなメソッド名を付けられて、その種類の車全体で共通した情報になるので、1台1台固有の情報に依存していません。

JavaScriptでのクラスメソッドの書き方・実行方法

クラスメソッドの書き方

クラスメソッドの書き方は、インスタンスメソッドの書き方とほとんど同じです。

インスタンスメソッドの書き方との違いは、クラスメソッドの場合はメソッド定義の先頭に「static」キーワードをセットするという部分だけです。

クラスメソッド名もインスタンスメソッド名と同じく、慣例的に「ローワーキャメルケース」で記述します。

以下の画像にクラスメソッドの書き方をまとめたので参考にしていただけたらと思います。

クラスメソッドの書き方

クラスメソッドの実行方法

先程の画像の一番最後の行でも記述していますが、「クラス名.クラスメソッド名()」で実行できます。

つまり、先程の画像では「Car」がクラス名になり、「getCorpName」がクラスメソッド名になるので、「Car.getCorpName()」で実行できます。

インスタンスメソッドの実行の場合は「インスタンス変数名.インスタンスメソッド名()」で実行します。

JavaScriptのクラスメソッドの使用例(サンプルコード付き)

クラスメソッドを定義して、定義したメソッドを利用するサンプルコードを以下の画像に用意しました。(画像をクリックすると別タブで画像が開きます)

クラスメソッドの挙動を確認するサンプルコード

上の画像のサンプルコードは以下のリンクから直接確認できます。

クラスメソッドの挙動を確認

上のサンプルコードの内容をマネして書くでも構わないので、クラスメソッドの書き方を定着させるために、一度自分の手で「クラスメソッドの定義・実行」をすることをオススメします。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ

クラスメソッドはインスタンス固有の情報に依存しないメソッドのこと
クラスメソッドはメソッド定義の先頭に「static」キーワードをセットする
「クラス名.クラスメソッド名()」の形式でクラスメソッドを実行できる

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

誰向けのプラン？

こちらのプランは次のような方に向けて作られています。

プラン対象者

Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
Webエンジニアになるまでの学習プランがあると助かる
学習していてわからないところが出てきたときに質問したい
コードレビューして欲しい
オンライン講義に参加したい
学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
おすすめの学習教材を知りたい
Webフロントエンド・バックエンドを学習したい
フルスタックエンジニアになりたい
文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
将来フリーランスになることを目指している

プラン内容は？

『【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容

Web白熱教室の学習コンテンツをメインに、指定した教材を使って学習する (学習プランに沿って学習を進めていただきます。)
学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
プラン契約者が参加するSlackグループにて質問し放題
Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)
不定期で行うオフラインでの勉強会に参加(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)

その他注意点

１人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

プラン契約者数が35人に達したら値上げする予定です

現在の値段は10000円です。

つまり、「月の飲み会3回くらいの金額」となります。

飲み会に行く代わりに、学習時間を優先すると考えれば自己投資としてはだいぶリーズナブルかと思います。

「1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。

1日330円で手に入る環境

コードを添削してもらえる
学習したことのアウトプットに対してフィードバックしてもらえる
いつでも質問出来る
週1のオンライン講義に参加できる
過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)

ただ、プラン契約者数が35人に達したら15000円に値上げする予定です。
(2019年2月21日現在のプラン契約者数は30人)

値上げする理由は次のとおりです。

値上げ理由

このプランを始めた当初(2018年9月)と比べて、学習コンテンツ(スライド・課題・動画)が充実してきた
このプランに参加していただいているメンティーさんの中から、「Web未経験から学習を初めて2～3ヵ月くらいで案件獲得までこぎつけることができた」という実績ができた
学習サポート(コードレビューや質疑応答など)を1人で行っており、人数が増えすぎるとサポートに支障が出てくるため、値上げという形で参加ハードルをあげた
(人数を制限することによりサポートの質を維持するため)

今後も契約者が増えたり、学習コンテンツがさらに充実していった場合は段階的に料金改定させていただく予定です。