0からはじめるJSX Part.3

続けてやっていきます。
(平日に突入すると更新頻度がガクンと落ちるはずなのは内緒)

今回もJSX Tutorialの続きを。
初学者の天敵、クラスさまのご登場です。

毎度毎度で恐縮ですが、私はプログラマではありません。
Javaを一口かじったことはありますが、オブジェクト指向言語ってのもJSXで初めて勉強するようなものです。

というわけで、独自の解釈・誤った解釈が多々含まれるであろうことを明記しつつ、自分用の勉強メモですと再三書いているわけです。

Pointクラス

class Point {
  var x = 0;
  var y = 0;

  function constructor() {
  }

  function constructor(x : number, y : number) {
    this.set(x, y);
  }

  function constructor(other : Point) {
    this.set(other);
  }

  function set(x : number, y : number) : void {
    this.x = x;
    this.y = y;
  }

  function set(other : Point) : void {
    this.x = other.x;
    this.y = other.y;
  }
}

• Pointという名前のクラスで、
• xとyという2つの変数と
• コンストラクタ：初期化するときのメソッドが3通りと
• メソッドが2通りある。

JSXに限らず、オブジェクト指向言語は基本的にクラスを宣言して、その中で全部やっちゃう・・というのが普通らしい。
というか最近のプログラミング言語ってそういうもんらしい。
で、クラスもそのまま使えるわけではなくて、基本的にはnewする必要がある・・と。
これがまたわからんかったんよ昔！（今もちゃんとわかってない

注釈

As you can see, member variables of Point, var x and var y, are declared without types, but their types are deducted from their initial values to be number.

You might be surprised at multiple definition of member functions: one takes no parameters and the others take parameters. They are overloaded by their types of parameters. When you construct the class with new Point(), the first constructor, which takes no parameters, is called. The second with two parameters will be called on new Point(2, 3) and the third with one parameter will be called as a copy constructor. Other forms of construction, e.g. new Point(42) or new Point("foo", "bar") will cause compilation errors of mismatching signatures. The Point#set() functions are also overloaded and the compiler know how to call the correct one.

見てわかる通り、Pointクラスのメンバー変数であるxとyは、型の指定なしに宣言されています。
そして、もし最初に代入したのが数値なら、その変数の型は数値型になるようになっています。

メンバー関数の定義の仕方に驚いたかもしれません。パラメータ：引数を受け取るやつと、そうでないやつがありますね。これらは引数の種類によって上書きされるようになっています。引数なしでnew Point()とした場合は、最初のパラメータなしのやつが使われます。new Point(2, 3)とした場合は、後者のやつが使われます。コピーコンストラクタと呼ばれる3番目のやつは、パラメータが1つの場合に使われます。
new Point(42) new Point("foo", "bar")のような使われ方をした場合は、どれにも当てはまらないのでエラーになります。set関数についても同じです。

メンバー○○ってなんやねん！って思ったら、とあるクラス内で宣言されてる変数やら関数やらのことでした・・。
まんまか！

こういう冗長な書き方には意味があって、このクラスの使われ方をきっちり定義しよう！っていう感じなんやね。

newしてみる

JSX - Tryのページで、以下のソースを記入すれば動くように書いてみた。

class Point {
  var x = 0;
  var y = 0;

  function constructor() {
  }

  function constructor(x : number, y : number) {
      this.set(x, y);
  }

  function constructor(other : Point) {
      this.set(other);
  }

  function set(x : number, y : number) : void {
      this.x = x;
      this.y = y;
  }

  function set(other : Point) : void {
      this.x = other.x;
      this.y = other.y;
  }
}

class Test {
  static function run() : void {
    var pt = new Point(10, 20);
    log pt.x; // 10
    
    pt.set(50, 100);
    log pt.x; // 50
    
    var pt2 = new Point(pt);
    log pt2.x, pt2.y; // 50 100
  }
}

ふむ、なるほど。

Pointクラスを使いたい場合は、

• 引数なしで呼び出す。
• 2つの数値を引数として与えて呼び出す。
• 他で作ったPointクラスを1つ与えて呼び出す。

set関数を使うときは、

• 2つの数値を引数として与えて使う。
• 他で作ったPointクラスを1つ与えて使う。

それ以外は全部エラー！
確かにここまでやれば、予期せぬ不具合とか想定外の動きとかはなくなる気がする。

本日の愚痴コーナー

最初はJSXの謳い文句であるfaster, safer, and easierってのを見て、「簡単なんや！」と心踊らせたんですけどね、全然簡単じゃないですorz
そんでもしかして、既に経験のあるプログラマーの方々が簡単に学べるって意味のeasierか！って思ったら、

....
so it is easy to for JavaScript programmers to start using JSX.

ほんとに書いてあった！ｗ

初学者は大人しくとほほのJava入門から見直すか・・。

次回はデータ型。