SSブログ
[Review]Java言語で学ぶデザイ..｜[JavaSctipt]オブジェクト指向.. ブログトップ

[JavaSctipt]オブジェクト指向の実装　[Programming JavaScript]

[はじめに]
JavaScriptの規格は、
ECMAScript（エクマスクリプト）で定められています。

JavaScriptは時代と共に進化しており、
最近のブラウザの大半は、
ECMAScriptのバージョンとして、ES6(ES2015)以降を取り入れています。

ES6(ES2015)は、
クラスなど、オブジェクト指向の概念を取り込んでおり、
最近のソースでもクラスの記載が散見されます。

たまに使うこともあるので、備忘録として、
クラスを用いたサンプルソースを掲載します。
//【クラス定義(Person.js)】
class Person{

   //【プロパティの初期化】 ※Start
   // ※ES6(ES2015)までは、
   //   プロパティを設定する場合は、
   //   必ずコンストラクタ内で実施する必要がありました。
   //   ES2022から、
   //   クラスのトップレベルで
   //   プロパティを宣言できるようになりました。
   //   また、プロパティ名の先頭に「#」を付加することで、
   //   Private指定となります。（ES2022から）
   //   [注意]
   //     但し、ES2022以降のバージョンは、
   //     古いブラウザでは
   //     機能が実装されていない可能性がある為、注意が必要です。

   //名前
   #_name = {first:"権兵衛", last:"名無し"};
   //生年月日
   #_birthday = this.#getSystemDate();

   //【プロパティの初期化】 ※End

   //【コンストラクタ定義】 ※Start
   // ※インスタンス化の際に実行されるメソッド。

   constructor(name, birthday){
      this.#_name = name;
      this.#_birthday = birthday;
   }

   //【コンストラクタ定義】 ※End

   //【ゲッター/セッター定義】 ※Start
   // ※ES6(ES2015)までは、
   //   ゲッター／セッターを実装するには、
   //   Javaのようにメソッド（getXXX() / setXXX()）で
   //   定義する必要がありましたが、
   //   ES2022から、
   //   ゲッター／セッター向けの構文を利用できるようになりました。
   //   [注意]
   //     但し、ES2022以降のバージョンは、
   //     古いブラウザでは
   //     機能が実装されていない可能性がある為、注意が必要です。

   //名前
   get fullName(){
      return this.#_name.first + " " + this.#_name.last;
   }

   //生年月日
   get birthday(){
      return this.#_birthday;
   }

   //生年月日
   set birthday(value){
      this.#_birthday = value;
   }

   //【ゲッター/セッター定義】 ※End


   //【メソッド定義（Public）】 ※Start
   // ※他の関数と同様に定義することで、
   //   Publicなメソッドを定義できます。

   //あいさつをする。
   sayHello(){
      window.alert(
         "こんにちは。" + 
         this.#_name.first + " " + 
         this.#_name.last + "です。");
   }

   //生年月日を出力する。
   sayBirthDay(){
      window.alert(this.#_birthday);
   }

   //年齢を出力する。
   sayAge(){
      let age = this.#calculateAge();
      window.alert("私は" + age + "歳です。");
   }

   //【メソッド定義（Public）】 ※End

   //【メソッド定義（Private）】 ※Start
   //※メソッド名の先頭に「#」を付加することで、
   //  アクセス元を自クラス内に限定(Private)することができます。
   //   [注意]
   //     但し、ES2022以降のバージョンは、
   //     古いブラウザでは
   //     機能が実装されていない可能性がある為、注意が必要です。

   //システム日付を取得する。
   #getSystemDate(){
      const rtn = new Date();
      return rtn;
   }

   //年齢を算出する。
   #calculateAge(){
      let sysDate = this.#getSystemDate();
      let age = sysDate.getFullYear() - this.#_birthday.getFullYear();

      if(sysDate.getMonth() * 100 + sysDate.getDate() < 
         this.#_birthday.getMonth() * 100 + this.#_birthday.getDate())
      {
         //システム日付が誕生日前の場合は、
         //年齢を [システム日付の年] - [生年月日の年] - 1 とする。
         return age - 1;
      }

      //システム日付が誕生日以降の場合は、
      //年齢を [システム日付の年] - [生年月日の年] とする。
      return age;
   }

   //【メソッド定義（Private）】 ※End
}
[JavaScript]オブジェクト指向を意識したコード


<html>
<head>

<script language="javascript" src="./Person.js"></script>
<script language="javascript" >
   //クラスへのアクセス
   function sayHello()
   {
      const person = new Person(
         {first:"太郎", last:"山田"},
         new Date(1953,8-1,15));
      person.sayHello();
   }

   function sayBirthDay()
   {
      const person = new Person(
         {first:"太郎", last:"山田"},
         new Date(1953,8-1,15));
      person.sayBirthDay();
   }

   function sayAge()
   {
      const person = new Person(
         {first:"太郎", last:"山田"},
         new Date(1953,8-1,15));
      person.sayAge();
   }
</script>
</head>
<body bgcolor="azure">

<input type="button" value="あいさつをする。" onclick="sayHello();"><br/>
<input type="button" value="生年月日を言う。" onclick="sayBirthDay();"><br/>
<input type="button" value="年齢を言う。" onclick="sayAge();"><br/>

</body>
</html>
[JavaScript]使用例

[実行結果]
JavaScript実行結果.PNG

タグ：オブジェクト指向 クラス JavaScript
2023-10-29 17:50  nice!(0)  コメント(0) 
共通テーマ：パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前：[必須]
URL：
コメント：
画像認証：
下の画像に表示されている文字を入力してください。

[Review]Java言語で学ぶデザイ..｜[JavaSctipt]オブジェクト指向.. ブログトップ

Digital Watch


So-netブログ

So-net無料ブログ作成

ブログ紹介

koalatch_icon.jpg
こあらっちの日記

LicenseLogo

【MCP上位資格】
MCTS(Microsoft Certified Technology Specialist)
MCTS：(Technology Specialist)
・For DynamicsAX2012(2013.2取得）
・For SharePoint2010(2012.10取得）
・For SQLServer2008(2012.8取得）
・For DynamicsAX2009(2011.6取得）
・For .NET2.0 WebApp(2011.5取得）
・For .NET2.0 WinApp(2009.2取得）

MCSD(Microsoft Certified Solution Developer)
MCSD：(Solution Developer)
・For Microsoft.NET(2006.6取得）
・For VisualStudio6.0(2001.9取得）

MCAD(Microsoft Application Developer)
MCAD：(Application Developer)
・For Microsoft VB.NET(2003.4取得）
・For Microsoft C#.NET(2003.4取得）

MCDBA(Microsoft Certified DataBase Administrator)
MCDBA：(DB Administrator)
・For SQLServer7.0 (2001.12取得）

【MCP】（24科目取得）
MCP(Microsoft Certified Professional)
【開発系】
・70-483
　C#でのプログラミング
・70-528
　Webアプリ開発(.NET2.0)
・70-526
　Windowsアプリ開発(.NET2.0)
・70-536
　アプリケーション開発基礎(.NET2.0)
・70-300
　ソリューションアーキテクチャ(VS.NET)
・70-310
　XMLWebService開発(VB.NET)
・70-320
　XMLWebService開発(C#.NET)
・70-305
　Webアプリ開発(VB.NET)
・70-315
　Webアプリ開発(C#.NET)
・70-306
　Windowsアプリ開発(VB.NET)
・70-316
　Windowsアプリ開発(C#.NET)
・70-100
　ソリューションアーキテクチャ（VS6）
・70-176
　デスクトップアプリ開発(VB6)
・70-175
　分散アプリ開発(VB6)
【データベース系】
・70-433
　データベース開発(SQLServer2008)
・70-432
　実装とメンテナンス(SQLServer2008)
・70-229
　DBデザインと実装(SQLServer2000)
・70-028
　DBデ管理(SQLServer7.0)
・70-029
　DBデザインと実装(SQLServer7.0)
【インフラ系】
・70-210
　Windows2000Professional
・70-215
　Windows2000Server
【その他】
・70-573
　SharePoint2010アプリ開発
・MB6-872
　DynamicsAX2012のｲﾝｽﾄｰﾙ
・MB6-822
　DynamicsAX2009の生産

【Oracle認定資格(Java)】
（3科目取得）
JavaSE8_Gold.jpg
・1Z0-809
　Java Gold SE 8 (2019.7取得)

JavaSE8_Silver.jpg
・1Z0-808
　Java Silver SE 8 (2018.7取得)

JavaSE7_8_Bronze.jpg
・1Z0-814
　Java Bronze SE 7/8 (2017.8取得)

【LPIC認定上位資格】
・LPICレベル１(2021.2取得)
【LPIC認定資格】
・LPIC-1 101：LPICレベル１ 101(2021.2取得)
・LPIC-1 102：LPICレベル１ 102(2021.1取得)

【情報処理】
・第1種情報処理技術者(2000.4取得)
・第2種情報処理技術者(1998.4取得)

【その他IT】
・AWS認定Solutions Architect Associate Level(2014.8取得)

【その他】
・アマチュア無線 電話級(1987.8取得)

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。