JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScriptクラス

ES6としても知られるECMAScript2015は、JavaScriptクラスを導入しました。

JavaScriptクラスは、JavaScriptオブジェクトのテンプレートです。

JavaScriptクラス構文

キーワードclassを使用してクラスを作成します。

常に:という名前のメソッドを追加しconstructor()ます

構文

class ClassName {
  constructor() { ... }
}

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

上記の例では、「Car」という名前のクラスを作成します。

このクラスには、「name」と「year」の2つの初期プロパティがあります。

JavaScriptクラスはオブジェクトではありません。

JavaScriptオブジェクトテンプレートです。


クラスの使用

クラスがある場合は、そのクラスを使用してオブジェクトを作成できます。

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

上記の例では、Carクラスを使用して2つのCarオブジェクトを作成しています

コンストラクターメソッドは、新しいオブジェクトが作成されるときに自動的に呼び出されます。


コンストラクターメソッド

コンストラクターメソッドは特別なメソッドです。

  • 正確な名前は「コンストラクター」である必要があります
  • 新しいオブジェクトが作成されると自動的に実行されます
  • オブジェクトのプロパティを初期化するために使用されます

コンストラクターメソッドを定義しない場合、JavaScriptは空のコンストラクターメソッドを追加します。


クラスメソッド

クラスメソッドは、オブジェクトメソッドと同じ構文で作成されます。

キーワードclassを使用してクラスを作成します。

常にconstructor()メソッドを追加してください。

次に、任意の数のメソッドを追加します。

構文

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Carageを返す「age」という名前のClassメソッドを作成します。

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

クラスメソッドにパラメータを送信できます。

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";


ブラウザのサポート

次の表は、JavaScriptのクラスを完全にサポートする最初のブラウザバージョンを定義しています。

Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016


「厳密に使用する」

クラスの構文は「厳密モード」で記述する必要があります。

「厳密モード」のルールに従わないと、エラーが発生します。

「厳密モード」では、変数を宣言せずに使用するとエラーが発生します。

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // This will not work
    let date = new Date(); // This will work
    return date.getFullYear() - this.year;
  }
}

「厳密モード」の詳細については、JS厳密モードをご覧ください。