スポンサーリンク

【JavaScript】class構文の活用方法を解説【get・set・static構文】

javascript
「javaScriptの『クラス構文』ってよくわからない!どうやって使えばいいの?

という方向けのご紹介です。

執筆者

独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

『クラス構文』の活用方法

クラス構文は、変数や定数をよりシンプルに活用するための機能です。
基本的な使い方はこちらでご紹介しております。
class構文の使い方が驚くほどわかる!【オブジェクト指向】

基本的な使い方に少しだけコツを覚えるだけでコードをより簡単に見やすくすることができます。

3つの構文を(get・set・static)覚えよう!

今回、覚えやすい上に即効性が高く、少し触れるだけでも大きなメリットがある3つの方法をご紹介します。

get構文・set構文・static構文の3つです。

「クラス構文の使い方がピンとこない…!」

という方の一助になればと思います。

ここでは初学者でも分かりやすいようにサンプルコードと一緒に解説しております。
コピペだけで使えるコードも載せております。是非、ご活用下さい。

get構文の使い方

まず、get構文です。
名前の通り値を取得する為のものですが、ここでは

クラスで設定した値を戻り値として使用できると理解いただくとよいと思います。

こちらサンプルコードになります。赤いボタンをクリックしてみてください。

通常、クラスで設定した値を使用する場合

①インスタンス化する
②インスタンス + プロパティ名で呼び出す
の手順が必要です。以下のような流れですね。
class tensai{
  constructor(info){
    this.info = info;
  }
}
/////
var otani = new tensai(["大谷翔平","野球選手"])
/////
named.textContent = otani.info[0]//"大谷翔平"
named.textContent = otani.info[1]//"野球選手"

この方法、基本に忠実で良い方法です。
ただ、呼び出す度たび「otani.info[1]」と必ずインスタンス名をつける必要があり、コード量が増えた時にミスの原因になりやすいデメリットもあります。

get構文を使うと、このデメリットを軽減することができます。

get構文の活用

実際のget構文を見てみましょう。

class tensai{
 constructor(info){
  this.info = info;
 }
 get getName(){
  return this.info; 
 }
}

「return this.info」、つまり戻り値を取得するということです。
具体的な文字列・数値が戻ってきますので、これは変数に格納できます。

var otani = new tensai(["大谷翔平","野球選手"])
var tensaiName = otani.getName[0]//"大谷翔平"
var tensaiJob = otani.getName[1]//"野球選手"

「tensaiName」「tensaiJob」のように戻ってきた値を格納することができます。
これなら、毎回わざわざインスタンス名から呼び出す必要が無くなり、コードをより分かりやすく簡潔にすることができます。

set構文の使い方

続いてset構文
こちらはインスタンス化で初期化した数値を再設定することができます。

元々、大谷翔平のデータが入っていたクラスですが、藤井聡太のデータに再設定したいと考えました。

通常、再度インスタンス化したり、別のクラスをわざわざ作成する必要がありますが
set構文を使えばこれを省略できます。

set構文の活用

こちらがset構文を含んだクラス情報です。

class tensai{
  constructor(info){
    this.info = info
  }
  get getName(){
    return this.info 
  }
  set setName(info){
    this.info = info
  }
}

set構文ではメソッドを指定します。今回はsetName(info)ですね。
ここに藤井壮太の情報を渡します。

var otani = new tensai(["大谷翔平","野球選手"])
otani.setName = ["藤井聡太","棋士"]
var hugii = otani.getName

setNameで必要な情報を入れて、getNameで変数に格納するという流れです。

使い方をまとめるとこちら

〇〇 setName = △△
var(let) □□ = 〇〇.getName

これで、大谷翔平⇒藤井壮太の情報に更新した変数を作成できます。
値が変わるたびにインスタンス化をやり直す必要がなくなりますので、作業がグッと楽になります。

static構文の使い方

最後に、static構文です。staticとは変化しないを意味する英単語
こちらはインスタンス化しなくても値を取得することができるメソッドです。

ボタンクリックで藤井壮太の情報が表示されるようにしております。
詳しい使い方を見てみましょう。

static構文の活用

通常、staticは下記のよう、クラスの中にメソッドとして設定することができます。

static syokai(){
 return ["藤井聡太","将棋指し"]
}

newを使ってインスタンス化して値を変数に入れて出力して…
という手間をこれだけで省略できます。

change.textContent = tensai.syokai()[0] //藤井壮太
////////////////////
named.textContent = tensai.syokai()[1] //将棋指し

前後は省略しますが、tensai.syokai()[0]だけで設定した値を出力することができます。

「クラスの値を出力したいだけなんだけどなぁ…」

という場合に是非ご活用ください。

まとめ

最後に、クラス構文を使うパターンをまとめておきます。

・get構文:クラスの値を変数に格納したい
・set構文:クラスの値を途中で変更したい
・static構文:インスタンス化するのがめんどくさい

以上となります。

クラス構文はjavaScriptを使用する上で大変便利な機能です。
最初は少し難しいですが、当記事が理解の助けになれば幸いです。

また、当サイトでは初学者向けにゲームの作り方を紹介しております。

【JavaScript】リバーシ(オセロ)の作り方を初学者向けに1行づつ解説!①【ゲーム】

ゲームを作るのはとても勉強になりますし、モチベーション維持にもつながります。
興味があればご活用ください。