bytes.jsを使ってファイルサイズ表示を分かりやすくする

公開日時
更新日時

jsでFileを扱う際にsizeプロパティを利用するとファイルサイズを取得できる。

ただ、サイズがバイト数で返ってくるため人間にとってはパッと分かりづらい。

そこで、bytes.jsを使って単位付きの表示に変換することにした。

  • インストール
yarn add bytes
yarn add -D @types/bytes
  • 使い方
import bytes from 'bytes'
import React from 'react'

const Sample = () => {
  return (
    <>
      <p>{bytes(1024, { unitSeparator: ' ' })}</p>
      <p>{bytes(1024 * 1024, { unitSeparator: ' ' })}</p>
      <p>{bytes(1024 * 1024 * 1024, { unitSeparator: ' ' })}</p>
    </>
  )
}

export default Sample
  • 結果
1 KB
1 MB
1 GB

分かりやすい。


Related #js

Next.js 11

手軽にアップグレードできた

仕事ですぐに使えるTypeScript

奥が深い

prismのモックサーバはexamples定義からレスポンスを返してくれる

仕様書を作る際はexamplesも定義するようにしておきたい

明日のゴミ収集対象をSlackに通知する

これでもう翌日のゴミ収集内容に迷わない