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>
<p><strong>こちらは犬（ハチ）です</strong></p>
<input type="text" id="dog" size="50" /><br />
<p><strong>こちらは猫（タマ）です</strong></p>
<input type="text" id="cat" size="50" />
<p><strong>こちらは動物クラスです</strong></p>
<input type="text" id="animal" size="50" />

JavaScript

$(function() {
  var AnimalClass = h5.cls.RootClass.extend(function (super_) {
    return {
    
      // クラス名（完全修飾名）
      name: 'AnimalClass',
      isAbstract: true,
      
      // クラスのフィールド定義
      field: {
        _name: null
      },
      
      // クラスのメソッド定義
      method: {
        constructor: function (params) {
        	// 親クラスのコンストラクタ呼び出し
          super_.constructor.call(this);          
        	this._name = params;
        },
        hello: function() {
        	return this._name;
        },
        cry: function(name, voice) {
        	return name + "'s crying voice is " + voice;
        }
      }
    };
  });
  
  var DogClass = AnimalClass.extend(function (super_) {
  	return {
    	name: 'DogClass',
      field: {
      	_voice: {
        	defaultValue: 'bow wow'
        }
      },
      method: {
        constructor: function (params) {
          super_.constructor.call(this, params);
        },
        cry: function() {
        	return super_.cry(this._name, this._voice);
        }
      }
    }
  });

  var CatClass = AnimalClass.extend(function (super_) {
  	return {
    	name: 'CatClass',
      field: {
      	_voice: {
        	defaultValue: 'mew'
        }
      },
      method: {
        constructor: function (params) {
          super_.constructor.call(this, params);
        },
        cry: function() {
        	return super_.cry(this._name, this._voice);
        }
      }
    }
  });


  h5.u.obj.expose('Animal', {
  	AnimalClass: AnimalClass,
    DogClass: DogClass,
    CatClass: CatClass,
  });
});

$(function() {
  var dog = Animal.DogClass.create('Hachi');
  $("#dog").val(dog.cry());

  var cat = Animal.CatClass.create('Tama');
  $("#cat").val(cat.cry());
  
  try {
	  var animal = Animal.AnimalClass.create();
  }catch(e) {
  	$("#animal").val(e);
  }
  
});