JavaScript一人リファクタリング

この記事はAteam Hikkoshi samurai Inc. × Ateam Connect Inc. AdventCalendar2021 10日目の記事です。
本日の担当は引越し侍の@acc1ioです。

はじめに

最近業務でJavaScriptを書くことが減ってきてしまっており、少し鈍ってるのを感じたので復習がてら勉強したての頃に書いてたコードを今の自分で書き直したいと思います。
多少の改変はお許しください。
少しはマシになってるといいなぁー！！🐣

一つ目

簡単なゲームを作った時のうちの一つの関数です。

// before
var switchPlayer = function() {
  document.getElementById(`current--${activePlayer}`).textContent = 0;
　　　　currentScore = 0;
  activePlayer = activePlayer === 0 ? 1 : 0;
  firstPlayer.classList.toggle('player--active');
  secondPlayer.classList.toggle('player--active');
}


// after
const　CurrentPlayer = document.querySelector('.player--0, .player--1');
const switchPlayer = () => {
  document.getElementById(`current--${activePlayer}`).textContent = 0;
　　　　currentScore = 0;
  activePlayer = activePlayer === 0 ? 1 : 0;
  CurrentPlayer.classList.toggle('player--active');
}

二つ目

上と同じファイルにあった関数
使用した形跡はなし

// before
function multiply(firstNum, secondNum) {
  secondNum = typeof secondNum !== 'undefined' ? secondNum : 1;
  return firstNum * secondNum;
}


// 値がない場合や未定義が渡された場合に、デフォルト値で初期化している。
// after
const multiply = ((a, b = 1) => {
  return a * b;
})

三つ目

ローカルファイルにあったが何か全く思い出せない。
何かのチュートリアルか...?

使用しているAPI randomuser

function sumpleUsers(page, results, gender) {
  var params = '';
  if (page === 0 || page) {
    params += `page=${page}&`;
  }
  if (results) {
    params += `results=${results}&`;
  }
  if (gender) {
    params += `gender=${gender}&`;
  }

  fetch('https://randomuser.me/api/?' + params)
    .then(function (response) {
      return response.json();
    })
    .then(function (result) {
    })
    .catch(function (error) {
    });
}
sumpleUsers(0, 24, 'male', 'ja');


// after
const sumpleUsers = ((page = 0, results = 10, gender = 'male') => {
  fetch(`https://randomuser.me/api/?page=${page}&results=${results}&gender=${gender}`)
    .then((responce) => {
      return response.json();
    })
    .then((result) => {})
    .catch((error) => {});
});

sumpleUsers();

四つ目

// before
const userDates = [{ name: 'Rogutown', value: 25 }, { name: 'ImpelDown', value: 35 }]

const response = {}
for (let i = 0; i < userDates.length; i++) {
  const calculatedValue = userDates[i].value * 5
  if (calculatedValue > 50) {
    response[userDates[i].name] = calculatedValue
  }
}


// after
const response = (() => {
  let obj = {}
  for (let i = 0; i < userDates.length; i++) {
    const calculatedValue = userDates[i].value * 5
    if (calculatedValue > 50) {
      obj[userDates[i].name] = calculatedValue
    }
  }
  return obj
})()

五つ目

// before
function dailyTask(must) {
  setTimeout(() => {
    must('終わった');
  }, 5000);
}

dailyTask((result) => {
  console.log(`今日のタスクは${result}`);
});


// after
const dailyTask = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('終わった');
    }, 5000)
  })
}

dailyTask().then(result => {
  console.log(`今日のタスクは${result}`);
})

まとめ

もう少しやりたかったですが力尽きてしまったので一旦この辺で...
個人的に今も良い書き方が出来てるかと言われると微妙ですが個人的には成長を感じました。
これからも復習も兼ねてたまには一人リファクタしようと思います。

次回

Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2021 10日目の記事は以上です。
お読みいただきありがとうございます。
明日は @m-otsukaさんがPyCaretについて書いてくださいます。ご期待ください！！