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>
<textarea id="result" rows="10" cols="50"></textarea>

JavaScript

'use strict';
$(function() {
  var HelloClass = h5.cls.RootClass.extend(function (super_) {
    return {
    
      // クラス名（完全修飾名）
      name: 'HelloClass',
      
      // クラスのフィールド定義
      field: {
        _name: null,
        _scale: {
        	defaultValue: 0
        },
        _read: {
        	defaultValue: "This is read only"
        }
      },
      
      accessor: {
      	accessible: null,
        scale: {
        	get: function() {
          	return this._scale;
          },
          set: function(val) {
          	this._scale = val * 100;
          }
        },
        read: {
        	get: function() {
          	return this._read;
          }
        }
      },
      
      // クラスのメソッド定義
      method: {
        constructor: function (params) {
        	// 親クラスのコンストラクタ呼び出し
          super_.constructor.call(this);          
        	this._name = params;
        }
      }
    };
  });

  h5.u.obj.expose('Hello', {
    HelloClass: HelloClass
  });
});

$(function() {
  var hello = Hello.HelloClass.create();
  hello.accessible = 'Accessible!';
  var result = $("#result");
  result.val(result.val() + hello._p_accessible);
  hello.scale = 200;
  result.val(result.val() + "\n" + hello.scale);
  
  // これはエラーになります
  try{
  	hello.read = "Update string";
  }catch(e) {
    result.val(result.val() + "\n" + e);
  }
  result.val(result.val() + "\n" + hello.read);
  
  // これはエラーになります
  try{
	  hello.unknown = "Update!";
  }catch(e) {
    result.val(result.val() + "\n" + e);
  }
});