JavaScriptでオブジェクト指向におけるインターフェースは実現できますか？

Question

JavaScriptでは単一の継承しかできない等の他の言語との違いがあるため、オブジェクト指向設計の理解に苦労しています。
中でもインターフェースはどのように実現すればよいのでしょうか。

初学者であるため前提理解の無い抽象的な質問ではありますが、関連事項や連想される内容でも構いませんので回答よろしくお願いします。

Comments

[yambejp]

> 抽象的な質問ではあります

まさに抽象的すぎて何を知りたいかわかりません

[Lhankor_Mhy]

あまり詳しくないのですが、TypeScriptにはインターフェースがあるはずです。
https://qiita.com/nogson/items/86b47ee6947f505f6a7b

[hoshi-takanori]

JavaScript ではダックタイピングができるので、インターフェイスなんてものは不要です。
https://kazu-yamamoto.hatenablog.jp/entry/20071121/1195610224

[coco_bauer]

「オブジェクト指向設計の理解に苦労」というのは、何を対象とした、どのような設計において、何の理解をしようとしている時に発生したものなのですか？
オブジェクト指向の言語について、どのぐらいの種類の言語を知っていらっしゃって、それらを使ってどのようなアプリケーションを構築した経験（苦労した経験）をお持ちなのですか？

[miyabi_pudding]

JavaScriptは動的型付けなので、実装できたとしても、あんまし効力ないと思います。
どうしても、インターフェースを使いながらやりたいとなれば、TypeScriptでの開発をお勧めします。

Answer 1

要件定義

まず、「インターフェース」を要件定義しましょう。
「JavaScriptにない用語」を他言語と同じように使うのは混乱の元です。

ECMAScript 2019

ES2019では「将来の予約語」に interface があります。
この時点では、まだ使えません。

• 11.6.2.2 Future Reserved Words - ECMAScript® 2019 Language Specification

ES2019上に「Interface」の定義はありませんが、

• 4.3 Terms and Definitions - ECMAScript® 2019 Language Specification

文脈上で「Interface」を見ることは出来ます。
例えば、Iterable Interface

• 25.1.1.1 The Iterable Interface - ECMAScript® 2019 Language Specification
• Symbol.iterator - JavaScript | MDN

Symbol.iterator

DOM Level 3 Core

DOMは複数言語に適用可能なモデルであり、「Interface」があります。
やや古いですが、DOM Level 3 Coreでは、ECMAScriptにおける実装手段に言及されています。

• 附属書H ECMAScript言語バインディング - Document Object Model (DOM) Level 3 Core Specification 1.0

基本は関数オブジェクトですが、コンストラクタと非コンストラクタの二種類存在します。

console.log(typeof DOMException, typeof Node); // "function" "function"

console.log(new DOMException); // DOMExceptionのインスタンス
new Node; // TypeError: Illegal constructor

プロトタイプベース言語は、[[Prototype]] 上にオブジェクトがあれば良いので、必ずしもコンストラクタ呼び出し出来る必要はありません。

class Foo {}

class Piyo {
  constructor () {
    throw new TypeError('Illegal constructor');
  }
}

console.log(new Foo); // Fooのインスタンス
new Piyo; // TypeError: Illegal constructor

Re: kiahi39 さん

Answer 2

前提

インターフェースは共通の振る舞いを定義するものです。また、インターフェースはプログラム実行前に定める必要があります。プログラム実行中に変化されてはインターフェース(規格)としては当然使えなくなるのでプログラムを書く人が困ります。

よって、振る舞いが持つパラメータや戻り値には、静的な型 を指定しなければなりません。

静的な型 とは プログラムの実行前から一意に決まっている型 のことで、動的な型 とは 実行時の実際の値によって決まる型 のことです。静的な型を持つ言語はその性質上、コンパイルが必要な場合がほとんどです。

回答

JavaScript は動的型付け言語なので、インターフェースを使用することができません。

インタフェースを利用した設計を行いたい場合は、C#やJava、TypeScript のようなオブジェクト指向かつ静的型付けな言語を使用する必要があります。

#補足

hayataka2049 さんからのコメントを受け、回答内容を修正しました。
過去の回答はコメントからトレースできるよう下記に残します。

---

前提

オブジェクト指向には クラスベース と プロトタイプベース の2種類があります。

両者の違いはオブジェクトの生成方法です。クラスベースは クラスを通して生成(インスタンス化) します。プロトタイプベースは プロトタイプと呼ばれるオブジェクトをクローンして生成 します。

例えばC#やJava、TypeScript のような言語はクラスベース、JavaScript はプロトタイプベースのオブジェクト指向をサポートしています。

クラスベースな言語はクラスを定義する性質上、静的な型を取り扱います。プロトタイプベースな言語には 糖衣構文等で疑似的にサポートされている場合を除き、本質的にはクラスが存在せず、静的な型も持ちません。全て動的な型として扱います。

ここまでに述べた 静的な型 とは プログラムの実行前から一意に決まっている型 のことで、動的な型 とは 実行時の実際の値によって決まる型 のことです。静的な型を持つ言語はその性質上、コンパイルが必要な場合がほとんどです。

回答

インターフェースは内部に振る舞い(メソッド)を静的に定義します。よって、インターフェースを実装したオブジェクトは静的にその振る舞いを定義しなければなりません。

この性質上、JavaScript のような動的な型しか扱わない言語、すなわちプロトタイプベースなオブジェクト指向言語では実現することができません。

インタフェースを利用した設計を行いたい場合は、クラスベースなオブジェクト指向言語を使用する必要があります。

Comments

[hayataka2049]

クラスベース/プロトタイプベースと静的型付け/動的型付けは直接関連する問題でしょうか？　たとえばRubyは動的型付けでクラスベースなので、反例になりそうです。
# 変数に型があるかどうか、であってオブジェクト指向の実現方法は問題ではない気がしますが・・・もちろんクラスベースはクラスを型とみなせるので静的型付けに親和性があるとは言えるにせよ

[BluOxy]

Ruby がクラスベースかつ動的型付けな言語とは知りませんでした。クラスペースと静的型付け、プロトタイプベースと動的型付けのペアは密接な関係(ほぼイコール)にあると認識していましたが、そこが勘違いだったようです。

仰る通り、問題が混同していたので内容を整理します。ありがとうございます。

[hayataka2049]

静的片付け・プロトタイプベースという組み合わせはたぶん存在しないのと、動的型付け・クラスベースはクラスもインスタンスであるという方向に進んで行くとプロトタイプベース風になるので、たぶん密接に関わる問題ではあります。ただ、今回の回答の主旨からすると静的型付け/動的型付けに絞って議論した方がいいのでは。

[BluOxy]

> 静的型付け/動的型付けに絞って議論した方がいいのでは。

修正しました。 過去の回答は残しています。

Answer 3

インターフェースは実現できますか？

Object.setPrototypeOf()

回答済みとなって久しいご質問でしたが、追記になります。

DOM Standardの IDL に interface mixin と示される実装を class ブロック構文でどのように実現しているのかを探っていたところ、Object.setPrototypeOf() を利用すれば、以下のように、「振る舞い」を 別の class ブロックで定義できるようです。

class AnyInterface {

  increment() {
    this.data++;
  }

  decrement() {
    this.data--;
  }

}


class MyClass {

  constructor ( data = 0 ) {
    this.data = data;
  }

}

// mixin interface を実現？
Object.setPrototypeOf( MyClass.prototype, AnyInterface.prototype );

// test
let myClass = new MyClass( 3 );
console.log( myClass.data ); // 3

myClass.increment();
console.log( myClass.data ); // 4

myClass.decrement();
console.log( myClass.data ); // 3

---

以下、古い回答になります。

できないです。設計上はともかくとして、実装は不要と思います。

インターフェースは「変数やメソッドの定義忘れをコンパイラが解釈してエラー通知してくれる」という側面があると思いますが、JavaScriptではそのような実装はありません。

WikipediaのBuilderパターン にinterface / implements が例示されていましたので、javascript で示してみました。

codepen

• JapaneseHouseBuilder は単一継承で無理やりインターフェースを実装

（JavaScriptの成果物としては冗長になる）

• KamakuraBuilder は 抽象化の定義のみ

インターフェースを実装しようとすると、コード量が増えるため minify が推奨されるブラウザ環境では無駄になります。が、設計図書等には、必須な変数、メソッドであることを示せばいいと思います。