JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<button onclick="start()">デモスタート</button>
<div class="console">

</div>

CSS

.console {
  white-space: pre;
}

JavaScript

const base = [
  {first: 1, second: 1, msg:''},
  {first: 2, second: 3, msg:''},
  {first: 5, second: 8, msg:''},
];
const firstIsEvenList = base.filter(i => i.first % 2 === 0);// baseのうちの一部だけ格納
const secondIsOddList = base.filter(i => i.second % 2 === 1);// baseのうちの一部だけ格納

// msg を書き換え
const msgWriteByFIEL = () => {
  firstIsEvenList.forEach(i=>i.msg='first は偶数')
}
// msg を書き換え
const msgWriteBySIOL = () => {
  secondIsOddList.forEach(i=>i.msg='second は奇数')
}
// msg を表示
const msgDisplay = () => document.querySelector('.console').innerText = JSON.stringify(base).replace(/(\[|\]|},?)/g,'$1\n')

// msg を順々に書き換え
function start(){
  base.forEach(i => i.msg = `${i.first},${i.second}`);
  msgDisplay();  
  setTimeout(()=>{
    msgWriteByFIEL();
    msgDisplay();    
    setTimeout(()=>{
      msgWriteBySIOL();
      msgDisplay();  
    },2000)
  },2000)
}