JavaScript

React,Angularに挫折した人たちへ

More than 1 year has passed since last update.


概要

フロントエンド(CSSテク,DOMの概念など)にそこまで明るくない人向けに

JSだけでWeb画面が作れるようにフレームワーク(mofron)を作成しました。

React,Angular的な話は出てきません。


経緯


jQueryプラグインしんどい

親切な誰かが作ってくれた様々なjQueryプラグインをありがたく活用しています。

CSSなどを知らなくても優れたデザインと機能を持ったUI部品を構築できて非常に助かっています。

ただ、セレクタ(id名やらclass名やら)がとても面倒くさいです。。

HTML側で定義したid名などをJS側で一致させるように指定する必要があります。

動的にタグを生成したりすると、もっとややこしくなってきて手に負えません。

じゃReact,Angularに乗り換えましょうか??


専業タイプと兼業タイプ

Web開発に携わる人には専業タイプと兼業タイプがいると思っています。

例えば普段から何らかのWeb開発を行っている人(専業タイプ)と

Webには直接関係のない別の専門があって簡潔なWeb画面も自前でやっているという人(兼業タイプ)。

私は兼業タイプです。

両者のやっている事は同じWeb開発でも大分違いますよね?

当然ながら最近の流れを追う為に割ける時間も違って来ますよね?

兼業の人がVDOMの魅力に惹かれて新しいフレームワークを1から勉強して

reduxあたりも完璧におさえておくべきか、、

本当にそこまで必要か?本業に支障でないだろうか??

兼業には兼業向けの仕組みが必要なのでは?


兼業タイプが求めるもの

自分は兼業タイプでフロントエンドの流れを追うのがとても辛いです。

CSSは未だによくわからないですし、タグ,DOM操作も面倒くさいです。。

それらは裏で動くようにして、特に意識しなくてもWeb画面が作れるようにならないだろうか?

他言語(JavaのSwingなど)のGUI開発と同じような感覚でフロントエンド開発が可能ならば、

少なくとも自分は助かるんですよね。


概要

上記の経緯がありまして、JavaScriptフレームワークmofronを作りました。

他の言語でのGUI開発経験はあるが、フロントエンドはさっぱりという人を特に対象としています。

主な特徴としては以下になります。


  • フロントエンドの要素(CSS,DOMなど)を可能な限り隠蔽

  • 各UIをコンポーネントとして定義、JSから配置可能

  • Swingや.NETに似たIFを提供


チュートリアル

細かい内部の仕組みは別の機会でやるとしてとりあえずmofronを使うとどんなコードになるのか、

感覚だけでも掴んでもらえたらと思います。


環境構築

CentOS 7を例にした環境構築。知っている人は飛ばして構わないです。

node,babel,webpackあたりを使ってます。


node.jsインストール

sudo yum -y update

sudo yum -y install epel-release
sudo yum -y install nodejs npm


作業ディレクトリ作成

mkdir -p /var/www/html/test_prj/src

mkdir -p /var/www/html/test_prj/dist
cd /var/www/html/test_prj/


npmパッケージインストール

npm init                                                 # 適当にEnter連打

npm install --save-dev webpack # 複数のJSファイルを1つにまとめる的なやつ
# ↓最近のイケイケなJSソースをレガシーなJSに変換する的なやつ
npm install --save-dev babel-core babel-loader babel-preset-es2015
npm install --save-dev mofron

自分の環境では以下のようになった(2016/12/23)。


  • npm v3.10.8


    • webpack v1.14.0

    • babel-core v6.21.0

    • babel-loader v6.2.10

    • babel-preset-es2015 v6.18.0




webpack設定ファイル作成

とりあえずコピペで。

vi webpack.config.js

const webpack = require("webpack");
module.exports = {
entry: './src/test.js', // 変換対象JSファイル
output: {
path: __dirname + '/dist',
filename: 'app.js' // 変換後JSファイルの配置先
},
plugins: [
new webpack.optimize.UglifyJsPlugin() // JSファイルをコンパクトにする
],
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader' ,
query: {
presets: ['es2015'] // es2015を利用可能にする
}
}]
}
};


ボタンコンポーネントの利用

前置きが長くなりましたがここからがmofronの基本的な使い方です。

とりあえずボタンを表示してみます。


index.html

<html>

<head></head>
<body style="margin:0px;padding:0px;"></body>
<script src='./dist/app.js'></script>
</html>


src/test.js

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'); // クリックイベント
});


以後ファイルを更新したらwebpackを実行してください。es-6からJSに変換しています。

`npm bin`/webpack     # ./src/test.jsとrequireしたJSを1つにまとめて./dist/app.jsを生成

DEMO


拡張コンポーネント配置

mofron-comp-buttonはbuttonタグを挿入する単純なコンポーネントで、

デザインなどは最低限のものしか定義していません。

mofron-comp-buttonをベース(buttonクラスを継承)に作られた

新たな拡張ボタンを作成,利用することが出来ます。

以下は拡張ボタンであるUjarakButtonを利用する例になります。

クラスを継承して作成されているので最低限の機能を利用するのであれば

requireの部分だけ変更するだけで良いです。

npm install mofron-comp-button-ujarak            # 拡張コンポーネント(UjarakButton)をインストール


src/test.js

require('mofron');

let Button = require('mofron-comp-button-ujarak'); // ココを変更するだけ
// 以降は先ほどと同様

// 一番単純な表示
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'); // クリックイベント
});


DEMO

今回はbuttonを例にしたが、ベースとなるコンポーネントは他にも用意しています。

inputtext,checkbox,tab,..etc それらを基底コンポーネントとしてクラスを継承し、

拡張されたコンポーネントを作成することが出来ます。

一度作成した拡張コンポーネントはインストール後、requireする事で再利用出来ます。


エフェクト表示

表示方法をいい感じにしたいならエフェクト機能を利用します。

以下はフェードインでボタンを表示する例になります。


./src/test.js

require('mofron');

let Button = require('mofron-comp-button-ujarak');
let Fade = require('mofron-effect-fade');

let btn = new Button('ujarak');
btn.addEffect(new Fade()); //フェードインの指定
btn.visible(true); //フェードインで表示開始


DEMO

他にもスライド、影、ぼかしなどのエフェクトがあります。

また、mofron.effect.Baseクラスを継承して

独自のエフェクトを実装する事も可能です(中級者向け)。


レイアウト適用

各UI部品をどのように表示させるのかという指定はレイアウト機能を使用します。


src/test.js

require('mofron');

let Frame = require('mofron-comp-frame'); // Frame使いたい
let Button = require('mofron-comp-button-ujarak'); // Ujarakボタン使いたい
let Center = require('mofron-layout-hrzcenter'); // 中央寄せレイアウト

var frm = new Frame();
frm.addLayout(new Center()); // 真ん中表示指定
frm.addChild(new Button('button 1')); // frameの中にボタンを表示する
frm.addChild(new Button('button 2')); // frameの子コンポーネント全てに指定したレイアウトが適用される
frm.visible(true);


DEMO

他にも横並び、マージン、グリッドレイアウトを提供しています。

また、mofron.layout.Baseクラスを継承して独自のレイアウトを実装する事も可能です(中級者向け)。


テンプレート利用

コンポーネントの配置やレイアウトを適用する作業はコンテンツ内容によっては毎回同じような事をしています。

テンプレートはそういったものを定義し、再利用可能な仕組みを提供しています。

再利用時はコンテンツ内容などの必要最低限のトッピングだけを行えば良いです。

npm install mofron-tmpl-simpleconts        # テンプレート(SimpleContents)をインストール

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);

DEMO

他にもログイン、メニュー、XX一覧などのテンプレートの実装を予定しています。

また、mofron.tmpl.Baseクラスを継承して独自のテンプレートを実装する事も可能です(上級者向け)。


まとめ

mofronを使う事でタグやCSSなどを意識しなくてもピュアなJSだけでWeb画面が作れる。

が、それは拡張コンポーネントやテンプレートが充実したらの話です。

まずはコンポーネントの種類やデザインのバリエーションを増やしていく予定です。

将来的には一覧から目的のコンポーネントを探せる仕組みを構築し

気に入ったコンポーネントがあったらそれをインストール、

インストールした複数のコンポーネントをJSで好きに配置していくスタイルを確立して行きたいです。

そうすればUIの部分に時間を取られる事なく、

本来専念したいロジック部分に注力できますので。