BookmarkLINEJavascriptはES6でclassキーワードが導入されましたが、糖衣構文(シンタックスシュガー)であり現状ではプロトタイプベースのオブジェクト指向言語であると分類されています。そんなJavaScriptのオブジェクトは、プロトタイプオブジェクトのプロパティを遡るようにして保持しています。今回は、JavaScript&jQueryを使ってPrototypeチェーンを実装していきます。開発環境は以下の通りです。v3.3.1尚、今回はコンパイルが不要(ES6不使用)の範囲でのPrototypeチェーンを実装していきます。ベースコード今回はプロトタイプチェーンのベースを示す事がメインなのでとりとめて何かの機能を作るものではありませんが、動作確認の為にボタンやリストの追加などを行います。基本となるHTMLコードを記します。src="js/prototype_init.js"></script><script></script></body></html>読み込んでいるのはjQueryのコアソース(CDN)と、今回のスクリプトを記述するJSファイルです。HTMLはcontainerクラス内にあるmainクラスのを主軸としてJSを展開していきます。続いて、JSファイルへベースのJSを記述していきます。obj;}変数Mainにコンストラクタとしての役割を持つ関数を代入しています。今回ここでは、内包するプロパティを設定しています。getInstance関数でnew演算子を用いて、Mainのコンストラクタを動作させます。ここで生成されるオブジェクトが機能のメインオブジェクトとなります。ここでHTMLに戻って、これらを使ってMainオブジェクトを生成します。});</script>getInstanceメソッドを使ってMainオブジェクトを生成します。その際に、コンストラクタへ「機能名」「対象クラス名」「サンプルデータ配列」を渡しています。定義した通り、これらを初期値として保持するMainオブジェクトが生成されます。オブジェクトに機能と処理を持たせるベースとなるオブジェクトが作成できたら、このオブジェクトに機能を付与していきます。今回は、ボタンをクリックしたらリストを表示する。いう機能を付けるので、それぞれの処理メソッドや、イベントの登録を定義します。Mainオブジェクトにメソッドを追加するには以下のように記述します。処理};プロトタイプチェーンの定義の仕方は何通りかありますが、今回は外部から定義していく形にしています。この方式で機能の追加、そしてイベントの登録を行ったもの(完成形)が以下になります。obj;}イベントの登録は、getInstance関数の中で生成したオブジェクトを用いて行います。このようにして、定義された機能は、Mainオブジェクトを生成した後に、内部でも外部でも参照でき利用する事が可能です。関数の中で別の関数を呼んだり、Mainオブジェクトを取得した変数(外部)からもコールできます。←Mainオブジェクトで定義したファンクションを外部からでも使用できる});プロトタイプチェーンを用いる事の利点JSを書く上でプロトタイプチェーンを使う事の利点の1つは、ソースコードを1つの機能として収束できる点だと思います。フレームワークを用いないJavascriptや、jQueryでもそうですが、WEBアプリケーションの規模が大きくなればなるほどソースコードも増え、気が付けばJSだけで何千・何万という行数になる事も少なくありません。最近ではReactやAngularJSも出てきて体系だったソース管理(MVW・MVVM・MVCという意味で)が行えるようになっていますが、jQueryなどは工夫しないとアプリケーションの規模拡大と共にソースコードがただただ肥大化していくので、そこを嫌うエンジニアも少なくありません。(チーム開発をガンガン行うところではやはり管理が難しいのもわかる)ただし、まだまだレガシーとして活用され、現在も開発が進められているjQueryは無下にできない優秀なJSフレームワークの1つだと私は考えています。プロトタイプチェーン自体は別にjQueryのものではありませんが、Javascriptを効率よく書く為に有効な手段の1つがこのプロトタイプチェーン(継承)になります。プログラマ的な利点の1つとして、thisスコープの明確化も上げられます。Javascriptを定義していくと、thisのスコープを見失う場合(このthisが何を指しているかわからなくなる・このthisが意図しているスコープじゃなかった問題)がありますが、Prototypeチェーンで定義するとthisのスコープが同一オブジェクト内で自身(のオブジェクト)に向き、スコープが揃うので、1つの機能として迷子にならずにプログラミングを進められるという利点もあります。jQueryに至ってはやはり直接DOM操作を行う上でその対象が決まっていたりする事が多いので、対象のjQueryElementを自身に内包しておけば、それを呼び出すだけで良くなり、実装効率も向上します。今回のデモでは何かの機能を作ったわけではないのであまりソースコード自体の解説を行いませんでしたが、対象となる要素の取り回しやデータの方向などはある程度記述しておいたので、是非読み解いて自分でも書いてみてください。イベントレポート2019.12.8MySQL8.0.16で追加されたCHECK制約を試してみる。2019.12.2LaravelのContracts(契約)とは。SESを使ってAPIメール送信を行う(Mailableクラス&SimpleEmailService)2019.12.3MySQL8.0.16で追加されたCHECK制約を試してみる。RitoLaboこのサイトについて利用規約プライバシーポリシ。