動かざることバグの如し

近づきたいよ 君の理想に

小数点以下の桁数を指定して四捨五入とかするTypeScriptコード

環境

  • TypeScript

コード

Javascriptにネイティブの実装はないので自分で実装する必要がある

// 切り捨て
export const floorDecimal = (value: number, n: number): number => {
  return Math.floor(value * Math.pow(10, n)) / Math.pow(10, n);
};

// 切り上げ
export const ceilDecimal = (value: number, n: number): number => {
  return Math.ceil(value * Math.pow(10, n)) / Math.pow(10, n);
};

// 四捨五入
export const roundDecimal = (value: number, n: number): number => {
  return Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
};

Mantine UIのCSS変更方法3種類の比較

mantineでは、コンポーネントにスタイルを適用させるために、Style props, sx prop, Styles APIの3つの方法が用意されています。

それぞれの方法には、メリットとデメリットがあります。以下に、それぞれの方法の特徴と使い分けのポイントをまとめてみました。

Style props

Style propsは、コンポーネントのルート要素に対して、CSSプロパティとしてスタイルを指定することができるプロパティです。例えば、以下のように書くことで、Textコンポーネントに太字、背景色、上マージンを適用できます。

<Text fw={'bold'} bg="orange.1" mt={'sm'}>nyaa</Text>

メリット

  • Style propsは、簡単にスタイルを指定できるため、開発速度が速くなります。
  • Style propsは、レスポンシブなスタイルをオブジェクト構文で指定できるため、メディアクエリを書く必要がありません。
  • Style propsは、テーマから値を参照できるため、一貫性のあるデザインを実現できます。

デメリット

  • Style propsは、コンポーネントのルート要素にしか適用できないため、ネストされた要素に対してはStyles APIを使う必要があります。
  • Style propsは、CSSプロパティとしてスタイルを指定するため、カスタムなロジックや関数を使うことができません。
  • Style propsは、プロパティ名が短縮されているため、可読性や予測性が低くなる可能性があります。

sx prop

sx propは、コンポーネントのルート要素に対して、関数としてスタイルを指定することができるプロパティです。例えば、以下のように書くことで、Textコンポーネントに太字、背景色、上マージンを適用できます。

<Text sx={(theme) => ({ fontWeight: 'bold', backgroundColor: theme.colors.orange[1], marginTop: theme.spacing.sm })}>nyaa</Text>

メリット

  • sx propは、関数としてスタイルを指定できるため、カスタムなロジックや関数を使うことができます。
  • sx propは、テーマから値を参照できるため、一貫性のあるデザインを実現できます。
  • sx propは、CSSプロパティと同じ名前を使うため、可読性や予測性が高くなります。

デメリット

  • sx propは、コンポーネントのルート要素にしか適用できないため、ネストされた要素に対してはStyles APIを使う必要があります。
  • sx propは、関数としてスタイルを指定するため、開発速度が遅くなる可能性があります。
  • sx propは、レスポンシブなスタイルをオブジェクト構文で指定することができません。

Styles API

Styles APIは、コンポーネント内の任意の要素に対して、classNamesやstylesプロパティを使ってスタイルを上書きすることができるAPIです。例えば、以下のように書くことで、Textコンポーネントに太字、背景色、上マージンを適用できます。

import { Text, createStyles } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  mytext: {
    fontWeight: 'bold',
    backgroundColor: theme.colors.orange[1],
    marginTop: theme.spacing.sm
  }
}));

const Sample = () => {
  const { classes } = useStyles();
  return (
    <Text className={classes.mytext}>nyaa</Text>
  );
};

メリット

  • Styles APIは、コンポーネント内の任意の要素に対してスタイルを上書きできるため、柔軟性が高くなります。
  • Styles APIは、createStyles関数を使ってスタイルを定義できるため、カスタムなロジックや関数を使うことができます。
  • Styles APIは、テーマから値を参照できるため、一貫性のあるデザインを実現できます。

デメリット

  • Styles APIは、コンポーネントのドキュメントを参照しながらスタイル名を探す必要があります。
  • Styles APIは、classNamesやstylesプロパティを使ってスタイルを上書きするため、開発速度が遅くなる可能性があります。
  • Styles APIは、レスポンシブなスタイルをオブジェクト構文で指定することができません。

以上が、mantineの3つのスタイル適用方法の特徴と使い分けのポイントです。Style propsは、簡単にレスポンシブなスタイルを指定したい場合に便利です。sx propは、カスタムなロジックや関数を使ってスタイルを指定したい場合に便利です。Styles APIは、ネストされた要素に対してもスタイルを上書きしたい場合に便利です。それぞれの方法にはメリットとデメリットがあるので、自分のニーズや好みに合わせて選択してください。

TypeScriptなライブラリをnpm公開する方法

環境

  • Nodejs v20
  • TS 5

以下は、TypeScriptライブラリをnpmに公開する手順の記事です。この記事では、TypeScriptのプロジェクトの初期設定、ビルド、公開、バージョンアップの方法について説明します。

初期設定

TypeScriptライブラリを作成するには、まずnpmのプロジェクトを初期化します。以下のコマンドを実行してください。

npm init -y

これで、package.jsonファイルが生成されます。このファイルには、プロジェクトの名前、バージョン、説明などの基本情報が記述されます。必要に応じて編集してください。

次に、TypeScriptとその型定義ファイル、およびビルドツールとしてtsupをインストールします。以下のコマンドを実行してください。

npm install -D typescript @types/node tsup

これで、node_modulesフォルダとpackage-lock.jsonファイルが生成されます。node_modulesフォルダには、インストールしたパッケージが格納されます。package-lock.jsonファイルには、インストールしたパッケージのバージョン情報が記述されます。

最後に、TypeScriptのコンパイラ設定ファイルであるtsconfig.jsonファイルを生成します。以下のコマンドを実行してください。

npx tsc --init

これで、tsconfig.jsonファイルが生成されます。このファイルには、TypeScriptのコンパイラオプションが記述されます。必要に応じて編集してください。

ビルド

TypeScriptライブラリをビルドするには、tsupを使います。tsupは、TypeScriptをJavaScriptに変換し、CommonJSとESMの両方のモジュール形式で出力するツールです。

まず、package.jsonファイルにビルドスクリプトを追記します。以下のように記述してください。

"scripts": {
  "build": "npx tsup ./src"
},

ここで、./srcはTypeScriptのソースコードが置かれているフォルダです。適宜変更してください。

次に、以下のコマンドを実行してビルドします。

npm run build

これで、distフォルダが生成されます。このフォルダには、JavaScriptと型定義ファイルが出力されます。

公開

TypeScriptライブラリをnpmに公開するには、まずpackage.jsonファイルに公開用の設定を追記します。以下のように記述してください。

  "files": [
    "dist",
    "package.json"
  ],
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
  "types": "./dist/index.d.ts",

ここで、

  • filesは公開するファイルやフォルダを指定します。ここでは、distフォルダとpackage.jsonファイルだけを公開します。
  • exportsはモジュールのエントリポイントを指定します。ここでは、CommonJS形式でrequireした場合は./dist/index.jsを、ESM形式でimportした場合は./dist/index.mjsを返します。また、型定義ファイルは./dist/index.d.tsです。
  • typesは型定義ファイルの場所を指定します。ここでは./dist/index.d.tsです。

次に、npmにログインします。以下のコマンドを実行してください。

npm login

これで、npmのユーザー名、パスワード、メールアドレスを入力するプロンプトが表示されます。正しく入力してください。

最後に、npmに公開します。以下のコマンドを実行してください。

npm publish

これで、TypeScriptライブラリがnpmに公開されます。npmのウェブサイトで確認してみてください。

バージョンアップの方法

TypeScriptライブラリを更新する場合は、バージョン番号を変更して再公開します。バージョン番号は、メジャー、マイナー、パッチの3つの数字で構成されます。例えば、v1.0.0というバージョン番号は、メジャーが1、マイナーが0、パッチが0です。

バージョン番号を変更するには、以下のコマンドを実行します。

npm version patch # <- v1.0.0 からv1.0.1 にアップ
npm version minor # v1.0.1 からv1.1.0 にアップ
npm version major # v1.0.1 からv2.0.0 にアップ

ここで、

  • patchはバグ修正などの小さな変更を行った場合に使用します。
  • minorは機能追加などの互換性のある変更を行った場合に使用します。
  • `

不安と不満

相手の行動に対して不安と不満どっちの感情なのか見分ける方法、というご質問ですね。

私の検索結果によると、不安と不満は似ているようで違う感情です¹。不安は、気がかりで落ち着かないことを意味し、不満は、物足りなく思うことを意味します¹。そこで、相手の行動に対して不安と不満どっちの感情なのか見分ける方法を以下に紹介します。

①自分が何を求めているか考える

不安と不満は、自分が何を求めているかによって異なります。不安は、自分が安心したいと求めているときに感じる感情です。例えば、相手が連絡をくれないときに、相手が無事なのか心配するのは不安です。一方、不満は、自分が満足したいと求めているときに感じる感情です。例えば、相手が連絡をくれないときに、相手が自分を大切にしていないと思うのは不満です。自分が何を求めているか考えることで、自分の感情が不安なのか不満なのか見分けることができます。

②自分がどんな行動を取りたいか考える

不安と不満は、自分がどんな行動を取りたいかによっても異なります。不安は、自分が確認したり解消したりしたいと思うときに感じる感情です。例えば、相手が連絡をくれないときに、相手に電話したりメールしたりして確認したいのは不安です。一方、不満は、自分が訴えたり改善したりしたいと思うときに感じる感情です。例えば、相手が連絡をくれないときに、相手に文句を言ったり注意したりして改善したいのは不満です。自分がどんな行動を取りたいか考えることで、自分の感情が不安なのか不満なのか見分けることができます。

以上のように、共同生活において、相手の行動に対して不安と不満どっちの感情なのか見分ける方法は、

  • 自分が何を求めているか考える
  • 自分がどんな行動を取りたいか考える

の2つです。これらの方法を試してみることで、自分の感情を正しく理解することができます。そして、その感情に応じて適切な対処法を選ぶことができます。共同生活で相手の行動に対して不安や不満を感じたら、ぜひ試してみてくださいね。

google arts の仕様

image