JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<div class="col">
  <div id="a1"></div>
  <button onclick="main()">更新</button>
</div>

SCSS

.col {
  display: flex;
  flex-direction: column;
  div {
    margin: 0.5em 0;
  }
}

JavaScript

/**
 * 負の値を先頭から順に探す関数
 */
function findMinusNumber(numberList){
  try{
    // forEach を実行
    numberList.forEach(item=>{
      if(item < 0){
          throw item;// throw で現在参照中のアイテムを投げる
      }
    })
  }catch(minusNumber){
    // throw された値をキャッチ。Error オブジェクトでなくてもOK
    if(typeof minusNumber === 'number'){
      return minusNumber; // throw された値を return;
    }
  }
  return null;
}
/** 画面に負の値探索結果を表示する関数 */
function printer(id, numberList){
  document.getElementById(id).innerText
    = `リスト：${JSON.stringify(numberList)}\n一番最初に見つかった負の値：${findMinusNumber(numberList)}`
}
/** ランダムデータ生成関数 */
const randomInt = () => Math.floor((Math.random() - 0.5) * 100);
const randomIntList = () => Array(5).fill(null).map(()=>randomInt());

/** 負の値探索&表示を実行 */
function main(){
  printer('a1', randomIntList())
}
main();