【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内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)
不定期で行うオフラインでの勉強会に参加(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)

プランの学習コンテンツ・課題を全て終えたあと、何が身につくか

全ての学習コンテンツと課題を終えて、さらに最終課題を終えた後のオススメの学習と追加課題までクリアした際には、あなたは次にような状態になっています。

プランを終えた後のあなた

Webのフロントエンドとバックエンドの基本を身につけて、自分で作りたいWebサービスを1人で作れるようになる
最終課題と、最終課題後にオススメしている追加課題をクリアした際には、それをそのままポートフォリオとして使えるまえ、そのまま就職活動・転職活動に活用できる
学習コンテンツと課題を進めるほどに難易度があがってくるため、必然的にドキュメントを読む必要も出てきて、自己解決力が自然と身につく
最終課題では「Git Flow」の手法で開発を進めるため、自然とチーム開発の基本スキルを身につけることができる
テストコードを書くスキルが身につく（開発の現場ではアプリの動作を保証するためにテストを書くことが重要で、就職活動・転職活動のときにテストが書けることがアピールできるとかなり良い印象を持たれる）
課題のコードレビューでは「GitHub」の「プルリクエスト」を使ってレビューを行っており、これはチーム開発の現場でも同じ方法でのレビュースタイルになるため、開発の現場に入ったとしてもすぐにコードレビューの制度に馴染める
課題をこなして、コードレビューの依頼を繰り返すことで、自然と開発に必要な最低限の「Git」「GitHub」のスキルを身につけることができる

プラン受講者のレビュー

ありがたいことに、このプランを受講していただいているメンティーさんから高評価と嬉しいレビューをいただけております。

以下のコメントは、これまで頂いたレビューコメントになります。(以下のレビューは一部で、全てのレビューはこちらのページからご確認いただけます。)

『【やる気満々な方向け】未経験からのWebエンジニア育成コース』にて、HTMLの基礎から始めていったんJavaScriptバックエンドの学習を終えましたのでレビューさせていただきます^^

学習コンテンツが充実していて、しかも最新のJavaScriptにマッチしているのでとても勉強になります。

また質問に対するレスポンスも早く、かつ丁寧に詳しく教えていただけるので、疑問に思ったところはもれなく解決できました。

今はJSのライブラリであるReact.jsをUdemyにて学習中ですが、つよぽんさんのところで勉強を一通り教えていただいていたおかげですんなり理解できてかなり助かっています。

ちなみにつよぽんさんも現在React.jsの教材をアップ中なので、しばらくしたらReact.jsの勉強もつよぽんさんの学習コンテンツ一本で学べるようになると思います^^

学習サイトがわかりやすく、実際にコードを書いて学べるのでスキルアップに繋がりました！
IT未経験ですが、ITサポート事務の仕事が決まり、簡単なプログラミングは任せて貰えるようになりました！
ありがとうございました^^*

お世話になって1ヶ月ほど経ちますが、コードレビューや質問対応などがとても丁寧で、とても助かっています。
また独自コンテンツやエクササイズなどもわかりやすく、勉強を進めやすいです。

初心者の私にでもとても丁寧に粘り強く
教えて頂けました。テキストや動画など見ながら
進めれましたし、質問にもすぐに回答いただけました。
ありがとうございました！

レスポンが早く、適切でとても助かりました。オリジナルコンテンツも充実しており、自分で調べてどうしても分からないところはメンターさんが教えてくださるので、プログラミング初心者の方には特におすすめです。

まだ始めたばかりですが、レビューや質問対応がとても早く丁寧でありがたいです。
ロードマップも用意されているので独学ではわからなかった学習手順がはっきりし、どのように勉強すればいいかが理解できました。

学習方法について、親身に相談に乗っていただき感謝しております。
現役エンジニアの立場から的確なアドバイスをいただき大変参考になりました。

まだメンターになって頂いてまだ間もないですが、とても感謝してます。この値段で申し訳なくなるレベルです。
・対応が丁寧。
→コードレビューでは細かい所まで指摘してくれる
→質問に対しては詳細な説明やレファレンスをつけて返信してくれる
・レスポンスが早い。
→遅くなるとしても前もって連絡してくれる
・学習の進め方や教材などもサポートしてくれる
・質問でなくても、学習状況などを報告するとフィードバックを返してくれる

その他、ペアプロや週一のオンライン会議での講義などもあり、かなりサポートも手厚いです。
特に、勉強したいけど何から始めればいいか分からないという方にオススメです。

未経験からWebエンジニアに内定・案件獲得した受講者のアウトプット

このプランで提供している学習コンテンツの最終課題をクリアしたメンティーさんに対して、ReactやVueの学習をオススメしており、React・Vueのコードレビューも行っております。

以下のコメントは、最終課題をクリアしたあとにVueを学習して、「未経験からWebのフロントエンジニアの内定獲得」「未経験から案件獲得」を達成したメンティーさんのアウトプットです。

【進捗報告】
つよぽんさんにメンターになっていただき、この度Webエンジニア(フロント)として未経験から内定をいただく事ができました！
つよぽんさんから聞かれた事を中心に情報を共有したいと思います。

フロントエンド、バックエンドのスキルセット
-フロントエンド
HTML/CSS、JavaScript、Vue.js、Vuex、axios、Jest
-バックエンド
Node.js、express、MySQL、Sequelize、Mocha

面接時に見せたポートフォリオ
Vue.jsを使った簡単な自己紹介ページ、Web白熱教室のバックエンド最終課題にVue.jsを使って実装したフロントを連携し作成したTodoアプリ、この2つをポートフォリオとして転職活動をしました。Todoアプリは上のスキルセットにある技術を使用して作成しました。

面接時に良い印象を持っていただいた内容
・フロントとバックエンドの両方を学習している事
これは技術的な質問でWebの仕組みについての質問が結構あったので、両方学習してお
いて良かったなと感じました。
・技術に興味があると感じてもらえた事
最後の質問でなるべく自分の興味がある技術や自分がやってみたい事を伝えてアドバイ
スをもらったり、質問すると良い印象を持ってもらえました。

転職活動で感じた事
今回の転職活動で、ポートフォリオがいかに大事かというのを身を持って実感しました。ポートフォリオがないとそもそも面接しないという所が多かった印象です。ポートフォリオのレベルは高い方が良いとは思うのですが、しっかりアウトプットできている事が大事だと感じました。自分のポートフォリオもレベルは低かったので。

簡単にですが、まとめさせていただきました！
面接での質問内容など気になった事があれば、共有できればと思っているので、なんでも気軽にお聞きください。

進捗報告というか、現在どんなことやっているか報告しておきます!!

①
Vue＋Laravelの案件を獲得することができました!!
元々副業ができるようになるを目標にしていたので、とりあえず目標達成です。
Laravelは完全独学で、ここでjsの基礎を学習した後にPHPの基礎から学習しました。
ですので、未経験から学習を初めて2～3ヵ月くらいで案件獲得までこぎつけることができたので、皆様の励みになればと思います。

②
会社で簡単なWebアプリを作って提案しました。自社装置のレイアウトを提案してくれるアプリです。expressとVueを使ってます。

もちろんVueを選択するメンティーさんだけなく、Reactを選択するメンティーさんもいらっしゃいます。

Reactを選択したメンティーさんの現在の状況としては以下のとおりです。

新卒でWebエンジニアとして働き、1年目から希望する部署で働けている
プログラミングの基礎力、自己解決力・自走力を身につけ、FlutterやTypeScriptの学習も独学で進められている

1日1回カフェでコーヒー1杯頼むくらいの金額で参加できます

「1日1回、カフェでスイーツ・ドリンクセットを注文するくらいの値段(約700円)」で以下の環境が手に入るとイメージして頂けたらと思います。

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

学習教材には、このサイトで用意している「【学習コンテンツ】Web開発」を使います。

「【学習コンテンツ】Web開発」を使って学習を進めることで、Webのフロントエンドとバックエンドのスキルを身につけていくことができます。

プログラミングスクールとの比較

プログラミングスクールに通う場合は1ヶ月で10万円以上するところも多いですし、3ヶ月で50万円、更には100万円するところもあります。

プログラミングスクールの値段が高い理由は、「プログラミングスクールで働いている人の人件費」「就職のサポート」なども含まれているからです。

「10万円・50万円・100万円」のいずれの場合も、自己投資とはいえ、支払うのにはだいぶ勇気がいる金額かと思います。

オススメの学習方法

個人的にオススメするのは、プログラミングのできるメンター(師匠)を見つけて、まずは1ヶ月プログラミング学習をしてみて、自分にプログラミングが向いているかどうか確かめてみることです。

「10万円・50万円・100万円」を払って、学習していく中で「やっぱり自分にはプログラミングは向いてない」と判断した場合、その金額はかなりの痛手となります。

そのため、まずは「これくらいの金額なら最悪失っても痛くないな」の値段で教えてくれるメンターを見つけて、そのメンターに色々と質問をしてみましょう。

それで、「良さそうだな」と思ったら教えてもらうといった流れで学習を始めると、金額もだいぶ節約できます。

注意点

ただし、参加者が増えてきたら、1人1人へのサポートの質を維持するのが難しくなるので、値上げする可能性もあります。

値上げする理由は次の以下の理由となります。

値段を上げて参加ハードルをあげることで、自己解決スキルも身につけたいと考えている学習意欲の高い人だけが参加するようになる
- 調べたらすぐにわかることを、自分で調べずに何でもかんでも質問すると、自己解決スキルも身につかない
- 更に、他のメンティーさんの対応する時間が取れなくなりサポートの質の低下にも繋がる

また、僕1人がコードレビューや質問への対応を行っているため、物理的に対応が厳しくなった場合はその時点で募集を打ち切ります。

つまり人数制限があります。