JSFiddle - React, Tailwind, and code Playground

by Atsushi Nakatsugawa

HTML

<script src="https://moongift.s3.amazonaws.com/hifive/1.3.1/h5.dev.js"></script>
<link rel="stylesheet" href="https://moongift.s3.amazonaws.com/hifive/1.3.1/h5.css">
<script src="https://moongift.s3.amazonaws.com/hifive/1.3.1/ejs-h5mod.js"></script>
<h1>
hifive クラス実験場
</h1>
<strong>3秒ごとに数値が上がっていきます</strong>
<input type="text" id="count" />

JavaScript

$(function() {
  var SampleClass = h5.cls.RootClass.extend(function (super_) {
    return {
    
      // クラス名（完全修飾名）
      name: 'SampleClass',
      
      // クラスのフィールド定義
      field: {
        _count: null
      },
      
      // クラスのプロパティ（アクセサ）定義
      accessor: {
        scale: null
      },
      
      // クラスのメソッド定義
      method: {
        constructor: function (initialValue) {
        	// 親クラスのコンストラクタ呼び出し
          super_.constructor.call(this);
          // 初期値を設定（インスタンス生成時に指定）
          this._count = initialValue;
          
          // 初期値を設定（直接指定）
          this.scale = 1;
        },
        increment: function () {
          ++this._count;
          return;
        },
        getValue: function () {
          return this._count * this.scale;
        }
      }
    };
  });
  h5.u.obj.expose('hoge.fuga', {
    SampleClass: SampleClass
  });
});

$(function() {
  var sample = hoge.fuga.SampleClass.create(1);
  $('#count').val(sample.getValue());
  setInterval(function() {
	  sample.increment();
  	$('#count').val(sample.getValue());  
  }, 3000);
});