Web・フロントエンド
HTTP・REST の基礎から React / TypeScript の実装まで ・ 20本
NestJSの治験CRMを引き継いで学んだバックエンド設計
ベンダーから引き継いだNestJS製治験CRMの保守・改修を通じて理解したモジュール設計、Repositoryパターン、DTOバリデーション、エラーハンドリングの実際。
React×Next.jsの選択基準を実務から考える —SPA・SSR・SSGをどう使い分けるか
治験CRMではSPA、このブログではSSGを選んだ理由を実体験から整理。App Router vs Pages Router、CSR/SSR/SSG/ISRそれぞれのユースケースと実務での判断基準をまとめます。
TypeScript Utility Types実践ガイド——Partial・Pick・Omitを実務でどう使うか
TypeScriptのUtility Types（Partial・Pick・Omit・Record・ReturnTypeなど）をReact/Next.js実務で使うパターンをコード例付きで解説。any禁止チームが型安全を保つテクニック集。
TypeScriptとReact/Next.js実践本を読んで実務で使い続けた話——テックリード視点の正直な評価
TypeScriptとReact/Next.jsでつくる実践Webアプリ開発を実務投入直前に読み、その後チームに展開するまでの体験談。初心者向けの入門書として買ったが、中級者になった今でも参照する理由を正直に書く。
TypeScriptとReact/Next.js実践本を未経験エンジニアが読んだ正直な感想
エンジニア転職直後、TypeScriptもReactも「名前だけ知っている」状態で手に取った一冊の正直な評価。独学からの実務投入前に読んで何が役立ったか、何が足りなかったかを書く。
StripeとNext.jsで決済機能を実装する——Checkout・Webhook・本番対応まで
Next.jsにStripeを組み込んでEC決済を実装する手順を解説。Checkout Session作成・Webhook受信・エラーハンドリング・本番公開前チェックリストまで、TypeScriptのコード例で体系的にまとめる。
フロントエンドエンジニアが最低限知っておくべきアクセシビリティ入門
WAI-ARIA・セマンティックHTML・キーボード操作・コントラスト比など、ReactとNext.jsプロジェクトで押さえるべきアクセシビリティの基本を実装例とともに解説。医療系システムの現場での実体験もあわせて紹介。
styled-components vs CSS Modules——Next.jsプロジェクトでCSS設計を選ぶ基準
CSS-in-JSのstyled-componentsとCSS Modulesをパフォーマンス・DX・チーム開発の観点で比較。Next.js + TypeScriptプロジェクトでどちらを選ぶべきか、実務経験をもとに判断基準を整理する。
フロントエンドのテスト戦略——「全部書く」をやめてから品質が上がった話
React + TypeScriptプロジェクトでのテスト方針。ユニット・インテグレーション・E2Eの使い分け、テックリードとして実務で落ち着いた優先度と運用方法をまとめる。
Atomic Designを実務で使って気づいたこと——設計の共通言語はチームを助ける
React + TypeScriptのプロジェクトでAtomicDesignを採用したときの実体験。よかった点と困ったこと、Next.jsとの組み合わせでの実用的な運用方針をまとめる。
REST APIの書き込み設計——冪等性・トランザクション・楽観的ロックの実装パターン
REST APIの書き込み操作（POST・PUT・PATCH・DELETE）における冪等性の確保、トランザクション設計、楽観的ロック・悲観的ロックの実装パターンをNestJS/TypeScriptのコード例で解説。
改訂3版 JavaScript本格入門——100万部超えロングセラーを独学エンジニアが読んだ正直な評価
ECMAScript 2022対応に大幅改訂されたJavaScript本格入門を、独学からテックリードになったエンジニアが評価。どの章が実務で役立ったか、どんな読者に向いているかを正直に書く。
JavaScriptのMap・Setを使いこなす——Arrayとの使い分けを実務目線で整理する
JavaScriptのMapとSetを、よく使うArrayと比較しながら解説。重複除去・高速キー検索・順序保証など、実務でMapとSetを選ぶべき場面をコード例とともに整理する。
Fetch APIで非同期通信をマスターする——GET・POST・エラーハンドリング・React連携まで
JavaScriptのFetch APIの基本から、POST送信・エラーハンドリング・タイムアウト・ReactのuseEffectとの組み合わせまで実務で使うパターンをコード例で整理する。
JavaScriptの正規表現入門——実務でよく使うパターンをコード例で整理する
JavaScriptのRegExpを使った文字列検索・置換・バリデーションの書き方を解説。メールアドレス・電話番号・郵便番号などフォームバリデーションでよく使うパターンをTypeScriptで整理。
JavaScriptのクラスとモジュールを理解する——TypeScriptに活きるOOPの基礎
classはシンタックスシュガーという基礎から、カプセル化・継承・ESモジュールまで。TypeScriptのinterface・abstractとの対応も含め実務目線で整理する。
JavaScriptのArray高階関数を実務で使いこなす——map・filter・reduceの使い分け
forループからArray高階関数へ移行した理由から、map・filter・reduce・find・some・everyの使い分け、TypeScriptでの型付けまで実務目線で解説する。
JavaScriptの非同期処理を整理する——コールバック・Promise・async/awaitの使い分け
コールバック地獄からPromise、async/awaitへの変遷を実務経験ベースで整理。JavaScript本格入門で改めて体系を学んだエンジニアが書く非同期処理入門。
JavaScriptのスコープとthisで詰まったこと——本格入門で理解が深まった概念
varとletの違い、クロージャの仕組み、thisが指すものが変わる理由など、JavaScriptを書くうえで避けられないスコープ・クロージャ・thisの挙動を実務視点で整理。
ES6+の新構文を実務でどう使うか——JavaScript本格入門で整理した基礎知識
アロー関数・分割代入・スプレッド構文・テンプレートリテラルなどES6+の構文を、独学からテックリードになったエンジニアが実務視点で整理した記録。