こんにちは！
ナビゲータのEVEです。
本日から、JavaScriptの実際の調査に入るのと同時に、Stringクラスの製造に入っています。ただ、どんなプログラムなのか、その実体が分からないので、ChatGPTに質問をしながら、プログラムの製造に入っています。
[JavaScriptとは？]
JavaScriptとは、HTMLで利用する、クライアント側の言語です。通常の手続き型言語として利用する場合は、<head>～</head>内に、functionという記述後関数名を記述するのですが、オブジェクト指向のJavaScriptはちょっと違うようです。
通常オブジェクト指向のJavaScriptはjsファイルとして外部ファイルに記述し、そのファイルを使用したいHTMLファイルへインポートするという流れになります。ChatGPTから提供された実際のプログラムは以下の通りとなります。
//script.js
// クラス定義
class AlertManager {
//①コンストラクタ
constructor(message) {
this.message = message;
}
//②showAlertメソッド
showAlert() {
alert(this.message);
}
}
//③グローバル変数としてクラスのインスタンスを作成
window.alertManager = new AlertManager('This alert is triggered by a button click!');
<!--test.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using JavaScript Class from HTML</title>
<!-- ④外部JavaScriptファイルインポート-->
<script src="script.js" defer></script>
</head>
<body>
<!-- ⑤HTMLからクラスを使用 -->
<button onclick="alertManager.showAlert()">Click Me</button>
</body>
</html>
①はコンストラクタです。Java同様に、Classのインスタンス作成時(new)に無条件で実行されるメソッドです。Javaは、クラス名と同じメソッド名を指定することにより、コンストラクタと言うことを明示しますが、JavaScriptは、constructorと記述します。
②は、ShowAlertメソッドになります。内容を見ると、引数をAlert関数を用いて画面上に表示する機能だと言うことが分かります。
③は作成したクラスのインスタンスをグローバル変数として定義しています。基本オブジェクト指向言語としてプログラムを使用しようとした場合、Java同様にインスタンスを作成後利用することになります。通常、newというキーワードでインスタンスを取得するのですが、onClick、onLoad等で利用しようとした場合、複数行記述することができないため、ここで記述し、HTML内で利用する場合は、このインスタンスを利用することになります。
④ここからは、アドレスバーから呼ばれる、プログラムhtmlファイルの記述になります。④では、上記①～③で作成した、script.jsファイルをhtmlファイルにインポートし、その機能を利用できるようにしています。
⑤では、グローバル変数として定義した、インスタンスを呼び出し、ボタンをクリックしたときにshow.Alertメソッドを実行するように定義しています。
以上です。実際にプログラムを作成し、Prototype EVE上で実行しましたが、動作することが確認できました。
[あとがき]
はじめての方は難しいですかね？手続き型言語は、呼び出した順番に実行されていくので、直感的に理解できるのですが、非手続き型言語であるオブジェクト指向言語は、インスタンス、メソッドとか、プロパティとかでてきて、どれがどのように利用されるのかいまいち不明です。
簡単に言うと、以上のプログラムは設計図で、その設計図を利用しようとした場合、③での記述のように、クラスをnewというキーワードで、実体化(インスタンス化)することにより利用します。その実体化された機能は、属性はプロパティで定義され、機能はメソッドとして定義されている状態になっています。
まっ、プログラムは習うより慣れろです。サンプルプログラムなどを自分で実行して試しながら覚えていくしかないでしょう？
本日で、JavaScript製造方法について理解することができました。明日からは、製造を進めるのと同時に、深掘りしていきたいと思います。
では、また！！！
