オブジェクト指向JavaScriptの概要

何らかの理由で、IT業界では、オブジェクト指向プログラミング(OOP)メソッドを使用していない場合、あなたは「本物のプログラマ」ではないという見方をする傾向があります。 OOPが問題に対処するための最も適切な方法ではない多くの状況があるため、これは実際にはややばかげたスタンスです。 これは、Javaのような言語の欠陥であり、必要かどうかに関係なく、すべてのプログラミングタスクにOOPを強制します。

JavaScript(Javaとはほとんど関係ありません)はまったく異なる言語です。 それはほとんど無制限の自由と汎用性を提供し、ほとんどの領域で複雑さを軽減します。 残念ながら、JavaScriptはユーザーに自由を与えるため、より複雑なものがあります。

OOPが常にすべてのタスクに適しているとは限らない理由は、プログラムがより複雑になり、多くの場合、追加の手順、作業、および注意を怠っていると潜在的に失敗する可能性のある多くのことを伴うことです。 しかし、OOPは、それが適切な状況で使用される場合、多くの利点を提供することもできます。

OOPが提供できる最も重要な利点はレプリケーションです。つまり、オブジェクトを複製し、必要なときにいつでも同じプログラムで何度も再利用できます。 暗黙の複雑さ、およびJavaScriptが最初からOOP言語になるように構築されていない(したがって、複雑さが増している)ことは、OOPが羽ばたくJavaScriptプログラマーの多くが羽ばたく前の最後のフロンティアである理由のXNUMXつです。

はい、難しいですが、それほど難しくありません

オブジェクト指向JavaScriptの概念はあなたにとっては多すぎると考える前に、あなたがそれを知らなくてもすでにOOPを使用していることを考慮してください。 純粋主義者は反対するかもしれませんが、すでにHTMLとCSSを使用していて、JavaScriptを使用してWebページ上のHTML要素を操作する場合は、すでに経験豊富なOOPプログラマーであると言えます。

Webページ上のすべてのHTML要素は、実際にはオブジェクトです。 これらはすべてドキュメントオブジェクトモデル(DOM)階層に適合します。つまり、定義済みのクラス、定義済みのプロパティ、および継承が定義されています。 プロパティ値を明示的に設定しない限り、すべてのオブジェクトはデフォルトのプロパティ値を使用します。 CSS命令を記述するとき、実際に起こっていることは、メソッドを使用してクラスのXNUMXつ以上のプロパティ値を変更していることです。

HTML命令を作成するたびに、クラスの新しいインスタンスが作成されます。 そして、すでにご存知のとおり、各オブジェクトタイプの事前定義されたクラスに基づいて独自のクラスを作成できます(たとえば、次のように作成できます)。 これは、作成元の元のクラスとは非常に異なるプロパティを持っている可能性があります)。 このクラスのH2オブジェクトは、通常のH2オブジェクトとは異なる色とサイズになるように指定できます。 また、これらの変更されたオブジェクトは何度でも再利用できます。 元のH2オブジェクトはオブジェクトテンプレートであり、新しいクラスはテンプレートクラスから派生しています。

そう、そうです、OOPは簡単ではありませんが、おそらく既にやっているので、何を恐れているのでしょうか?

次のレベル:独自のオブジェクトを作成する

組み込みのDOMオブジェクトの操作は簡単です。 もっとチャレンジが必要です。 独自のオブジェクトを作成することは、より高いレベルのOOPへの最初のステップです。

これらすべてのプリアンブルがあるので、オブジェクトの作成は多くの複雑なコードを必要とする大きな問題であるとおそらくあなたは予想しています。 確かに、JavaやC#などの言語でカスタムオブジェクトクラスを作成しようとしたことがある場合は、長いクラスコンストラクターを作成することになります。 JavaScriptでの実行方法は次のとおりです。

ええと、それは反気候的でしたね? そこで行ったことは、クラス「myObject」の空のオブジェクトを作成したことです。 空のオブジェクトは、メモリ内のスペースを占有する以外は何もしないため、明らかに退屈です。 有用であるためには、オブジェクトはコンテンツを持っている必要があります。 より実用的なクラスを考えてみましょう。

上記は、objAlienと呼ばれるオブジェクトを示しています。objAlienには、これらのさまざまなプロパティ(通常の変数)とメソッド(関数)が定義されています。 技術的には、オブジェクトを変数や関数の配列と見なすこともできます。

プログラムでのオブジェクトの使用

オブジェクトが定義されると、プログラムでそれを参照できます。 ゲームでは、複数のエイリアンがいますが、個々のエイリアンのコードを書くと、プログラムが煩雑になります。 より良い方法は、すべてのエイリアンを格納する配列を作成し、次にエイリアンクラスを使用して新しいエイリアンを作成することです。 例えば:

このコードは、20のぬるぬるした緑のエイリアンを110ピクセル離して配置します(このことから、エイリアンを格納するために使用される画像の幅は100ピクセルで、各エイリアン間に10ピクセルのマージンがあると推測できます)。 もちろん、より良いテクニックがあるため、これはJavaScriptでゲームを実装する良い方法ではありませんが、この記事はゲームの作成ではなく、オブジェクトの作成と使用に関するものです。

オブジェクトは常に新しいキーワードを使用して追加する必要はありません。 以下は、オブジェクトが別のオブジェクトの値を使用して独自のプロパティを設定するプロジェクトのコードのサンプルです。

 

ここでは、オブジェクトの値がRオブジェクトのattrプロパティに渡される、非常に複雑なオブジェクトの使用方法を示しています。 JSON(JavaScript Object Notation)に精通している場合は、例の最初の部分で構文エラーのあるJSONを使用していると思うかもしれませんが、実際にはJSONコードではありません。

fill以外の変数名が引用されているのは、JavaScriptが変数名(CSSプロパティ)のマイナス演算子を処理しないようにするためです。 そのプログラムが作成されてから、font-familyなどのCSSプロパティをfontFamilyとして作成できるように変更が加えられましたが、このレガシーコードはその変更を利用するように適合されていません。

オブジェクトを使用する理由

オブジェクトは、何かの複数のインスタンスを作成する必要がある場合、または特定のタイプの何かに関連するデータをグループ化する簡単な方法が必要な場合に最適です。 上記のゲームの例では、objAlienオブジェクトの複数のコピーを作成することが可能であることがわかりますが、オブジェクトのプロパティを追加した後で操作することもできます。この例では、xプロパティでした。

いつオブジェクトを使用しないのですか?

プロジェクトで本当に必要ない場合は、オブジェクトを使用しないでください。 正当な理由なしにプログラムを過度に複雑にすることは無意味です。 プログラムが単純なことを行うように設計されている場合、OOP手法は必要ありません。

JavaScriptオブジェクトが他のOOP言語のオブジェクトより簡単に作成できる理由

JavaやVisualBasicのような言語では、オブジェクトの作成は大きな作業です。 これは、オブジェクトを定義する前に、オブジェクトのベースとなるクラステンプレートを作成する(または既存のテンプレートを使用する)必要があるためです。 JavaScriptでは、単純な構築手法(objectname = {…})が与えられているため、これは必要ありません。 JavaScriptのオブジェクトには、配列を含む任意のタイプの変数を含めることもでき、タイプ宣言は存在しません。 戻り値はオプションです。

それが良いことか悪いことかは議論の余地がありますが、JavaScriptプログラムは、存在しないプロパティ値を呼び出そうとしても失敗しません。 たとえば、次のように入力した場合:

上記のコード行で、IDが「par5」の要素内に1が配置されることは間違いありません。 しかし、次のようなものを入力する場合:

エイリアンのお気に入りのフレーバーは表示されず、par1にundefinedが表示されます。 ほとんどのアプリケーションではこれは問題になりませんが、一部のアプリケーションでは問題になります。 そのような場合は、その準備をして、それらに依存する前に有効な値をテストするコードを記述する必要があります。

これをテストするXNUMXつの方法は次のとおりです。

その応答は少し極端ですが、あなたは考えを理解します。 「!=」ではなく「!==」をテストしていることに注意してください。これは混乱しやすいことです。 これを行う別の方法は次のとおりです。

同じこと、違う方法。 オブジェクトを作成した後で、オブジェクトにプロパティを追加することもできます。 これは次の方法で行うことができます。

もちろん、同じ方法でプロパティの値を変更することもできます。 オブジェクトからfavoriteFlavorプロパティを削除するには、次のようにする必要があります。

これが必要になる状況はほとんどありません。

オブジェクトをより再利用可能にする

オブジェクトを作成する際の最大の潜在的な問題におそらく気づいたでしょう。つまり、異なる種類のエイリアンを持ちたい場合は、objAlien.typeプロパティを配列にする必要があります。 しかし、もっと良い方法があります。

この手法はオブジェクトプロトタイピングと呼ばれます。つまり、オブジェクトの基本的なテンプレートを作成しますが、すべての詳細は入力しません。 ここでも、オブジェクトをゲームに追加する実際の方法に近づいています。

これでオブジェクトのメソッドが定義されていますが、ほとんどのプロパティは定義されていません。 また、単純な変数ではなく、オブジェクト宣言が関数内にラップされています。これは、実際にはまだオブジェクトではないためです。 これはオブジェクトのプロトタイプであり、実際に作成せずにオブジェクトを作成する方法を説明しています。

したがって、プロトタイプに基づいてオブジェクトを実際に作成するには、次のようにします。

これはこれを行うのと同じです:

プロトタイプを作成したため、XNUMX番目の方法で作成する必要はなく、速度、武器の数、武器、開始位置が異なるさまざまな種類のエイリアンを宣言する方がはるかに簡単です。

次は何?

この記事はオブジェクト指向のJavaScriptの紹介であり、うまくいけば、この主題をわかりやすく説明し、威圧感を減らせます。 シンプルなオブジェクトを作成する方法、プロパティを追加、削除、変更する方法、メソッドを宣言して使用する方法、プロトタイピングを使用してオブジェクトをより簡単に再利用する方法など、すべての基本をカバーしました。 しかし、まだ学ぶべきことがまだたくさんあるので、良い出発点ができたので、より高度なOOPに関するチュートリアルやレッスンに自信を持って取り組むことができます。

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。