javascriptでいうところのインターフェースとはどんな意味なのでしょうか。

Question

getElementByIdは〇〇のインターフェース、console.logは〇〇のインターフェースみたいな言い方をしたときはどんな意味になるのでしょうか。

Comments

[kei344]

出展を明記されてはいかがでしょうか。

[yamagata_user]

過去にも複数あるのですが、例えば先ほど教えていただいたteratailのこの質問の「getElementByIdは、インターフェースdocumentとDocumentFragmentにしかない」という部分がわかりませんでした。maisumakunさんに回答依頼をさせていただこうと思ったのですが、やり方がわかりませんでした。 https://teratail.com/questions/103975

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。

Answer 1

DOM Level 2 Core

• Glossary - DOM Level 2 Core

interface
An interface is a declaration of a set of methods with no information given about their implementation. In object systems that support interfaces and inheritance, interfaces can usually inherit from one another.

---

• 附属書G 定義 - DOM Level 2 Core (ja)

インタフェース(interface)
インタフェース は，実装についての情報をもたないメソッドの集合の宣言とする。インタフェース及び継承をサポートするオブジェクトシステムでは，インタフェースは，一般に他のインタフェースから継承できる。

DOM Level 3 Core

• Glossary - DOM Level 3 Core

interface
An interface is a declaration of a set of methods with no information given about their implementation. In object systems that support interfaces and inheritance, interfaces can usually inherit from one another.

「DOM Level 2 Core」と一言一句同じです。

Web IDL

• 2.2. Interfaces - Web IDL

An interface is a specification of a set of interface members (matching InterfaceMembers). These are the members that appear between the braces in the interface declaration.

---

• 2.2. interface - Web IDL （第 2 版 — 日本語訳）

interface は、その宣言の波括弧を成す合間に現れる，一連のメンバが成す集合（ InterfaceMembers に合致）の仕様である。 これらのメンバは、 interface メンバ と称される。

Element.prototype.innerHTML

innerHTML は interface Element に属するIDL属性です。
仕様としては下記URLのIDLに記載があります。

• 2.3. Element インタフェースに対する拡張 - DOM Parsing and Serialization （日本語訳）

partial interface Element {
    [CEReactions, TreatNullAs=EmptyString] attribute DOMString innerHTML;
};

JavaScript としては Element.prototype.innerHTML にプロパティ(メソッドではない)が存在する事になります。

console.log(Element.prototype.hasOwnProperty('innerHTML')); // true

Elementとは DOM Interface Objectの一種であり、DOM上でいう要素ノードは必ず、Element が [[Prototype]] 上に存在します。

var p = document.createElement('p');
console.log(p.__proto__ === HTMLParagraphElement.prototype);        // true
console.log(p.__proto__.__proto__ === HTMLElement.prototype);       // true
console.log(p.__proto__.__proto__.__proto__ === Element.prototype); // true

このように、**プロトタイプチェーン(prototype-chain)**の仕組みによって上位プロトタイプに Element.prototype が存在する為、変数 p は innerHTML を使用できる状態となっています。

• 継承とプロトタイプチェーン - JavaScript | MDN

Re: yamagata_user さん

Comments

[yamagata_user]

メソッドの集合がインターフェースということは、プロパティ（innerHTMLなど）のことをインターフェースというのは誤りということになりますし、メソッド単体のことをインターフェースとも呼ばないのでしょうか。
「メソッドの集合」というのがよくわからないです。
こちらの質問（https://teratail.com/questions/103975）ではNonElementParentNodeがインターフェースとのことですが、そう考えるとHTMLDOMでnodeと呼ばれているもののみがインターフェースと呼ばれるということでしょうか。
ただその場合、「node＝メソッドの集合」と考えるのでしょうか。

[think49]

To: yamagata_user さん
親記事に Element.prototype.innerHTML の節を追記しました。
まず、「プロトタイプチェーン」について学習してみて下さい。
それから、仕様上にある interface が記載されているIDLを読み、コードを書いて関係性を確認してみれば、理解できるようになると思います。

[yamagata_user]

プロトタイプチェーン、調べてみます。
このたびはありがとうございました。

Answer 2

JavaScriptに限って言えば(非常に乱暴ですが)慣れるまでインターフェース≒オブジェクトと読み替えて構いません.

NOTE:
正確に言うと「○○オブジェクトは○○インターフェースを実装している」となります.

NOTE:
インターフェースはオブジェクト指向プログラミングでよく出てくる概念なのですが, JavaScriptはオブジェクト指向プログラミング言語としては異端なので, インターフェースという用語にとらわれず, 「そういうものだ」と割り切ったほうが良いです. （用語にこだわって先に進めないほうが問題）

getElementByIdは〇〇のインターフェース、console.logは〇〇のインターフェースみたいな言い方をしたときはどんな意味になるのでしょうか。

少なくとも「getElementByIdは〇〇のインターフェース、console.logは〇〇のインターフェース」という言い方はしません. 必ず, 「getElementByIdはインターフェース○○が持つ(提供している)プロパティである」と言います.

Comments

[yamagata_user]

わかりました。
少なくとも”マウスはパソコンのインターフェース”みたいに使うようなものではなさそうだと思いました。
これから学習を進めていく中でまた深く考えることにして、今はそのようなものだと考えることにします。
このたびはありがとうございます。

[defghi1977]

「”マウスはパソコンのインターフェース”みたいに使うようなものではなさそうだ」
いいえ, それはそれであっているのです. 「マウスはパソコンに位置を教えるためのインターフェース」であり, 「マウス移動」や「ボタンクリック」と言った”メソッド”を備えているのと同様, JavaScriptにおいても「操作の対象となるオブジェクトはそれを操作するためのインターフェースを備えている」のです.

このように目に見えないプログラムの中身を現実世界でイメージしやすいモノ(Object)に例えていく手法を「オブジェクト指向」と呼びます. そのため, 現実世界での「インターフェース」の存在に気がつけたのはJavaScript言語を支えるオブジェクト指向を理解する上で大きな前進と言えます.

[yamagata_user]

ご返信ありがとうございます。
javascript用語としてのインターフェースという言い方がこのサイトでも他の記事でもたまに目にするのですがずっと意味がわからなかったので気になりました。
プロパティやメソッドはそれぞれjavascriptオブジェクトに対して操作することができるので、特定のオブジェクトに対して操作することのできるプロパティやメソッドのことを「インターフェース」と呼んでいるのでしょうか。

[defghi1977]

インターフェースとオブジェクトの違いはプログラムにおける「仕様」と「実装」の違いです.

プログラムの設計/制作を行う際, オブジェクトにどのような機能を持たせるかを「インターフェース」仕様(メソッドやプロパティの名称や役割)として取り決め, その内容に沿って「オブジェクト」の中身（メソッドやプロパティの実際の振る舞い）をコーディングしていくこととなります.

逆にこれをインターフェースを使う側から見ると 「全てのオブジェクトは何らかのインターフェースを備えていて」JavaScriptはこの「インターフェースを通してオブジェクトの中身を操作する」となります.

DOMのインターフェースはこの「仕様」にあたる部分ですから, documentオブジェクトはDocumentインターフェースを実装しているので, Documentインターフェースに定義されている各種メソッド・プロパティ(getElementByIdとかid等)をJavaScriptから操作することでHTML文書の中身を操作できるのです.

よって,
> プロパティやメソッドはそれぞれjavascriptオブジェクトに対して操作することができるので、特定のオブジェクトに対して操作することのできるプロパティやメソッドのことを「インターフェース」と呼んでいるのでしょうか。
は若干言葉足らずですが概ね合っています.

[defghi1977]

ここでオブジェクトはインターフェースに定義されたメソッドやプロパティを全て実装している(もっている)わけですから, 最初に書いた「インターフェース≒オブジェクト」としてもさほどおかしくないことになります.
(ただし, あなたは既にインターフェースとオブジェクトの違いに薄々勘付いていますから, 無理に「インターフェース≒オブジェクト」であると解釈する必要はありません)

Answer 3

前回の質問で回答に書いた「インターフェースNonElementParentNode」ですが、JavaScriptには「インターフェース」という概念は存在しません。

一方で、HTMLやXMLを制御するためのDOMはJavaScriptの外側で定義されているものなので、「このようなメソッド・プロパティを持つもの」という意味での、仕様定義としてのインターフェースが存在しています。

Javaで実装されたDOMでは、NodeやElementといったインターフェースが、実際のJavaのインターフェース型として存在しています。

Comments

[yamagata_user]

回答依頼ができなかったのですがご本人から教えてくださり誠にありがとうございます。
インターフェースというとパソコンを使うときのマウスみたいな「（外部にあるパソコンを）操作するための道具」みたいな意味としてしか理解できていないのですが、今回の場合はgetElementByIdをメソッドとして持つことができるのはNonElementParentNodeのみ、という意味での”javascriptのメソッドやプロパティにアクセスすることができるもの”がインターフェースということでしょうか。