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のPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある

jsでSlack Webhookを送信する

公式のWebhook SDKを使うと手軽

jsの正規表現で拡張子を除いたファイル名を抽出する

キャプチャしてreplaceで置き換えた

Prismを使ってOpenAPI仕様書からモックAPIを生成する

Prismを使うことでサーバのAPI実装と並行してフロント開発も進められる