MD-Blog_Web Creative

最初に

こんにちは、MDのマークアップエンジニアAYUです。
皆さんはGitHubが発表した「Top languages over the years」はご存じですか？
このランキングでは、トッププログラミング言語で「JavaScript」が1位を獲得していました。
現在JavaScriptでは「DOM・データ抽出」以外にも「CG・アニメーション・ゲーム」など使用幅が広く使用されています。また「Vue.js・React」などといったフレームワークも人気です。

そんな注目されているJavaScriptは「ES2015のバージョンの登場」と「TypeScript」により記述が大きく変化をしました。
今回は「ES2015以前の代表的なオブジェクト指向」、「ES2015とTypeScriptでのクラス命令」について、私の学び直しを兼ねてまとめています。
これから「class命令」や「function命令との違いは何かな？」と学ばれている方がいたらお力になれると嬉しいです。

JavaScriptの命令の種類

JavaScriptの命令には「function命令・class命令」の種類があります。
ES2015以前は、関数をfunctionコンストラクターで定義して「function命令」を行っていました。
しかしES2015以後はclass命令によるオブジェクト指向命令の様な記述も使われる様になり、現在ではclass命令で記述することが推奨されています。

JavaScriptのclass命令

ES2015以前

ES2015以前でオブジェクト指向で書く際はclass命令は使用できません。しかし「プロトタイプ(雛形)」を使用したオブジェクト指向構文で実現しています。 下記は、プロトタイプベースに記述したシンプルなソースコードです。

var Monsters = function(color, face)  {
 this.color = color;
 this.face = face;
};

var monster = new Monsters('blue','cute');

monster.getMonster = function() {
 return 'モンスターは' + this.face + 'で' + this.color + 'だ!';
}

console.log(monster.getMonster());
alert(monster.getMonster());

ES2015

class命令では「コンストラクター・メソッド・プロパティ」を使用して記述します。
下記は、class命令ベースに記述したシンプルなソースコードです。
class命令の特徴は「strictモードになること・class名の最初は大文字」があります。自動でstrictモードになるのでより安全にソースコードを記述することができます。

class Monsters {
  constructor(color,face) {
    this.color = color
    this.face = face
  }

  getMonster() {
    return 'モンスターは' +  this.color + 'で' + this.face 
  }
}

let monster = new Monsters('blue','cute')
console.log(monster.getMonster())
alert(monster.getMonster())

⇒ プロパティ

「プロパティ」とは、オブジェクトの個々のデータです。プロパティには「文字・数字・関数」を格納することができます。

⇒ メソッド

「メソッド」とは、「関数」を格納した「プロパティ」です。

⇒ コンストラクター

「コンストラクター」とは、オブジェクトを初期化できるメソッドです。厳密には、オブジェクトには同名のメソッドが初めから機能しています。そのため「コンストラクター」といったり「初期化メソッド」とも言われます。

class命令の注意

⇒ アクセス修飾子

アクセス修飾子とは「private・public」というものです。これらは、JavaやC#などで用いられます。しかし、残念ながらJavaScriptはこれら機能を利用することができません。
ですが、TypeScriptではこれらを使用することが可能です。詳細については後述しているのでご覧ください。

⇒ function命令と同じではない

function命令とは異なりclass命令では「インスタンスを作成しないと呼び出せない・定義前のクラスを呼び出せない」といった点があります。

TypeScript

TypeScriptのclass命令

TypeScriptでもJavaScriptと同様にclass命令を使用することが可能です。
特にTypeScriptではclass命令を使用する上で、JavaScriptの際に触れた「アクセス修飾子」を使用することができます。

TypeScriptとJavaScriptのclass命令の違い

TypeScriptのclass命令はJavaScriptと同じく使用できます。そして使用できる機能はJavaScript以上に多くて記事では紹介できないほどの機能があります。記事では、よりJavaScriptと異なるclass命令について紹介します。

⇒ 型アノテーション

TypeScriptにはJavaScriptには機能がなう「型のアノテーション」が可能です。 やり方は大きく2点「リスト化して型付けする・型推論できるような初期値を与える」方法があります。

リスト化して型付けする

class Monsters {
    color: string
    face: string
    constructor() {
        this.color = 'blue'
        this.face = 'cute'
        this.configure()
    }

    private callMonster() {
        console.log('モンスターは' + this.color + 'で' + this.face + 'だ');
    }

    configure() {
        this.callMonster()
    }
}

const monsters= new Monsters()

型推論できるような初期値を与える

​​class Monsters { 
    color = 'blue'
    face = 'cute'
    constructor() {
        // this.color = ''
        // this.face = ''
        this.configure()
    }

    private callMonster() {
        console.log('モンスターは' + this.color + 'で' + this.face + 'だ');
    }

    configure() {
        this.callMonster()
    }
}

const monsters= new Monsters()

メソッドの修飾子

メソッドの修飾子は「public・private・protected・readonly」があります。機能は下記です。
これらメソッドを使用して、ソースを効率的に書くことができます。

⇒ public

「public」は、クラスの外からアクセスすることができる修飾子です。

⇒ private

「private」は、クラス内でのみアクセスができる修飾子です。

⇒ protected

「protected」は、継承されたクラス(サブクラス)でのみアクセスできる修飾子です。

⇒ readonly

「readonly」は、フィールドを読取専用にする修飾子です。

最後に

以上が「TypeScript で Class構文を書いてみるヨ (JavaScript/TypeScript)」でした。
ES2015以降、class命令で書かれることが私の肌感で感じています。
しかし、実行務を行っているとどうしても「class命令が使用できない」「前のスクリプトを読まないといけない」時にfunction命令の知識も必須です。私もまだまだ知識に及ばないところもありますが研鑽に勤しみたいと...2022年の目標です。
ここまでお読みいただきありがとうございました。

参考資料・書籍

• JavaScript本格入門
• JavaScriptモダンプログラミング完全ガイド
• MOD web Docs Class