パフォーマンスWeb開発最適化
ページの転送量を見直す手順 — 単位の把握・計測・削減
ページが重い原因を転送量から突き止める手順を、単位の理解→内訳の計測→画像とデータの削減→キャッシュ設定の流れで解説します。1000と1024の違い、回線別の所要時間の見積もり方も整理します。
Guides
ガイド
Web 開発の定番作業を、手順ごとにたどれるガイドとして公開しています。各ステップで使うツールにそのまま進めます。
HTMLWeb開発開発tips
読みにくいHTMLを解読する手順 — 整形・構造把握・要素の特定
1行にまとまったHTMLや自動生成されたページを解読する手順を、整形→構造の把握→要素の特定→データ抽出の流れで解説します。整形で表示が変わってしまう落とし穴と、その回避方法も整理します。
テキストユーティリティ開発tips
リスト状のテキストを整理する手順 — 重複削除・並べ替え・形式変換
1行1データのテキストを整理する手順を、表記ゆれの吸収→重複の処理→並べ替え→コード用の形式変換の流れで解説します。辞書順で数値が正しく並ばない理由や、2つのリストの共通部分を求める方法も整理します。
XMLHTMLデータ変換
HTMLやXMLから必要なデータを抜き出す手順 — XPath・セレクタ・JSON化
HTMLやXMLから目的のデータを取り出す手順を、構造の把握→XPathでの抽出→CSSセレクタとの使い分け→JSON化の流れで解説します。名前空間やJavaScript生成コンテンツといった、つまずきやすい点も整理します。
API開発tipsテスト
APIができる前に開発を進める手順 — モック・テストデータ・検証
バックエンドの完成を待たずにフロントを進める手順を、レスポンス設計→モックの用意→テストデータの生成→スキーマ検証の流れで解説します。本物のAPIに差し替えたときに壊れないための注意点も整理します。
APIドキュメント開発tips
APIの仕様を読み書きする手順 — OpenAPI・スキーマ・変更の伝え方
API仕様の読み方と書き方を、OpenAPIの構造理解→仕様の閲覧→スキーマ定義→変更管理の流れで解説します。破壊的変更の見分け方や、バージョニングの考え方も整理します。
カラーデザインCSS
配色をコードに落とす手順 — 形式変換・階調生成・トークン化
決めた配色を実装に落とす手順を、形式の変換→階調の生成→トークンとしての整理→コントラスト確認の流れで解説します。色名の付け方や、ダークモードを見据えた設計も整理します。
テキストエンコード開発tips
文字化けを解決する手順 — 文字コード・Unicode・見えない文字
文字化けの原因を特定して直す手順を、文字コードの理解→バイト列の確認→Unicodeの特定→見えない文字の検出の流れで解説します。UTF-8とShift_JISの違いや、BOM・ゼロ幅スペース・絵文字の文字数問題も整理します。
Git開発tipsWeb開発
Gitで除外するファイルを設計する手順 — .gitignore・パターン・事故の防ぎ方
.gitignoreの設計手順を、除外すべきものの整理→パターンの理解→動作確認→追跡済みファイルの解除の流れで解説します。「.gitignoreを書いたのに無視されない」原因や、除外設計でよくある事故も整理します。
CSSレスポンシブWeb開発
レスポンシブ対応を設計する手順 — 単位・ブレークポイント・コンテナクエリ
レスポンシブ対応の設計手順を、単位の選択→ブレークポイントの決め方→メディアクエリの組み立て→コンテナクエリの活用の流れで解説します。デバイス幅で分けない考え方や、スマホで崩れる典型パターンも整理します。
データ変換JSONCSV
CSVとJSONを相互変換してデータを扱う手順 — 集計・DB投入まで
CSVとJSONを相互変換してデータを扱う手順を、形式の変換→ネスト構造の平坦化→SQLへの変換→クエリの整形の流れで解説します。文字化けや区切り文字、型の推測といったつまずきやすいポイントも整理します。
Web開発画像デザイン
faviconとアプリアイコンを一式そろえる手順 — サイズ・形式・メタタグ
faviconとアプリアイコンを用意する手順を、元画像の準備→favicon生成→各サイズの書き出し→メタタグの設置の流れで解説します。必要なサイズの考え方や、角丸で切れないための余白の取り方も整理します。
CSSアニメーションデザイン
CSSアニメーションを設計する手順 — イージング・transform・パフォーマンス
CSSアニメーションを設計する手順を、動きの種類の選択→イージングの調整→keyframesの組み立て→パフォーマンス確認の流れで解説します。transformとopacityを使うべき理由や、動きを控えるべき場面も整理します。
セキュリティ認証開発tips
パスワードと認証情報を安全に扱う手順 — ハッシュ化・強度・2要素認証
パスワードを安全に扱う手順を、強度の設計→ハッシュ化の理解→2要素認証→トークン管理の流れで解説します。MD5/SHA-1を使ってはいけない理由、ソルトとストレッチングの役割、TOTPの仕組みまで、実際に手を動かして確認しながら整理します。
セキュリティWeb開発開発tips
.env と機密情報を安全に管理する手順 — 環境変数・Git除外・キーの発行
.envファイルと機密情報の管理手順を、環境変数の整理→Gitへの誤コミット防止→キーの生成→公開範囲の判断の流れで解説します。NEXT_PUBLIC_の落とし穴や、誤ってコミットした場合の対処も整理します。
HTTPパフォーマンスWeb開発
HTTPキャッシュを設計する手順 — Cache-Control・ETag・不変ファイル
HTTPキャッシュの設計手順を、ヘッダーの理解→Cache-Controlの組み立て→ETagによる検証→ファイル種別ごとの戦略の流れで解説します。max-age・immutable・no-cacheの違いや、更新が反映されない事故の防ぎ方も整理します。
HTTPAPI開発tips
APIを叩いて動作確認する手順 — リクエスト組み立てからCORS設定まで
APIの動作確認を、リクエスト組み立て→コード化→ステータスコードの判断→CORS設定の流れで解説します。GUIでリクエストを作り、curl/fetch/axiosに変換し、レスポンスを正しく読み、ブラウザから叩けるようにするまでを順番に扱います。
時刻開発tipsJavaScript
タイムゾーンをまたぐ日時を正しく扱う手順 — UTC保存・JST表示・Unix時間
タイムゾーンをまたぐ日時のバグを防ぐ手順を、Unixタイムスタンプ変換→タイムゾーン変換→期間計算の流れで解説します。UTCで保存し表示時に変換するベストプラクティスと、夏時間やミリ秒/秒の落とし穴も整理します。
SEOOGPWeb開発
OGP・メタタグを正しく設定する手順 — SNSと検索での見え方を最適化
タイトル・ディスクリプション・OGP・Twitterカード・favicon・robots.txt を正しく設定して、検索結果とSNSシェア時の見え方を最適化する手順を、生成→プレビュー確認→アイコン→クロール制御の流れで解説します。
XMLJSON開発tips
XMLをJSONに変換して扱う手順 — SOAP・RSS・設定ファイル
SOAPレスポンスやRSS、XMLの設定ファイルをJSONに変換してJavaScriptで扱う手順を、変換→整形・確認→型生成→逆変換の流れで解説します。属性・テキスト・繰り返し要素の扱いも整理します。
カラーデザインアクセシビリティ
アクセシブルな配色を決める手順 — コントラスト比と色覚対応
Webやアプリの配色を、コントラスト比・色覚特性まで配慮してアクセシブルに決める手順を、パレット作成→コントラスト確認→色覚チェック→トークン出力の流れで解説します。
SVG画像Web開発
SVGを最適化してWebに載せる手順 — 軽量化からReact化まで
デザインツールで書き出したSVGを、不要なメタデータ除去・数値の丸め・minifyで軽量化し、Webやreactコンポーネントとして使うまでの手順を、確認→最適化→コンポーネント化の流れで解説します。
JSONTypeScriptGo開発tips
APIのJSONから型安全なコードを作る手順 — TypeScript・Go・Zod
APIレスポンスのJSONを、TypeScriptの型・Goのstruct・Zodスキーマに自動変換して型安全に扱う手順を、整形→検証→生成→ランタイム検証の流れで解説します。手書きの型定義のミスをなくし、API連携のバグを減らせます。
TypeScript型システムフロントエンド
TypeScript Utility Types 完全ガイド — Partial・Pick・Omit・Recordの使い方
TypeScriptに組み込まれているUtility Types（Partial・Required・Pick・Omit・Record・Readonly・ReturnType）の実践的な使い方と、型設計を改善するパターンを解説します。
cronバックエンドインフラ
cron式の書き方と定番パターン — スケジュール設定の完全ガイド
cron式の5フィールド構文（分・時・日・月・曜日）から、「毎日0時」「毎週月曜日」「毎月1日」などの定番パターン、特殊文字（*/,-）の使い方まで実践的に解説します。
URLWeb設計REST API
URLの構造と設計 — スキーム・ホスト・パス・クエリ・フラグメントの役割
URLを構成する各パーツ（スキーム・ホスト・ポート・パス・クエリパラメータ・フラグメント）の役割と、REST API設計・SEO・セキュリティに影響するURLの設計原則を解説します。
CORSHTTPセキュリティ
CORSの仕組みと設定 — プリフライトリクエストとAccess-Controlヘッダーを理解する
CORSエラーの原因・プリフライトリクエストの仕組み・サーバー側の正しい設定方法・よくある誤設定を解説します。「CORSエラーが出て困った」という経験を持つ開発者向けの実践ガイドです。
パフォーマンス画像最適化Web開発
Web画像最適化の実践 — フォーマット選択からCore Web Vitalsへの影響まで
JPEG・PNG・WebP・AVIFの使い分け、適切な圧縮レベルの選び方、lazy loadingとLCPへの影響など、画像最適化の実践的な手法を解説します。
CSSレイアウトフロントエンド
CSSグリッドとFlexboxの使い分け — レイアウト設計の判断基準
CSSグリッドとFlexboxはどちらを使うべきか迷う開発者向けに、「1次元か2次元か」という判断軸と、実際のレイアウトパターン別の選択基準を解説します。
Base64エンコードWeb開発
Base64エンコードの仕組みと開発現場での使い所
Base64エンコードの仕組み・用途・制限を解説。Data URI・Basic認証・JWTのペイロード・バイナリデータのJSON埋め込みなど実際の使用例を紹介します。
JWT認証セキュリティ
JWTの仕組みと安全な実装 — トークン認証の基礎から実践まで
JSON Web Tokenの3つの構成要素（Header・Payload・Signature）の仕組みと、セキュアな実装のためのベストプラクティスを解説します。
正規表現プログラミング開発tips
正規表現パターン実践集 — 現場でよく使う30パターンと落とし穴
メールアドレス・URL・電話番号・日付・IPアドレスなど、実際の開発現場でよく使う正規表現パターンとその注意点を解説します。
HTTPREST APIバックエンド
HTTPステータスコード実践ガイド — REST API設計で迷わない判断基準
200/201/204/400/401/403/404/409/422/500など、REST API設計で頻繁に使うHTTPステータスコードの正しい使い分けと判断基準を実例とともに解説します。
CSSデザインシステムフロントエンド
CSSカスタムプロパティでデザインシステムを構築する実践ガイド
CSS Variables（カスタムプロパティ）を使ってカラー・タイポグラフィ・スペーシングを一元管理し、保守性の高いデザインシステムを構築する方法を解説します。
JSONデバッグ開発tips
JSONのデバッグを素早く終わらせる5つの手法
JSONのパースエラー・型不一致・ネスト構造の問題を効率よく特定・修正するための実践的なデバッグテクニックを解説します。