この記事は、JavaScriptでのOOPと簡単なJSコンポーネントの作成方法に関するチュートリアルの最初の部分です 。
オブジェクトとJavaScriptについて
オブジェクトを物の集まりと考えてください。 たとえば、自転車があるとします。 この自転車は
オブジェクトであり
、オブジェクトのプロパティと呼ばれるサイン/パーツ/などの組み合わせを持って
います 。 このようなプロパティの例は、自転車のモデル、その製造年、およびその詳細です。 パーツは、独自のプロパティセットを持つこともできます。
JavaScriptは
オブジェクト指向言語です。 したがって、JavaScriptのすべてはオブジェクトであり、アクセスできる独自のプロパティセットを持っています。 MDNのより正式な説明：
JavaScriptは、単純なオブジェクト指向のパラダイムに基づいています。 オブジェクトはプロパティのコレクションであり、プロパティは名前と値の間の関連付けです。 プロパティの値は関数である場合があり、その場合、関数はメソッドと呼ばれます。 ブラウザで既に定義されている標準オブジェクトに加えて、独自のオブジェクトを作成できます。
独自のオブジェクトを作成することは非常に便利な機能です。 JavaScriptでは、
ドット表記を使用してオブジェクトのプロパティにアクセスできます。 しかし、プロパティへのアクセスを扱う前に、オブジェクトを作成および初期化する方法を理解しましょう。
オブジェクト作成
JavaScriptのすべてがオブジェクトであるため、オブジェクトを知らずに作成または使用したことは確かです。 MDNの短いメモ：
nullおよびundefinedを除くすべてのプリミティブ型undefined 、オブジェクトとして扱われます。 これらにはいくつかのプロパティを割り当てることができ、オブジェクトのすべての特性を備えています。
JavaScriptには膨大な数の標準オブジェクトがありますが、この記事ではそれらについては説明しません。 これからおよび記事全体を通して、「SimpleAlert」と呼ばれる非常に単純な
JavaScriptコンポーネントを作成します。 これを考慮して、独自のオブジェクトを作成しましょう。
var simpleAlert = new Object();
以上です！ シンプルでしょ？ ただし、オブジェクトに
いくつかのプロパティを追加するまで、これはすべて意味がありません。
ドット表記を使用してこれを行うことができます。
コンソールには、オブジェクトに3つのプロパティがあることが示されます。 上記のプロパティを設定したので、スクリプトのどこからでもアクセスできます。 たとえば、ユーザーのコンソールにエラー通知を送信する場合、次のことができます。
これは、オブジェクトを作成してそのプロパティにアクセスするための1つの方法にすぎません。
初期化子を使用してオブジェクトを作成する
オブジェクトを作成する別の方法は、いわゆる
オブジェクト初期化子 、
オブジェクト初期化子の助けを借りることです。 MDNの定義：
...オブジェクト初期化子を使用してオブジェクトを作成できます。 初期化子の使用は、 リテラル表記を使用したオブジェクトの作成と呼ばれることもあります。 名前オブジェクト初期化子も、 C ++で使用される用語に従います 。
この方法で「SimpleAlert」を作成するのは非常に簡単です。
オブジェクトのプロパティは関数にすることもできます。 例：
上記のコードは、文字列「Fallback」をコンソールに出力します。 前述のように、オブジェクトのプロパティが関数の場合、それは
methodとも呼ばれます。
コンストラクターを使用する
JavaScriptでオブジェクトを作成する別の方法は、
コンストラクター関数を使用する
ことです 。 そして再びMDNからの引用：
コンストラクターを記述してオブジェクトを定義します。 関数を大文字にすることは良い習慣と見なされます。 `new`キーワードを使用してオブジェクトのインスタンスを作成します。
この方法の詳細については、
こちらをご覧ください 。 コンストラクターを使用してオブジェクトを作成します。
コンソールにオブジェクトを表示すると、前の場合と同じ結果が得られます。
console.log(my_alert);
このメソッドの優れた点は、異なるプロパティセットを持つオブジェクトの複数のインスタンスを作成するために使用できることです。 プロパティは、オブジェクトおよび関数にすることもできます。
オブジェクトに関する詳細
実際、オブジェクトについては、上記で述べたよりも多くのことが言えます。 ただし、私が述べた方法は非常に有用であり、将来的にはそれらを使用してコンポーネントを作成します。
オブジェクトを完全に理解するために、MDNで資料を読むことを強くお勧めします。 また
、オブジェクトの
ドキュメントを参照して、
オブジェクトと連携するメソッドとプロパティが存在するかどうかを把握することも重要です。
コンポーネントの一部を作成する
「SimpleAlert」というコンポーネントを作成します。このコンポーネントは、ユーザーがボタンをクリックすると、ユーザーの画面にメッセージを表示します。 表示されるボタンは、押されたボタンによって異なります。 ボタンのレイアウト：
<div id="component"> <button id="default">Show Default Message</button> <button id="success">Show Success Message</button> <button id="error">Show Error Message</button> </div>
コンポーネント自体については、コードを匿名関数でラップし、グローバルスコープで使用できるようにします。 開始するには、次のようになります。
;(function( window ) { 'use strict'; })( window );
コードに関するいくつかの注意：
strict modeを使用していstrict mode 。 あなたはここでそれについて読むことができます 。- 匿名関数に
windowを渡すので、後でSimpleAlertをグローバルスコープに追加できます。
コンポーネントのコードを書きましょう。 まず、
SimpleAlert関数を作成する必要があります。 グローバルな範囲でも必要です。
;(function( window ) { 'use strict'; function SimpleAlert( message ) { this.message = message; }
SimpleAlertオブジェクトのインスタンスを作成する場合、これまでのところ何も起こりません。
(function() { var default_btn = document.getElementById( "default" ); default_btn.addEventListener( "click", function() { var default_alert = new SimpleAlert("Hello World!"); } ); })();
続行する前に、
Object.prototype慣れる必要が
Object.prototypeます。 MDN：
JavaScriptのすべてのオブジェクトはObject子孫です。 すべてのオブジェクトはObject.prototypeからプロパティとメソッドを継承しますが、それらはオーバーライドできます。 例外は、 Object.create(null)など、 nullプロトタイプを持つオブジェクトです）。
詳細 このアプローチを使用して、コンポーネントを作成します。
init関数を追加して、オブジェクトが作成された直後に呼び出してみましょう。 この関数は、コンソールにメッセージを送信します。
;(function( window ) { 'use strict'; function SimpleAlert( message ) { this.message = message; this._init(); } SimpleAlert.prototype._init = function() { console.log(this.message); } window.SimpleAlert = SimpleAlert; })( window );
これで、インスタンス化されたオブジェクトは
「Hello、world！」というメッセージ
をコンソールに表示します。 これは進歩です！ 次に、メッセージをコンソールではなくユーザーの画面に表示させましょう。
;(function( window ) { 'use strict'; function SimpleAlert( message ) { this.message = message; this._init(); } SimpleAlert.prototype._init = function() { this.component = document.getElementById("component"); this.box = document.createElement("div"); this.box.className = "simple-alert"; this.box.innerHTML = this.message; this.component.appendChild( this.box ); } window.SimpleAlert = SimpleAlert; })( window );
コードのポイントを見てみましょう。
- コンストラクター内で
message変数を作成し、 this.message = messageを使用して匿名関数内で使用可能にしthis.message = message 。 - 次に、
this._init()介して_init関数を呼び出します。 オブジェクトの新しいインスタンスを作成するたびに、これらの2つの手順は自動的に実行されます。 _init()内で、 thisを使用して必要な変数を宣言します。 次に、 #component要素にアクセスし、その中にメッセージを含むdivを配置します。
とてもきれいですよね？
全コード
以下は、見た目を良くするための
CSSを含む、記述されたすべてのコードです。 マークアップを開始するには：
<div id="component"> <button id="default">Show Default Message</button> <button id="success">Show Success Message</button> <button id="error">Show Error Message</button> </div>
上記と同じ。 今、いくつかの
CSS ：
.simple-alert { padding: 20px; border: solid 1px #ebebeb; }
好きなように編集してください！ そして最後に、
JSコード 。 また、ボタンをクリックしたときにメッセージが正しく表示されるように、イベントハンドラーを追加しました。
まとめると
この記事では、オブジェクトを使用して単純な
JavaScriptコンポーネントを作成する方法について説明しました。 このコンポーネントは単純ですが、そのコードは、再利用可能な拡張可能なコンポーネントを作成するための基本的な知識を提供します。 暇なときに、「アラートを閉じる」ボタンを実装する方法を考えてください（ヒント-ボタンをクリックすると、
hide()メソッドが起動します）。
次のパートでは、SimpleAlertを少し改善し、デフォルトパラメータの設定方法とカスタムパラメータセットの受け渡し方法についても学習します。 それは、プログラミングのすべての美しさが実際に目に見えるときです！
この記事をお楽しみください。 2番目の部分を待ちます。 読んでくれてありがとう！