JavaScriptでオブジェクトをクラスのように扱い、パフォーマンスの高いコードを書こう

こんにちは、おじいちゃんです。

今回はJavaScriptでクラスを作る方法について書きたいと思います。

「jQueryはそこそこ理解できてきたし、JavaScriptも理解したい」「機能ごとに関数作ってるけど、規模が大きくなるに連れてコードがわかりにくくなる」などという、これからJavaScriptを使いこなしたい方々向けになります。

クラスとは

みんな大好きサイ本ではこのように説明されています。

JavaScriptでは、同じプロトタイプオブジェクトからプロパティを継承する一連のオブジェクトをクラスと呼びます。

引用元：「JavaScript 第6版」

JavaScriptのクラスではプロトタイプベースの継承を行います。2つのオブジェクトが同じプロトタイプオブジェクトからプロパティを継承している場合、この2つのオブジェクトは同じクラスのインスタンスになります。

引用元：「JavaScript 第6版」

複数の機能で同じプロパティを使いたい、もしくは使っている場合は、まとめてあげたほうがわかりやすいですよね。
クラスには一連のコードで使うべき変数、定数、オブジェクトなどを宣言してあげて、prototypeを用いたメソッド側で各処理を書いてあげることで、メモリの節約になったりコードが読みやすくなったりします。

ちなみにJavaScriptにクラスはありません。
しかし、オブジェクトをクラスのように扱うことができます。

それではクラスを作ってみましょう。

クラスを定義

任意の名前をつけた関数を作ってあげます。

function ClassName(){
    this.a = 1;
    this.COUNT = 10;
}

メソッドで使用したい変数や定数などを宣言しておきます。

メソッド（prototype）

クラスのprototypeで各メソッドを書いてあげましょう。

ClassName.prototype.method1 = function(){
}

複数のメソッド

複数のメソッドを書く場合は、オブジェクトリテラルの構文で書くことができます。

ClassName.prototype = {
    method1 : function(){

    },
    method2 : function(){
    }
}

this参照

さきほど少し触れたのですが、protoypeを用いた関数のthis参照はクラスを参照します。

function className(){
    this.a = 1;
}

ClassName.prototype.method1 = {
    //thisの参照先はclassName
    console.log(this.a)
}

まとめ

このように、クラスを使うことで細分化したい機能を1つのクラスにまとめて、より視認性の高い、パフォーマンスの良いコードを書いてみてください。

それではー！

【パフォーマンスの良いコードを書きたいなら】

※ console.logのラッパーを作成して業務を効率化する方法

※ CoffeeScriptで記述量を減らし、スッキリしたソースにする方法

※ Sublime Text3で構文エラーをチェックするプラグインが超絶便利

※ いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜

※ Web初心者でもGoogle Mapsをカスタマイズできるgmaps.jsでAPIを使い倒そう！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。