質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.04%

  • JavaScript

    13330questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 155

yamagata_user

score 31

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/12/09 14:42

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

    キャンセル

  • yamagata_user

    2017/12/09 15:38

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

    キャンセル

  • kei344

    2017/12/09 17:57

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

    キャンセル

回答 3

+4

 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.


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

 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

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.


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

 Element.prototype.innerHTML

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

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 を使用できる状態となっています。

Re: yamagata_user さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/10 07:55

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

    キャンセル

  • 2017/12/10 16:25

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

    キャンセル

  • 2017/12/12 21:38

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

    キャンセル

checkベストアンサー

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/09 18:01

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

    キャンセル

+1

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/13 22:03

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

    キャンセル

  • 2017/12/13 22:26

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

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

    キャンセル

  • 2017/12/14 22:36

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

    キャンセル

  • 2017/12/14 23:15

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

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

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

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

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

    キャンセル

  • 2017/12/14 23:19

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13330questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。