JavaScriptでクラスを利用するコードを紹介します。
概要
ECMAScript6からJavaScriptでクラスを定義するためのclass構文が追加されました。この記事では、class構文を利用したJavaScriptのクラスのコードを紹介します。
動作環境
ECMAScript6に対応している必要があるため、下記のブラウザで動作します。
- Microsoft Edge
- Google Chrome 49 以降
- Firefox 45 以降
Internet Explorerでは動作しません。
書式
class (クラス名){
constructor ([引数...]){
}
(メソッド名1)([引数...]){
...(メソッドの実装)
}
(メソッド名2)([引数...]){
...(メソッドの実装)
}
...
(メソッド名n)([引数...]){
...(メソッドの実装)
}
}
シンプルなクラス
コード
シンプルなクラスの実装のコードを紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
class MyClass {
method01() {
return "Hello JavaScript Class.";
}
}
function onButtonClick() {
var mclass = new MyClass();
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
</script>
</head>
<body>
<div id="output">output</div>
<hr/>
<input type="button" value="Exec" onclick="onButtonClick();">
</body>
</html>
解説
下記コードにてクラスの宣言と実装をします。
"MyClass"クラスを宣言します。MyClassには method01() メソッドを1つ持ちます。
method01() メソッドは "Hello JavaScript Class." の文字列を返すメソッドです。
class MyClass {
method01() {
return "Hello JavaScript Class.";
}
}
ボタンのクリックにより、下記のonButtonClick() 関数が実行されます。
function onButtonClick() {
var mclass = new MyClass();
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
var mclass = new MyClass();
上記コードにより、MyClassのインスタンスを作成します。作成されたMyClassオブジェクト(MyClassインスタンス)はmclass変数に代入されます。
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
getElementById()メソッドを呼び出し"output"をidに持つ要素(div)を取得します。取得した要素のinnerHTMLに MyClassクラスのmethod01()メソッドを呼び出した戻り値を代入します。"output"をidに持つdivタグの位置のテキストが"Hello JavaScript Class."に変更されます。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Exec]ボタンをクリックします。"output"が表示されていた部分の文字列が "Hello JavaScript Class."に変化します。クラスのインスタンスが作成され、メソッドが実行できたことが確認できます。
コンストラクタの例
コード
コンストラクタを利用するらシンプルなクラスの実装のコードを紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
class MyClass {
constructor(quote) {
this.iquote = quote;
}
method01() {
return this.iquote + "Hello JavaScript Class." + this.iquote;
}
}
function onButtonClick() {
var mclass = new MyClass("～");
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
</script>
</head>
<body>
<div id="output">output</div>
<hr />
<input type="button" value="Exec" onclick="onButtonClick();">
</body>
</html>
解説
クラスの宣言、実装に関する書式は先のコードと同様です。
constructor(quote) {
this.iquote = quote;
}
上記のconstructor によりコンストラクタを実装します。今回のコードでは、コンストラクタの引数に与えられた値をiquoteメンバ変数に格納します。メンバ変数は、"this." に続けて変数名を記述することで宣言できます。
method01() {
return this.iquote + "Hello JavaScript Class." + this.iquote;
}
method01() メソッドは "Hello JavaScript Class." の文字列を返すメソッドです。先の例との違いは、文字列の前後にコンストラクタの引数に与えた文字列が追加されます。
function onButtonClick() {
var mclass = new MyClass("～");
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
ボタンのクリックにより、上記ののonButtonClick() 関数が実行されます。MyClassのインスタンスを作成し、method1 メソッドの戻り値をoutput のIDを持つ要素に代入して画面に表示します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Exec]ボタンをクリックします。"output"が表示されていた部分の文字列が "～Hello JavaScript Class.～"に変化します。クラスのインスタンスが作成され、メソッドが実行できたことが確認できます。"Hello JavaScript Class."の文字列の前後にコンストラクタで与えた文字列である"～"が追加される処理が実行できていることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2017-09-23
作成日: 2017-08-18
