ガイド一覧Developer Guides (Japanese with English summaries)
開発の現場で役立つ実践的な解説記事をまとめています。ツールの使い方だけでなく、 背景知識や落とし穴も含めて解説しています。
Practical how-to articles for developers. Each guide is written in Japanese with an English TL;DR and summary section.
エラー解決Error resolution
よく遭遇するエラーの原因切り分けと対処。
Unexpected end of JSON input の直し方
Fix Unexpected end of JSON input
空文字列・空レスポンス(204)・途中で切れたJSONの三大原因を順に特定。res.text()ガードによる再発防止まで。
YAMLインデントエラーの直し方
Fix YAML indentation errors
「mapping values are not allowed in this context」等の実エラー別に原因と対処を整理。K8s・GitHub Actionsの頻出例つき。
JSON→CSV変換でExcelが文字化けする原因と対処
Fix garbled CSV in Excel (UTF-8 BOM)
ExcelのBOMなしUTF-8誤判定が原因。BOM付き保存・データ取込手順・カンマを含む値の引用まで解説。
XMLパースエラーの原因と対処
Fix XML parse errors
tag mismatch・実体参照エラー・ルート要素重複・encoding不一致など、実エラー文言別に原因と対処を整理。
見えない文字(ZWSP/BOM/NBSP)が起こすバグの見つけ方
Find invisible character bugs
コピペ由来の不可解なシンタックスエラーや比較不一致の正体。検出方法と除去手順を体系化。
文字化けの原因切り分け - 化け方のパターンで特定する
Debug mojibake encoding issues
「縺」系・「ã」系など化け方から原因を逆引き。HTTPヘッダ・DB・ファイル保存の確認手順。
cronが実行されない時のチェックリスト
Fix crontab not running
PATH・%エスケープ・最終行の改行など、cron特有の落とし穴を順に検証するデバッグ手順。
JSONの Unexpected token エラーを直す
Fix JSON Unexpected token errors
position N の読み方、末尾カンマ・シングルクォート・BOM・NaN など主要原因の対処を体系化。
Base64デコードで日本語が文字化けする原因と対処
Fix garbled text when decoding Base64
btoa/atobのLatin-1制限とTextEncoder/TextDecoderを使ったUTF-8安全な実装。Base64URLも解説。
npm ERESOLVE エラーの原因と解決
Fix npm ERESOLVE errors
peer dependency 競合の読み方、overrides での固定、--legacy-peer-deps の是非。
認証・セキュリティAuth & Security
JWT・OAuth・HTTPステータスなど認証/認可まわり。
HTTP Status Codes List - ステータスコード一覧と意味
HTTP status codes reference
1xx〜5xxのクラス別一覧表、301と302・502と503の違い、REST API設計での使い分けまで整理。
JWT HS256とRS256の違いと選び方
JWT HS256 vs RS256
共有鍵と公開鍵の使い分け、マイクロサービスでの検証、alg=none攻撃・alg混同攻撃への防御まで。
正規表現のReDoSを避ける - 破滅的バックトラックの仕組み
Avoid regex ReDoS
脆弱なパターンの見分け方、攻撃文字列が引き起こす計算量爆発の仕組み、安全な書き換え。
MD5とSHA-256の違い・パスワード保存の正解
MD5 vs SHA-256 & password hashing
衝突攻撃の現状、チェックサムと暗号用途の使い分け、bcrypt/Argon2idの選定基準まで。
HTMLエスケープとXSS対策の基本
HTML escaping & XSS prevention
エスケープすべき5文字、コンテキスト別の対策、ReactのJSX自動エスケープ、DOMPurify・CSPまで。
JWTの署名検証に失敗する原因と対処
Fix JWT signature verification failed
鍵不一致・alg不一致・kid解決失敗・aud/iss/exp の5原因から切り分け。Node/Python/Goの実装も。
HTTP 401 と 403 の違い・使い分け
HTTP 401 vs 403
認証エラー(401)と認可エラー(403)の正しい使い分け。WWW-Authenticate ヘッダとRFC 9110の定義。
JWTの有効期限切れを確認する方法
Checking JWT expiry
exp/iat/nbfクレームの読み方、タイムゾーンの罠、401時の対処フローを実例つきで解説。
DB・データ構造Database & Data
SQL・JSON Schema・UUID などデータ設計。
SQL JOINの種類と使い分け
SQL JOIN types explained
INNER/LEFT/RIGHT/FULL/CROSSの結果を実データで比較。LEFT JOINにWHEREを書くとINNERになる罠も解説。
SQL GROUP BY と ORDER BY の順序・使い分け
SQL GROUP BY vs ORDER BY
書き順と評価順、SELECT 列の制約、PostgreSQL/MySQL/BigQuery の挙動差を整理。
UUID v4とv7の違い - いつどちらを使うべきか
UUID v4 vs v7
DBプライマリキー性能、ULIDとの比較、使い分け指針をビット構造図つきで解説。
JSON Schemaで型を保証する基本
JSON Schema basics
required / enum / additionalProperties の使い分けとAjvでの検証、CI組込みまで。
ネットワーク・HTTPNetworking & HTTP
CORS・TCPレベルのエラー切り分け。
CORS プリフライトで 400/403 が返る原因と対処
Fix CORS preflight 400/403
OPTIONS ルーティング欠落・認証ミドルウェア・ヘッダ不足の3原因別フィックス。Express/Nginx例つき。
ECONNREFUSED と ETIMEDOUT の違い・切り分け
ECONNREFUSED vs ETIMEDOUT
TCPレベルでの差、切り分けコマンド、Docker/Lambda で頻出する原因を整理。
CORSエラーの原因と正しい直し方
Diagnosing and fixing CORS errors
preflight / credentials の違い、Express/Nginx の正しい設定、よくある誤った対処を整理。
バージョン管理・開発フローVCS & Dev Workflow
Git・正規表現・タイムスタンプなど開発の基礎。
CSS Shadow Generator - box-shadowの書き方とパターン集
CSS box-shadow syntax & pattern guide
offset-x/offset-y/blur/spread/color/insetの構文解説と、よく使う影のパターンをコード付きで整理。text-shadow・filter: drop-shadow()との違いも。
HTML to JSX Converter - 変換でハマる7つの落とし穴
7 pitfalls converting HTML to JSX
class→className、style文字列→オブジェクト、自己終了タグなど、HTMLをJSXに変換する際の注意点を実例で整理。
Cron Expression Basics - cron式の書き方と読み方
Cron expression syntax guide
5フィールドの意味、特殊文字(* , - /)の使い方、よく使うパターン早見表、日/曜日フィールドのOR評価の罠まで解説。
URL Encode Space (%20) - スペースのURLエンコード完全ガイド
URL encoding spaces (%20 vs +)
%20と+の使い分け、encodeURIComponentとencodeURIの違い、二重エンコードの防ぎ方を実例つきで整理。
Unix Timestamp Guide - Unix timeの基本と変換方法まとめ
Unix timestamp basics & conversion
unix timestamp(エポック秒)の定義、現在時刻の取得方法、秒/ミリ秒の見分け方、JS/Python/PHP/Go/Javaでの変換コード例。
Hex Dump 読み方ガイド - hexdump/xxd出力の見方
How to read a hex dump
オフセット・16進数バイト・ASCII表現の3列構成の読み方、xxd/hexdump -C出力比較、ファイルシグネチャ判定への応用。
JSON to YAML変換ガイド - 構造対応表と落とし穴
JSON to YAML conversion guide
オブジェクト/配列/スカラー値の対応表、インデントの罠、Norway Problem(yes/noの誤解釈)まで整理。
Hex to Decimal - 16進数と10進数の変換方法と早見表
Hex to Decimal conversion guide
桁の重み付けによる手計算の手順、0〜255の早見表、JavaScript/Python/Java等でconvert to hexadecimalするコード例まで。
Hex Translator - 16進数とテキストを相互変換する仕組み
Hex to Text (Hexadecimal Translator)
HEXとASCII/UTF-8の対応表、手動変換の手順、文字化けの原因と対処を言語別コード例つきで解説。
Hex to Bytes - 16進数をバイト列に変換する実装例
Hex to Bytes conversion (Python/JS/Java)
Python bytes.fromhex / JS Uint8Array / Java HexFormat 等の実装と、エンディアン・ファイルシグネチャ判定まで。
Image to Base64 - 画像のBase64エンコードとData URIの使い方
Image to Base64 & data URI guide
Data URIの書式、CSS/HTML/JSONへの埋め込み例、サイズが約33%増える理由と使うべき場面を整理。
.gitignoreが効かない時の原因と対処
Fix .gitignore not working
原因の9割は追跡済みファイル。git rm --cachedでの解除、check-ignoreでのルール特定、UTF-16保存の罠まで。
CSS中央寄せの方法まとめ
How to center in CSS
flexbox/grid/margin autoの使い分け早見表。「縦中央が効かない」原因と2024年からのalign-content新手法。
改行コードCRLFとLFの違いと統一方法
CRLF vs LF line endings
diff全行差分・bad interpreter ^Mの原因と、.gitattributes/git add --renormalizeでのチーム統一手順。
CSS aspect-ratioで画像・動画の比率を固定する
CSS aspect-ratio property guide
padding-topハック(56.25%)からの移行、object-fit併用、CLS対策まで実例つきで解説。
OKLCHとは - HSLとの違いとCSS Color 4実践
OKLCH vs HSL explained
知覚均等な色空間OKLCHの仕組み、oklch()構文、ブラウザ対応状況、デザインシステムでの採用指針。
APIレスポンスの差分比較を安全に行う方法
Compare API responses safely
キー順・整形差で誤検出しない構造比較のやり方。リリース前後の回帰確認の実践手順。
gitマージコンフリクトの解消手順
Resolve git merge conflicts
コンフリクトマーカーの読み方、merge と rebase で ours/theirs が逆になる罠、実践的な解消フロー。
正規表現のLookbehindはどのブラウザで使える?
Regex lookbehind browser support
Safari 16.4 で対応。iOS 16.3 以前への配信時の代替パターンと実害ケース。
git push rejected (non-fast-forward) の直し方
Fix git push rejected non-fast-forward
pull --rebase / merge / --force-with-lease の使い分け。共同作業での事故回避。
UNIX timestamp 変換と落とし穴
UNIX timestamp conversion pitfalls
秒/ミリ秒の見分け方、タイムゾーンの扱い、言語別実装、2038年問題まで整理。
正規表現の実例集
Practical regex examples
郵便番号・メール・電話番号・URL抽出など、日本でよく使うパターンをコピペできる形で集めました。
ツール比較・選定Tool selection & comparison
開発ツールの選び方と比較。
OG画像の最適サイズとmeta設定(2026年版)
OG image size guide 2026
推奨1200x630の根拠、X/LINE/Discord別の表示仕様、og:image指定の効果、キャッシュクリア方法。
ブラウザ完結で使える無料開発ツール15選 - 2026年版比較
Browser-only dev tools: 15-pick comparison (2026)
登録不要・インストール不要のオンライン開発ツール15種類を用途別に比較。選び方フロー図つき。
ブラウザ内で完結する開発ツール10選
10 browser-only dev tools
機密データを外に出さないためのツール選びの判定基準と、用途別のおすすめ10選。