読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

0からはじめるJSX Part.5-1

JavaScript JSX

5回目でございます。
今回はちょっと長くなるので2部構成で。
あと1、2回でJSX Tutorialは終わるので、そこで一区切りかな?

最近は、Introduction to JSXの20枚目にある通り、JSX - Tryのページで試しまくりです。
このスライドIntroduction to JSXにもお世話になりました。

そうは言いつつ、いつも通りJSX Tutorialを見ていきます。

クラスとインターフェース

Javaに初めて出会った時のあのイヤな感じ再来。

JSX is a class-based object-oriented language, and its class model is similar to Java.

a class may extend another class (single inheritance)
a class may implement multiple interfaces
all classes share a single root class: the Object class

JSXはJavaに似たクラスベースのオブジェクト指向言語です。

  • クラスは他のクラスを継承することができます。(でも多重継承はしない)
  • 複数のインターフェースを実装することができます。
  • 全てのクラスは、Objectクラスというクラスを有しています。

JavaScriptの肝はObjectっていうのと同じイメージかな?
このインターフェースとか継承とかいう言葉が、初学者の壁なんよなぁ・・。

とりあえずサンプルソース

interface Flyable {
	abstract function fly() : void;
}

abstract class Animal {
	function eat() : void {
		log "An animal is eating!";
	}
}

class Bat extends Animal implements Flyable {
	override function fly() : void {
		log "A bat is flying!";
	}
}

abstract class Insect {
}

class Bee extends Insect implements Flyable {
	override function fly() : void {
		log "A bee is flying!";
	}
}

class _Main {

	static function main(args : string[]) : void {
		// fo bar
		var bat = new Bat();
		
		var animal : Animal = bat; // OK. A bat is an animal.
		animal.eat();
		
		var flyable : Flyable = bat; // OK. A bat can fly
		flyable.fly();
		
		// for Bee
		var bee = new Bee();
		
		flyable = bee; // A bee is also flyable
		flyable.fly();
	}
}

In the example, the Bat class extends the Animal class, so it inherits the Animal#eat() member function, and it can be assigned to a variable typed to Animal. The class also implements the Flyable interface overriding the Flyable#fly() member function, so it can be assigned to a variable typed Flyable. There's also another flyable class, Bee. By using the Flyable interface, it is possible to deal with both classes as a flyable being, even if the organ of a bee is completely different from that of a bat.

BatクラスはAnimalクラスを継承しています。
そのため、eat関数が使えると同時に、Animal型として認識されます。
同時に、Flyableインターフェースを実装しているので、fly関数を使うことができ、Flyable型も持つことになります。

他のFlyableなものとして、Beeクラスを定義しています。
Batとは別起源で定義されているBee(BatはAnimalクラスから、BeeはInsectクラスから定義)ですが、同じくFlyableインターフェースを実装しているので、Batと同じくFlyableなものとして扱うことができます。

When overriding a member function, the use the override keyword is mandatory. Otherwise the compiler will report an error. In other words, you are saved from unexpected interface changes in the base classes which cause compilation errors in derived classes instead of undesirable runtime errors.

メンバー関数をoverrideする時は、必ずoverride function...と明示しなければなりません。さもないとコンパイルエラーです。
こうすることで、望まないエラーを回避することができます。

まとめ

いわゆる他のOO言語経験者からすると、何を今更当たり前のことを!って感じなんでしょうか。
そのほかIntroduction to JSXの16枚目から補足すると。

  • 実装を伴うインターフェース(mixin)がある
  • HTML ElementなどのJSのクラスは、native classとしてインターフェースを記述すると使えるようになる
  • アクセス制御はない(public, protected, private)
    • _Hogeのようにアンダースコアがついたらprivateってのはあり

だそうです。

きっちり書かせる+コンパイル時にエラーは絡めとる!みたいな。
経験ないのでわかりませんが、そんなにプログラマーって自由にあれこれ書いちゃうもんなんかな?まぁやりたいようにやっちゃうんやろうけど。

プロジェクトでもちろんコーディングルールは定めるものの、それを超えてコードレベルで統制をはかることで、より良いコードを!ってのがJSXの目指すところなんでしょうねー。

このクラスベースっていう考え方や使い方についてはかなりトラウマなので、別記事で自分の考えと一緒にまとめておこうと思っています。
というわけで、Part5-2へ続く。