Oteto.dev

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

ツール一覧

ツール一覧

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

画像リサイズツール

絵文字ジェネレータ

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

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

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

カラーコード変換ツール

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

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

パスワード生成ツール

正規表現チェッカー

文字数カウントツール

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

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

UUID生成ツール

記事一覧

【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する

【Docker】ビルドが.docker/buildx/current：permission deniedとエラーになる

NestJS × Prisma × PostgreSQL × Dockerで開発環境構築