本記事ではJavaScriptのクラスについて解説します。
JavaScriptはオブジェクト指向言語でもあるため、クラスが利用可能です。
特に大規模な開発ではクラスが多く使われるので、この機会にやり方を覚えましょう。
本記事ではインスタンス生成方法や、コンストラクタ、メソッドの使い方を一通り解説します。
JavaScriptのクラスとは？
クラスとはオブジェクト指向で使う構文のことです。
オブジェクト指向とは、関連性のあるデータや処理を「オブジェクト」という1つの単位にまとめて処理する手法のこと。
いわば、何か物を作る際、決められた設計書に基づいて開発する方法です。
その設計書を、クラスを使って書くことが可能です。
設計書を事前に作っておけば、後はそれに従ってプログラムを素早く書くことができます。
オブジェクト指向とは、プログラムを書くのを楽にするための手法なのです。
また、オブジェクト指向が書いた方が、仕様変更があったときプログラムの変更が楽になるメリットもあります。
設計書だけ変更すれば、設計書を使って作られた部分も自動的に変更されるからです。
このようなメリットがあるため、オブジェクト指向は多くの現場で使われています。
クラスの基本的な使い方
それではクラスの基本的な使い方をみていきましょう。
以下の項目に分けて、クラスについて分かりやすく解説していきます。
- インスタンスを生成する
- コンストラクタを使う
- メソッドを使う
クラスを扱えるようになるには、コンストラクタやメソッドの理解が求められます。
インスタンスを生成する
まずはインスタンスの生成方法をみていきましょう。
インスタンスとはクラスから生成した「実体」のことです。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
class TestClass{
}
const data = new TestClass;
document.write(data);
</script>
</body>
</html>○実行結果
クラスを作るときは「class クラス名」と書き、{}の中にクラス内の処理を記述します。
上記のコードでは何も入っていない空のクラス「TestClass」を作成しています。
このクラスを使って、インスタンスを生成しています。
インスタンスを生成するときは「new」を使います。
new クラス名
と書くことで、そのクラスを使ったインスタンスを作成可能です。
作成したインスタンスは変数「data」に格納されています。
今回はクラスの中身が空ですので、このような出力結果となっています。
これが、クラスの書き方と、インスタンスの書き方の基本となります。
コンストラクタを使う
次にコンストラクタの使い方をみていきましょう。
クラスには、コンストラクタという機能が最初から用意されています。
コンストラクタは、インスタンスを生成したときに実行される関数のようなものです。
コンストラクタ内に処理を書くことで、インスタンス生成時にデータを初期化する、などができます。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
class TestClass{
constructor(){
document.write("Hello World");
}
}
const data = new TestClass;
</script>
</body>
</html>○実行結果
コンストラクタを使う場合は、constructor()と記述しましょう。
{}の中にコンストラクタ内の処理を記述します。
コンストラクタはインスタンス生成時に動きますので、newでクラスを呼び出しただけで動作します。
コンストラクタで「Hello World」と表示しています。
もう1つコンストラクタの例をみていきましょう
○コード例
<script>
class TestClass{
constructor(){
this.number = 1;
}
}
const data = new TestClass;
document.write(data.number);
</script>○実行結果
上記のコードでは、コンストラクタ内で作ったプロパティを、クラス外で活用しています。
コンストラクタ内で「this.」をつけてプロパティを定義すると、生成されるインスタンスの方でそのプロパティを使えます。
そのため、「data.number」と記述すれば「1」が表示できるのです。
メソッドを使う
最後にメソッドの使い方についてみていきましょう。
メソッドとは、オブジェクト指向における操作を定義したもので、関数と同じような感じで使えます。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
class TestClass{
test_method(){
document.write("テストメソッドです");
}
}
const data = new TestClass;
data.test_method();
</script>
</body>
</html>○実行結果
上記のコードでは「test_method」メソッドをクラス内に定義しています。
いつもどおり、クラス外部からインスタンスを生成しています。
そして、data.test_method()によってこのメソッドを呼び出しています。
メソッドを呼び出すときは「.メソッド名()」と記述すればOKです。
このように関数を呼び出すようなイメージで、メソッドを使うことが可能です。
まとめ
本記事では、JavaScriptのクラスについて解説しました。
今回は簡単なコードを紹介しましたが、実際の現場では何千行にも渡るコードも書くこともあります。
長めのコードになると、オブジェクト指向で書いた方が、はるかに見やすくなります。
今回はあくまで、クラスの基礎のみの解説にとどめました。
クラスの応用に関しては、JavaScriptの初級編にて解説する予定です。
