Oteto.dev

Web開発に関する記事や便利ツールを気まぐれで公開しています。

ツール一覧

ツール一覧

テキスト差分 (diff) 比較ツール

画像リサイズツール

絵文字ジェネレータ

ディレクトリツリーメーカー

base64エンコード・デコードツール

ケーススタイル変換ツール

カラーコード変換ツール

ダミーテキスト生成・複製ツール

JSON整形・構文チェックツール

パスワード生成ツール

正規表現チェッカー

文字数カウントツール

改行・空白・タブ文字削除ツール

URLエンコード・デコードツール

UUID生成ツール

記事一覧

【Storybook】Test RunnerのCIを高速化する

【Vitest】setTimeoutした処理をモック化したタイマーでテストする

【JavaScript】Canvasを使いブラウザで画像をリサイズする

【CSS】メインコンテンツの高さに関わらずフッターを最下部に固定する

【JavaScript】SVGでviewBoxを調整して余白をトリミングする

【Testing Library】React Componentをモック化する

【Vitest】vi.mockで巻き上げられる時はvi.hoistedを使う

【CSS】min-font-size/max-font-sizeを指定する

【JSなし】ドラッグ&ドロップでファイルをアップロードする

【React Hook Form】 Dirtyなvalues (変更されたフィールドの値) を取得する

【JavaScript】byte単位のファイルサイズをGB/MB/KBに変換する

【JavaScript】HEX (カラーコード) とRGBを相互変換する

【JavaScript】ランダムなパスワード文字列を生成する

【JavaScript】UTF-8をbase64エンコード・デコードする (日本語対応)

【React Router】認証状態・権限に応じてアクセス制御する

【Zod】ErrorMapでエラーメッセージをカスタマイズして共通化する

【JavaScript】varが非推奨な理由とlet・constとの違い

【React】制御コンポーネントと非制御コンポーネント

Tailwind VariantsでIntelliSenseの補完を効かせる

関東最大級のサウナ「かるまる池袋」に行ったら過去最高にととのった

【NestJS】ConfigServiceをカスタムして.env（環境変数）をバリデーションする

【Drizzle ORM】Value Objectに変換するCustom typeを定義する

【TypeScript】Object.entries()の返り値を厳格に型定義する

【TypeScript】空を許容しないNonEmptyな配列型を定義する

【Drizzle ORM】JOINした結果をマッピングして集計する

【Astro】rehype (remark) プラグインを自作してMarkdown内の内部リンクをカードに変換する

<dialog>なモーダルで背景 (backdrop) をクリックした時に閉じる

JSONPとは何者か【JSONとの違い・jQuery.ajaxでの利用】

Zodで画像FileのMIMEタイプとサイズのバリデーションをする

【CSS】セレクトボックスの矢印を擬似要素無しでカスタマイズする

NextAuth (Auth.js) でJWTトークンからuserIdを取得しセッションに含める

【React】window.confirmの代替となるPromiseな確認ダイアログを自作する

detailsタグで背景クリックでも閉じるポップアップメニューを実装する

【Next.js】構造化データ (JSON-LD) を型安全に実装する (パンくずリストを添えて)

トマトジュースを7年間毎日飲み続けた結果、血糖値・血圧が下がり無病息災になった

【TypeScript】abstract classにstaticプロパティを定義しインスタンスから参照する

Next.jsでDI (Dependency Injection) する with TSyringe

RDBのprimary-keyに採用するユニークIDの比較 (UUID・ULID・NanoID・CUID)

【React】アップロードした画像のプレビュー・リサイズ機能を実装する

Next.js (App Router) にAuth.jsでGoogle認証機能を実装する

【Next.js】Drizzle ORMを導入してマイグレーションするまで

【Astro】i18n（国際化）機能で多言語対応のサイトを作る

【CSS】Hex（16進数）形式のカラーコードで透明度（アルファ）を指定する

【JavaScript】URLフラグメントのハッシュマーク（#）もろともlocation.hashで削除する

Gitの差分行のみautofixするnpmライブラリ「stylelint-diff-fixer」を作った

【TypeScript】Array.mapでcontinueするためにfilterでundefinedを型安全に除外する

【Node.js】execSyncの返り値からstderrを取得してエラーハンドリングしたい

【JSDoc】アロー関数の引数にインラインで型指定する

StylelintのPluginをテストしながら実装する【TypeScript】

Node.js × TypeScript × nodemonでホットリロード対応の環境構築

URLにマッチする正規表現をRFC3986を考慮して実装する【JavaScript】

NestJS（Fastify）+ JestでE2Eテストを実装する

【zod】NumericなStringをNumberに変換する

【JavaScript】XSS対策で最低限のサニタイズ（エスケープ）をする

【TypeScript】Value Object（値オブジェクト）を実装する

【TypeORM】select: falseで非セキュアなカラムを除外する

【Git】.gitignore自体を差分から除外する

【NestJS】React（jsx）で作成したメールをmailer serviceで送信する

【NestJS】JWT認証によるログイン機能をPassportで実装する

【Docker】pgAdmin4でPostgreSQLに接続＆永続化する

【Docker】PostgreSQLとpgweb（GUI）のコンテナを立ち上げる

NestJS（Fastify） × TypeORM × PostgreSQL × Dockerで環境構築

NestJS × TypeORM 0.3 でCLIからmigrationする