例を見て学ぶ「JavaScriptのClass構文」【SAKUSAKU -Web制作のTipsおつまみブログ-】

こんにちは。佐藤です。
本日のお話は
スケジュール一覧などを表示させたい時に使うカレンダーのパーツのTipsです。

このTipsを通してJavaScriptのClassの概念を少しでも学んでもらえたら幸いです。
「JavascriptをUIベースで使う分には問題ないけど
プログラミング言語として使うのにはまだよくわからない」という方のヒントになればこの記事の価値となるでしょう。

目次　想定読了時間3分

• サンプルコード
• 解説
• 最後に

サンプルコード

概要：当月をデフォルトの値として、「翌月」「前月」ボタンを押すことで自由に年月を移動できる

解説

classについて

Classとはオブジェクト指向のプログラミング言語で用いられる概念です。
JavaScriptにかぎらず、Java・PHP・Pythonなどの言語でも使われます。

このClassは２つに大別できるのですが、今回は主旨からずれてしまうので割愛します。
詳しくはクラスベースとプロトタイプベースのオブジェクト指向プログラミングについて調べてみてください。

さて、JavaScriptでいうClassとは関数の一種です。
元々はClassという概念はなく、関数で疑似的に再現された歴史もあります。

JavaScriptのClassには主に３つの情報があります：
1.構造
2.状態
3.動作

構造について

JavascriptのClass構文では後に説明する状態と動作をセットで持つように「構造」を定義できます。
構文としては

class クラス名 {
  constructor() {
    // デフォルトの状態を表します
    this.状態1 = "SAMPLE01";
    this.状態2 = "SAMPLE02";
  }

  動作1() {
    // 動作の処理を書きます
  }

  動作2() {
    // 動作の処理を書きます
  }
}

状態について

そもそも状態といわれてもよく分からないですよね。
Classについての話でよくでてくるのが、
アニマルクラスを定義して、
その内容を継承させた犬クラスや猫クラスを宣言する、といった内容です。

説明やイメージとしては掴めるかもですが、実用性としては薄いです。

よって、今回はサンプルで用意したカレンダーで説明します。

ずばり、カレンダーの中での「状態」とは「いま何年の何月なのか」といった情報を示します。

ん？それって「変数」でもっていればいいんじゃないの？と思った方、
よく勉強されていると思います。

var today = new Date();
var thisYear = today.getFullYear();
var thisMonth = today.getMonth() + 1;

console.log(`今年 ${thisYear} / 今月 ${thisMonth}`);

上記のように変数を使うことで「今年と今月」を用意することができます。
このまま、来月や先月を計算させることは可能です。

var today = new Date();
var thisYear = today.getFullYear();
var thisMonth = today.getMonth() + 1;

console.log(`今年 ${thisYear} / 今月 ${thisMonth}`);

var nextYear,nextMonth;
if ( thisMonth === 12 ) {
  nextMonth = 1;
  nextYear = thisYear + 1;
} else {
  nextMonth = thisMonth; 
  nextYear = thisYear;
}

console.log(`来月 ${nextYear}年${nextMonth}月`);

しかし、この方法では「いま、何年何月なのか」という状態は記録されていませんので
「来月にいった後、また今月に戻す」といった処理を実現するためにはいちいち、JavaScriptの処理を記述していかなければいけません。

Class構文を使うことで
「いま何年何月なのか」を記録しておくことによって、
毎回初期値を設定して、計算させる必要がなくなるのです。

動作について

動作は、今回のケースでは「翌月」「前月」を計算する処理のことを指します。
「今何年何月か」を記録しておけば、何年何月であろうと「翌月」「前月」の計算方法は変わらないですよね。

こういった「状態」に対する動作は「メソッド」と呼ばれます。
上記ではしれっと書きましたが
カレンダーの時には、月の計算は単に＋１するだけではなく、「１２月だったら１月に戻る」という条件分岐の処理も忘れないようにしましょう。

メソッドの具体的な書き方はサンプルコードからピックアップします。

class Calendar {
  constructor() {
    let today = new Date();
    this.year = today.getFullYear();
    this.month = `0${today.getMonth() + 1}`.slice(-2);
  }

  prevMonth() {
    if (Number(this.month) === 1) {
      this.month = `12`;
      this.year += -1;
    } else {
      this.month = `0${Number(this.month) - 1}`.slice(-2);
    }
  }

  nextMonth() {
    if (Number(this.month) === 12) {
      this.month = `01`;
      this.year += 1;
    } else {
      this.month = `0${Number(this.month) + 1}`.slice(-2);
    }
  }
}

さいごに

さて、いかがだったでしょうか。
正直サンプルコードが全てを語っておりますので
クラスについてよくわからないけど、実現したいことがある場合は
サンプルをコピペして必要な処理に書き換えてもらえれば充分です。

「this」って何？とか
調べていると「インスタンス」という言葉が出てくるんだけど？とか
そういった疑問が出ていたら是非参考リンクを読み進めてください。

今回はクラスって何に使うの？という疑問への一つの実例として出しました。
参考になれば幸いです。

それでは！

参考リンク

• JavaScript Primer
• MDN