Oteto.dev
Web開発に関する記事や便利ツールを気まぐれで公開しています。
ツール一覧
-
テキスト差分 (diff) 比較ツール
2つのテキストを比較し、抽出した差分をハイライトして表示します。規約のような長い文章を校正する際や、ソースコードの差分を検出する際などにご利用ください。
-
画像リサイズツール
PNG/JPG/WebP画像をリサイズ (拡大/縮小) します。一括サイズ変更にも対応しており、ブラウザ上で処理されるためプライベートな画像でも安心。画像容量を削減する際などにもご利用ください。
-
絵文字ジェネレータ
入力したテキストから絵文字画像を生成します。SlackやMicrosoft Teamsにカスタム絵文字 (自作スタンプ) を追加する際などにご利用ください。
-
ディレクトリツリーメーカー
プレーンテキストからディレクトリのツリー図を作成します。ディレクトリ構成を書き起こす際や、treeコマンドが使えない際にご利用ください。
-
base64エンコード・デコードツール
テキストをbase64エンコード・デコードします。
-
ケーススタイル変換ツール
テキストをキャメル/パスカル/スネーク/ケバブケースなどの記法に変換します。命名規則に応じてコードを整形する際などにご利用ください。
-
カラーコード変換ツール
入力したカラーコードをHEX(16進数)・RGB・HSLに変換します。
-
ダミーテキスト生成・複製ツール
指定文字数でダミーテキストを作成し、コピペしてすぐに利用可能なジェネレータです。デザインやワイヤーフレーム等にご利用ください。
-
JSON整形・構文チェックツール
JSONを整形するツール (フォーマッター) です。
-
パスワード生成ツール
安全かつ強力なパスワードをランダムで生成します。8〜16桁はもちろんのこと、指定文字数で生成可能。パスワードで迷った際や一括生成したい際にご利用ください。
-
正規表現チェッカー
JavaScriptの正規表現を検証します。入力した文字列から正規表現にマッチする箇所を視覚化し、各オプションの指定も可能。正規表現を手軽に検証する際などにご利用ください。
-
文字数カウントツール
文字数をチェックするためのツールです。字数制限がある文章を作成する時にご利用ください。
-
改行・空白・タブ文字削除ツール
入力したテキストから改行・空白・タブ文字を削除します。テキストを整形する際や文字数を削減する際にご利用ください。
-
URLエンコード・デコードツール
URLをエンコード・デコードします。予約文字や日本語等がURLに含まれる際にご利用ください。
-
UUID生成ツール
パスワードやDBのIDに利用できる、ユニークでランダムなIDを生成するツールです。
記事一覧
-
【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する
-
【Docker】ビルドが.docker/buildx/current:permission deniedとエラーになる
-
NestJS × Prisma × PostgreSQL × Dockerで開発環境構築
-
【Prisma】migrate devが「Can't reach database server」とエラーになる
-
【Prisma】migrate devが「could not create the shadow database」とエラーになる
-
【React】文字列を分割してJSXと結合する
-
インラインSVGにalt属性を指定したい【aria-label vs title】
-
【TypeScript】Event.targetに型を付けてvalueを参照する
-
Mr.Childrenカラオケ難易度ランキング【歌いやすい曲・難しい曲】
-
Webエンジニアとして新卒1年目に仕事でやらかしたこと
-
【CSS】Chromeでfont-sizeが10px未満のテキストを表示する
-
【CSS】2行目以降を字下げしてインデントを揃える
-
【Astro】サイトマップ(sitemap.xml)をインテグレーションなしで自作する
-
波ダッシュ(〜)と全角チルダ(~)の違いと使い分け
-
【Astro】Linter(Prettier・Stylelint・ESLint)の初期設定を行う
-
Next.jsからAstroにブログを移行してみた【SSGのパフォーマンスやビルド時間の比較など】
-
【Astro】Partytownを利用してGoogle Analyticsを導入する
-
【CSS】画像(imgタグ)の下にできる謎の余白を消す
-
【React】5段階の星評価(star rating)をCSS・SVGで実装する
-
【CSS】inputに値が入力されているか空文字かを判定する
-
バタフライ「インナーフォースレイヤーZLC」レビュー【粒高相性やALCとの違い】
-
React Syntax Highlighterで差分行をハイライト(diff highlight)する
-
patch-packageでnpmパッケージ(node_modules)にパッチをあてて修正する
-
【React】PartytownでGoogle Analytics(Tag Manager)のスクリプトをWeb Worker上で実行する
-
【Next.js】HTTPレスポンスヘッダ(Security Headers)を設定する
-
npmのキャッシュを強制的にクリアしてリセットする
-
プログラミングの命名でよく参考にするサイト・ツール
-
【Electron】MacのDockアイコンを起動時から非表示にする
-
【Git】remote unpack failed:index-pack failedの対処法
-
【JavaScript】addEventListenerで複数イベントを同時設定する
-
【JavaScript】配列内の重複した要素をカウントする
-
【TypeScript】Union型からオブジェクトのkeyを型指定する
-
【JavaScript】visualViewportでスマホのバーチャルキーボードの出現を検知し高さを取得する
-
【JavaScript】iOSでposition:fixedな要素をキーボード上に押し上げる
-
Google Adsense広告をlocalhost(ローカル環境)で表示する
-
【Next.js】SPAにGoogle AdSenseを導入する
-
【JavaScript】DOMParserで文字列をHTMLElement・Nodeに変換する
-
GASをローカル・TypeScriptで実装するためのClasp環境構築
-
【JavaScript】HTML内のコメント要素をノードとして取得する
-
【TypeScript】2つのオブジェクトのプロパティをマージした型を定義する
-
GASとTeamsを連携しWebhookでチャネルに自動通知を行う
-
【Teams】Incoming Webhookでメンションを付けて個人宛に通知する
-
【GAS】日本の休日・祝日をカレンダーから判定する
-
【GAS】時間指定で毎日定期実行されるトリガーを設定する
-
【M2 Mac】rbenv installでエラーになる時の解決法
-
【React】レーダーチャート(radar chart)をライブラリ無しで実装する
-
【TypeScript】Cannot find module … or its corresponding type declarations の解決法
-
【Next.js】satoriを使ってJSXからOGP画像を動的に生成する
-
【Next.js】SPAにGoogle Analytics(GA4)を導入する
-
【Next.js】unstable_runtimejsでhydrationを無効化し静的(MPA)化する
-
【React / Next.js】createPortalでmodalコンポーネントを作る
-
【TypeScript】Union型に含まれる値かどうかを判定する
-
textlintでMarkdownの日本語文章を校正する
-
【SCSS】z-indexの管理を配列やmapで行う
-
【SCSS】メディアクエリをmixinと変数でまとめて管理する
-
【SCSS】フォントサイズを画面幅に合わせて可変・レスポンシブにする@mixin
-
【SCSS】line-heightによる上下の余白を@mixinで消す
-
第二新卒エンジニアとしてサーバサイドからフロントエンドに転職するためにやったこと
-
【MySQL】タイムゾーンをコマンドで日本時間に変更する
-
【React】Prism.jsでソースコードをSyntax Highlightする
-
【WordPress】CSSの変更が反映されない場合の原因・対処法
-
「マクサン式webライティング実践スキル大全」書評・レビュー
-
WordPressでおしゃれなレーダーチャートを作成する方法【プラグイン・ライブラリ不要】
-
WordPressテーマ「SANGO」のレビューとメリット5つ【2年以上使ってみた】
-
元廃人が語る、ソシャゲをやめてよかったこと6選【疲れたらやめるべき】
-
【PHP】GeoIP2でIPアドレスから国・地域名を取得する
-
【WordPress】特定のカテゴリページやタグページにnoindexを設定する方法
-
プラグインAddQuicktagの使い方とおすすめの設定方法【ショートコード効率化】
-
【単語帳いらず】Googleスプレッドシートで暗記用のフラッシュカードを作る方法
-
【Cocoon】SNSシェア・フォローボタンを丸くするカスタマイズ
-
入社前に内定者アルバイト(インターン)をするメリットとやるべき理由
-
Android Studioのエミュレーターで日本語入力する方法
-
【就活】再面接を行うのはなぜ?その理由と意図を体験者が解説します
-
JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】
-
【JIN】SNSボタンを丸くして可愛くカスタマイズする方法
-
【JIN】他と差を付ける!プロフィールボックスのカスタマイズ方法
-
【JIN】ブログカードをより読みたくなるデザインにするカスタマイズ
-
【JIN】目次が20倍可愛くなるカスタマイズ方法(サイドバー対応)
-
【コピペで解決】「第三者コードの影響を抑えてください」の解決法
-
CSSの重複をチェックし削除するためのツール2選
-
【丸ごと見せます】大手内定者が話したガクチカの例文まとめ
-
【脱CDN】Font Awesomeをローカルにダウンロードして読み込む方法
-
【全公開】Webエンジニア内定者が話した志望動機の例文まとめ
-
【危険?】Web面接でカンペを使うのをおすすめしない理由
-
【体験談】エージェント経由の内定を承諾後に辞退する際に注意すべきこと
-
HHKBのキーボード配列はJISとUSどっちがいい?【両方使ってみた】
-
【Mac英語配列】Commandキー1つで英数/かな切り替えする方法
-
Macでスクリーンショットを編集するのにおすすめなアプリ2選【超厳選】
-
【信頼できる?】キャリアセレクトの評判と実際に利用してみた感想【新卒未経験】
-
採点バイトは楽?難しい?体験談をもとにその実態を解説します
-
【内定者が選ぶ】新卒エンジニア向けのおすすめエージェント3選
-
【WordPress】「閲覧できません(Forbidden access)」というエラーの解決法
-
【実例付き】就活のプレゼンで好印象を与えるパワポ資料の作り方
-
【これで解決】面接で「それうちじゃなくてよくない?」と言われた時の対処法
-
【もう落ちない】就活での書類選考(ES)の通過率が低い時の対処法
-
【Vue.js】アニメーション付きアコーディオンメニューを作る
-
「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」の解決法
-
【稼げるの?】ゲームブログを運営する時の注意点を経験者が解説
-
プラグイン「Search Regex」の使い方と一括置換できない時の対処法
-
【Cocoon】居心地の良いスキン「イノセンス」を作成しました
-
【illustrator】徐々に透明になっていくグラデーションを画像にかける方法
-
【落ちないための対策】3Eテストとは?実際に出題された問題と合格ライン【時間切れに注意】
-
【Cocoon】新着記事一覧をおしゃれにする簡単カスタマイズ
-
【Cocoon】コピペで一発!検索窓を可愛くするカスタマイズ
-
【Git】Gistに画像をアップロードする方法
-
【SANGO】記事下の関連記事のタイトルをカスタマイズする方法
-
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】
-
未経験の大学生エンジニアにおくるポートフォリオの作り方【実例付き】
-
空白言語WhiteSpaceとは?Rubyで実装してみた
-
SVGアニメーションを簡単に実装できるSnap.svgの使い方
-
【Ruby】四則演算に対応した電卓を実装する方法
-
【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法
-
【illustrator】SVG画像が文字化けしたりフォントが変わる時の解決法
-
【回答例付き】新卒Webエンジニア面接で実際に聞かれた質問総まとめ
-
【内定獲得】レバテックルーキーの評判は?文系未経験が利用してみた口コミ
-
【独学・文系でも出来た】新卒未経験がWebエンジニアになるまでにやったこと
-
【SANGO】レビューボックスを立体的に可愛くするカスタマイズ
-
【SANGO】シェアボタンを浮き上がらせるカスタマイズ方法
-
【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!
-
【SANGO】引用の囲みをおしゃれにカスタマイズする方法
-
【SANGO】吹き出しの色をカスタマイズしておしゃれにする方法
-
WordPressでCSSのバックアップをとる方法【カスタマイズ時に必須】
-
【スコア90点越え】SANGOを高速化するためのカスタマイズ9選
-
【SANGO】カテゴリー一覧をオシャレにカスタマイズする方法
-
【プラグイン不要】WordPressで蛍光マーカーを動かす方法
-
【初心者向け】WordPressでCSSを編集・追加する方法
-
【SANGO】内部リンクに「続きを読む」を入れるカスタマイズ
-
【SANGO】目次のデザインをよりお洒落にするカスタマイズ方法
-
【SANGO】外部リンクを可愛くカスタマイズする方法
-
【CSS】アニメーションで繰り返しごとに間隔を空ける方法
-
【Illustrator】透明パネルとスクリーンを使って画像を明るくする方法
-
JavaScriptのマウスイベント一覧【サンプル付き】
-
【Classroom】ファイルを開けない・ダウンロードできない時の対処法
-
【Rails】lock_versionを使って排他制御(楽観的ロック)を行う方法
-
【ぶっちゃけます】テーマをCocoonからSANGOに乗り換えてみた感想
-
【Rails】Action Mailerを使ってメールを送信する方法
-
【Rails】Action Cableで非同期かつ双方向なチャット機能を実装する
-
【Rails】deviseを使ってログイン認証を実装する方法
-
【要約付き】「沈黙のWebライティング」を読んでみた感想
-
【Rails】AWSのS3を使ってHerokuで画像を投稿できるようにする方法
-
【Git】Permission denied (publickey)というエラーの対処法
-
WordPressでデモページ(サンプルページ)を作成する方法
-
【Cocoon】記事下の関連記事をおしゃれにカスタマイズする方法
-
【Rails】ページをリロードしないとJavaScriptが実行されない時の対処法
-
【Rails】セレクトボックスにdisabledを適用する方法
-
【Rails】bcryptを使ってログイン機能を実装する方法
-
【永久保存版】ブルーロック登場キャラまとめ
-
【無料】MacとWindowsで画面共有ができる「ApowerMirror」の使い方
-
【Rails】Validation failed ... must existというエラーの解決法
-
【Rails】collection_check_boxesで多対多の関連付けをする方法
-
【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ
-
【Cocoon】目次を圧倒的におしゃれにするカスタマイズ方法
-
大学生がサークルに入らないと就活で後悔する?【結論:メリットばかり】
-
【Ruby】「!」の付かない破壊的メソッドまとめ
-
【ブルーロック】馬狼 照英の徹底考察まとめ
-
【ブルーロック】糸師 凛の徹底解説まとめ
-
もしもの「かんたんリンク」をスマホでも横長(2列)にするカスタマイズ
-
【ブルーロック】千切 豹馬の徹底解説まとめ
-
Ruby技術者認定試験Silverに合格した際の勉強法
-
【ブルーロック】蜂楽 廻の徹底解説まとめ
-
【ブルーロック】潔 世一の徹底解説まとめ
-
【Rails】You don’t have bcrypt installed というエラーの解決法
-
【ブルーロック】國神 錬介の徹底解説まとめ
-
【ブルーロック】凪 誠士郎の徹底解説まとめ
-
【PostgreSQL】no pg_hba.conf entry for hostというエラーの対処法
-
【ブルーロック】あなたの人生を変える名言・名シーン集53選
-
【著作権注意】ブログで漫画の画像を引用する時に守るべき3つのこと
-
【Cocoon】コピペでOK!タイムラインを可愛くカスタマイズする方法
-
【Python】CSVファイルを行ごとに読み込み、列を追加する方法
-
【Cocoon】トップページのカテゴリタブを可愛くするカスタマイズ方法
-
Mr.Children最強の失恋ソング5選【失恋してなくても聴いてほしい】
-
【今すぐ消そう】Cocoonを使うにあたって不要なプラグイン7選
-
【Cocoon】カルーセルをオシャレにカスタマイズする方法
-
【完全保存版】Mr.ChildrenのおすすめなライブDVD5選
-
【Cocoon】サイドバーの見出しの前に画像をつけるカスタマイズ
-
Chrome拡張機能「Search and Replace」で一括置換する
-
【最新版】ブルーロック最強ランキングTOP15
-
【適当に入れてない?】プラグイン「Ping Optimizer」が不要な理由
-
画像に動的に文字を入れられるCloudinaryの使い方
-
【体験談】治験バイトが大学生にとってウマすぎる理由【ブログも書ける】
-
【Cocoon】吹き出しの色を変えてオシャレにカスタマイズする方法
-
【JavaScript】爆速でカウントダウンタイマーを実装する