Reactで分と時間を変換する方法

方法1: プレーンなJavaScriptを使用する方法

function convertMinutesToHourAndMinute(minutes) {
  const hours = Math.floor(minutes / 60);
  const remainingMinutes = minutes % 60;
  return `${hours}時間 ${remainingMinutes}分`;
}
// 使用例
console.log(convertMinutesToHourAndMinute(90)); // 結果: 1時間 30分

方法2: moment.jsライブラリを使用する方法

import React from 'react';
import moment from 'moment';
function convertMinutesToHourAndMinute(minutes) {
  const duration = moment.duration(minutes, 'minutes');
  const hours = duration.hours();
  const remainingMinutes = duration.minutes();
  return `${hours}時間 ${remainingMinutes}分`;
}
// 使用例
function ExampleComponent() {
  return <div>{convertMinutesToHourAndMinute(90)}</div>; // 結果: 1時間 30分
}

方法3: date-fnsライブラリを使用する方法

import React from 'react';
import { format } from 'date-fns';
function convertMinutesToHourAndMinute(minutes) {
  const date = new Date(0, 0, 0, 0, minutes);
  return format(date, 'H時間 m分');
}
// 使用例
function ExampleComponent() {
  return <div>{convertMinutesToHourAndMinute(90)}</div>; // 結果: 1時間 30分
}

これらはReactで分を時間と分に変換するためのいくつかの方法です。プレーンなJavaScriptを使用する方法や、moment.jsやdate-fnsといった便利なライブラリを利用する方法など、様々な選択肢があります。お好みやプロジェクトの要件に応じて、最適な方法を選んでください。