「JavaScript」の版間の差分

削除された内容 追加された内容
とりあえずクラスのサブページのリンク作成。
下書きしてたクラスの内容をサブページに移動したので、こちら科目メインページからは除去。
122 行
{{wikipedia}}
* [//developer.mozilla.org/ja/docs/Web/JavaScript JavaScript - MDN]
 
== ※ 下書き ==
== クラス ==
{{Main|JavaScript/プロトタイプベース|JavaScript/オブジェクト}}
ES2015以降、JavaScript では「クラス」と言うものが導入され<ref>山田祥寛『改訂新版 JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで~ 』、技術評論社、2019年8月17日 初版 第6刷、224ページ </ref>、いくつかの変数や関数をまとめてグループ的に宣言でき、グループ的に取扱いできます。
 
<syntaxhighlight lang="javascript">
<script>
class sample {
constructor(name) {
this.name = name;
}
}
 
let dummy = new sample("Dog");
document.write(dummy.name);
document.write("<br>");
</script>
<body>
この行は表示確認用メッセージ
</body>
</syntaxhighlight>
 
表示結果
<pre>
Dog
この行は表示確認用メッセージ
</pre>
:というメッセージがウェブブラウザ上にて表示される。
 
JavaScript の場合、class の中でコンストラクターというものを使って、そのクラスの初期化の処理をしなければならない仕様になっています(他の言語のクラスではそのような処理のない言語も多い)。
 
JavaScriptでは現状、関数(Functionオブジェクト)を用いてクラスを実現しています<ref>山田祥寛『改訂新版 JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで~ 』、技術評論社、2019年8月17日 初版 第6刷、225ページ </ref>。おそらくですが、このような事情もあり、クラスの宣言は上記コードのような仕組みになっているのです。
 
また、上記コード中の<code>this</code>は、(宣言された場所の)「そのクラス自身」を意味する予約語であり、呼び出す場所において意味が変わる<ref>山田祥寛『改訂新版 JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで~ 』、技術評論社、2019年8月17日 初版 第6刷、228ページ </ref>予約語です。thisキーワードの詳細については複雑なので、本ページでは説明を省略します。
 
 
ともかくクラスのとりあえずの初心者向けの書式としては、
 
<syntaxhighlight lang="javascript">
class クラス名 {
constructor(引数名) {
this.プロパティ名 = 引数名;
}
}
</syntaxhighlight>
のような書式になります。
 
なお、上記コードの name のような、クラスの内部にある変数のようなもののことをプロパティと言います。上記コードでは説明の簡単化のため省略しましたが、クラスでは変数のほかにも関数を扱うことも可能であり、クラス内の関数のようなもののことはメソッドと言います。
 
さて、クラスを呼び出して使うには、さらに作業が必要であり、
:<code>let dummy = new sample("Dog");</code>
のように、そのクラスをnew演算子とともに呼出し、値(上記コードでは "Dog" のこと)を与えた結果を、代入演算子 let などで変数に代入しなければなりません。このような作業をインスタンスと言います。
 
JavaScriptにかぎらず他の多くのプログラミング言語でも、クラスの機能をもった言語ならインスタンスが同様に必要であり、しかもほぼ同じ書式であり、new演算子と代入演算との組み合わせでインスタンスを行うのが一般的です。
 
そして、クラス外部からアクセスする場合、JavaScriptでは
:<code>クラス変数.プロパティ変数</code>
の書式で指定してアクセスします。
 
コンストラクタなどを定義してない内部の空白のクラスの場合でも、Object.defineProperty()を使ってクラスのデータ記述子を操作することができます<ref>
{{Cite web
|url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
|title=Object.defineProperty() - JavaScript // MDN
|date=2021/9/19
|accessdate=2021/11/19
}}</ref>。
 
<syntaxhighlight lang="javascript">
<script>
class sample {
 
}
 
/*
sample.prototype.name = "Cat";
↑この様にしてもプロパティを追加できますが、
その後、JavaScriptエンジンはクラスsampleのインスタンスを
参照するたびにprototypeを探索する羽目になりパフォーマスが劣化います
*/
Object.defineProperty(sample.prototype, 'name', {
value: "Cat"
})
let dummy = new sample();
 
document.write(dummy.name);
document.write("<br>");
 
</script>
 
<body>
この行は表示確認用メッセージ
</body>
</syntaxhighlight>
 
表示結果
 
<pre>
Cat
この行は表示確認用メッセージ
</pre>
 
=== 脚注 ===
<references />
<!-- サブページに移動する場合は、この非表示タグの上までを移動のこと。-->
 
[[Category:JavaScript|*]]