Webは表現力が高い一方、その高さ故にゼロから作ろうと思うと手間に感じてしまいます。デザインをあまり気にしない業務システムであっても、素のHTMLままでは使う気にならないでしょう。 そこで使ってみたいのがmofronです。.NETやSwingで作っているように、画面の設計をコードの中から行えるUIフレームワークです。

mofronの使い方

mofronの例です。ボタンを配置するコードです。

require('mofron');
let Button = require('mofron-comp-button');

// 一番単純な表示
new Button('test').visible(true);

let btn = new Button('size');
btn.width(150);        // 幅を150pxに設定
btn.visible(true);     // 表示(bodyへ反映)
btn.height(30);        // 表示後の変更も可能
btn.clickEvent(function() {
    alert('click');    // クリックイベント
});

このように表示されます。クリックイベントもちゃんと追加されます。

さらにこだわったレイアウトにするコードです。

require("mofron");
let Text = require("mofron-comp-text");
let Template = require("mofron-tmpl-simpleconts");

var conts = new Template('App Name');
conts.addConts (
    "Sub Ttitle 1",
    new Text('addConts()でコンテンツが追加される。')
);
conts.addConts (
    "Sub Ttitle 2",
    new Text('表示位置などはテンプレートがよろしくやってくれる。')
);
conts.visible(true);

テンプレートを定義して、そこにコンポーネントを配置していくだけでデザインはmofronに任せきりです。

mofronを使えばデザインやコンポーネントの配置は気にせずさくさくと画面を作れるようになります。ReactやAngular、Vueのようにコンポーネントを定義する使い方に慣れない方はmofronを使ってみてはいかがでしょう。

mofronはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

mofron/mofron