JSFiddle - React, Tailwind, and code Playground

by Matsunaga_Ajike

HTML

<h1>型の変更</h1>
<h2>数値型</h2>
<p class="number-result"></p>

<h3>数値型をテキスト型に変更</h3>
<p class="string-result"></p>

<h3>数値型をテキスト型に変更し、再度数値型に変更</h3>
<p class="re-number-result"></p>

<h2>Boolean型</h2>
<h3>Boolean(true)を数値型へ変更 - True</h3>
<p class="true-result"></p>

<h3>Boolean(false)を数値型へ変更 - False</h3>
<p class="false-result"></p>

SCSS

$blue-color: #00BCD4;

h1, h2 {
    padding-left: 12px;
}

h2, h3 {
    padding: 4px;
}

h1 {
    background-color: $blue-color;
    padding: 10px;
    color: #ffffff;
}

h2 {
    border-left: solid 6px $blue-color;
}

h3 {
    border-bottom: solid 3px $blue-color;
}

JavaScript

// 記号の統一化
var colon = ' : ';

// 数値型の元データ
var numberData = 9;

/**
 * 数値型とテキスト型
 */
// 数値型
appendData(colon, '.number-result', numberData);

// 数値型をテキスト型に変更
var stringData = String(numberData);

appendData(colon, '.string-result', stringData)

// 数値型をテキスト型に変更し、再度数値型に変更
var reNumberData = Number(stringData);

appendData(colon, '.re-number-result', reNumberData)

/**
 * Boolean型
 */
// Boolean(true)を数値型へ変更
var isTrue           = true;
var isTrueNumberData = Number(isTrue);

appendData(colon, '.true-result', isTrueNumberData)

// Boolean(false)を数値型へ変更
var isFalse           = false;
var isFalseNumberData = Number(isFalse);

appendData(colon, '.false-result', isFalseNumberData)


/**
 * データをHTML追加
 */
function appendData(colon, className, data) {
	return $(className).append(data + colon + typeof(data));
}