TypeScript / js / mofmof.js 並べてみて、第三者から見れば動いているコードにコメントがあるのって凄くありがたい事かなーって今更ながらに再確認(長い

# CSS3 の flexbox をサポートしているブラウザで御覧ください

// TypeScript

interface Size {
    _width: number;
    _height: number;
    getWidth(): number;
    setWidth(value: number): void;
    getHeight(): number;
    setHeight(value: number): void;
}

class Box implements Size {
    _width: number = 0;
    _height: number = 0;
    constructor(width: number = 0,
                height: number = 0) {
        this._width = width;
        this._height = height;
    };
    public getWidth() {
        return this._width;
    };
    public setWidth(value: number) {
        this._width = value;
    };
    public getHeight() {
        return this._height;
    };
    public setHeight(value: number) {
        this._height = value;
    };
}






class BorderBox extends Box {
    _border: number = 0;
    constructor(width: number = 0,
                height: number = 0,
                border: number = 0) {
        super(width, height);
        this._border = border;
    };
    public getBorder() {
        return this._border;
    };
    public setBorder(value: number) {
        this._border = value;
    };
}




var box = new BorderBox(100, 200, 3);

console.log(box.getWidth(),
            box.getBorder()); // -> 100 3

// TypeScript -> js

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
}




var Box = (function () {
    function Box(width, height) {
        if (typeof width === "undefined") { width = 0; }
        if (typeof height === "undefined") { height = 0; }
        this._width = 0;
        this._height = 0;
        this._width = width;
        this._height = height;
    }
    Box.prototype.getWidth = function () {
        return this._width;
    };
    Box.prototype.setWidth = function (value) {
        this._width = value;
    };
    Box.prototype.getHeight = function () {
        return this._height;
    };
    Box.prototype.setHeight = function (value) {
        this._height = value;
    };
    return Box;
})();




var BorderBox = (function (_super) {
    __extends(BorderBox, _super);
    function BorderBox(width, height, border) {
        if (typeof width === "undefined") { width = 0; }
        if (typeof height === "undefined") { height = 0; }
        if (typeof border === "undefined") { border = 0; }
        _super.call(this, width, height);
        this._border = 0;
        this._border = border;
    }
    BorderBox.prototype.getBorder = function () {
        return this._border;
    };
    BorderBox.prototype.setBorder = function (value) {
        this._border = value;
    };
    return BorderBox;
})(Box);

var box = new BorderBox(100, 200, 3);

console.log(box.getWidth(), box.getBorder());

// mofmof.js

mm.Interface("Size", {
    getWidth: "function",
    setWidth: "function",
    getHeight: "function",
    setHeight: "function" 
});



mm.Class("Box:Size", {
    init: function(width,    // @arg Number/undefined(= 0):
                   height) { // @arg Number/undefined(= 0):
        mm.allow(width,  "Number/undefined");
        mm.allow(height, "Number/undefined");

        this._width  = width  || 0;
        this._height = height || 0;
    },
    getWidth: function() { // @ret Number:
        return this._width;
    },
    setWidth: function(value) { // @arg Number:
        mm.allow(value, "Number");

        this._width = value;
    },
    getHeight: function() { // @ret Number:
        return this._height;
    },
    setHeight: function(value) { // @arg Number:
        mm.allow(value, "Number");

        this._height = value;
    }
});

mm.Class("BorderBox:Box", {
    init: function(width,    // @arg Number/undefined(= 0):
                   height,   // @arg Number/undefined(= 0):
                   border) { // @arg Number/undefined(= 0):
        mm.allow(border, "Number/undefined");

        this._border = border || 0;
    },
    getBorder: function() { // @ret Number:
        return this._border;
    },
    setBorder: function(value) { // @arg Number:
        mm.allow(value, "Number");

        this._border = value;
    }
});


var box = new mm.BorderBox(100, 200, 3);

console.log(box.getWidth(),
            box.getBorder()); // -> 100 3

上記はとても簡単な例なのでどれも大差が無いように見えますね。

では、言語仕様を一旦忘れ、言語とは直接関係のない実際の開発現場をイメージしてみましょう。

中～大規模開発では、必然的に携わる人間が増え、ソースコードもあっさり数万行オーダーになります。

が… 遅れて参加したり、スポット的に参加するメンバーは(ソースコードの規模にかかわらず)大抵ろくなレクチャーも受けられずに、ただただコードを読み解く状況に陥ったりします。
# 経験者も多いのでは?

そういったハードラックな状況でも、ステップ実行で動かしながらコメント(ヒント)が読めると、大変ありがたかったりします。
言語仕様も大事ですが、私は、コメントにもコードを補う大切な役割があると考えています。

# Source Mapsを使い、コメントを含んだ元コードと変換後のコードを左右に表示すればある程度はなんとかなりそうですが、
# 横が 1600px ぐらい必要そうで、きっと MBA だとすごくやりづらいのではないかと

TypeScript などの js生成言語に望むこと

コメントが不要なら Minifier で除去できるので、
(大変だと思うけれど) js生成言語はコメントをキープしつつコードを生成してくれたら「凄くいい」って思いますね。

どっこいしょー

こうやって並べてみると、mofmof.js は、コメントを見ながら動かしたい人に向いてるんじゃないかなと。