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

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

新規登録して質問してみよう
ただいま回答率
85.50%
インターフェース

インターフェイスという用語はハードウェア・ソフトウェアの両方に使うことができます。 一般的に、インターフェイスは内部処理の詳細を見せないように設定されます。オブジェクト指向プログラミングにおいて、インターフェイスはabstractクラスとして定義されます。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

JavaScript

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

Q&A

解決済

3回答

8540閲覧

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

kiahi39

総合スコア24

インターフェース

インターフェイスという用語はハードウェア・ソフトウェアの両方に使うことができます。 一般的に、インターフェイスは内部処理の詳細を見せないように設定されます。オブジェクト指向プログラミングにおいて、インターフェイスはabstractクラスとして定義されます。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

JavaScript

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

0グッド

3クリップ

投稿2020/02/28 06:58

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/02/28 07:04

> 抽象的な質問ではあります まさに抽象的すぎて何を知りたいかわかりません
coco_bauer

2020/02/28 07:36

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

2020/02/28 09:18

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

回答3

0

要件定義

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

ECMAScript 2019

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

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

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

JavaScript

1Symbol.iterator

DOM Level 3 Core

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

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

JavaScript

1console.log(typeof DOMException, typeof Node); // "function" "function" 2 3console.log(new DOMException); // DOMExceptionのインスタンス 4new Node; // TypeError: Illegal constructor

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

JavaScript

1class Foo {} 2 3class Piyo { 4 constructor () { 5 throw new TypeError('Illegal constructor'); 6 } 7} 8 9console.log(new Foo); // Fooのインスタンス 10new Piyo; // TypeError: Illegal constructor

Re: kiahi39 さん

投稿2020/06/03 12:57

編集2020/06/03 13:02
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

前提

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

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

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

回答

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

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

#補足

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


前提

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

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

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

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

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

回答

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

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

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

投稿2020/02/28 09:56

編集2020/02/28 12:11
BluOxy

総合スコア2663

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hayataka2049

2020/02/28 10:59

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

2020/02/28 11:20

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

2020/02/28 11:58

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

2020/02/28 12:13

> 静的型付け/動的型付けに絞って議論した方がいいのでは。 修正しました。 過去の回答は残しています。
guest

0

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

Object.setPrototypeOf()

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

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

javascript

1class AnyInterface { 2 3 increment() { 4 this.data++; 5 } 6 7 decrement() { 8 this.data--; 9 } 10 11} 12 13 14class MyClass { 15 16 constructor ( data = 0 ) { 17 this.data = data; 18 } 19 20} 21 22// mixin interface を実現? 23Object.setPrototypeOf( MyClass.prototype, AnyInterface.prototype ); 24 25// test 26let myClass = new MyClass( 3 ); 27console.log( myClass.data ); // 3 28 29myClass.increment(); 30console.log( myClass.data ); // 4 31 32myClass.decrement(); 33console.log( myClass.data ); // 3

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

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

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

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

codepen

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

(JavaScriptの成果物としては冗長になる)

  • KamakuraBuilder は 抽象化の定義のみ

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

投稿2020/02/28 08:33

編集2020/06/03 11:13
AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問