TypeScript ジェネリクス入門：<T> の基本と型制約の書き方 ジェネリクス（Generics）は、型を引数として受け取れる仕組みです。同じ処理を異なる型に対して型安全に使い回せます。 なぜジェネリクスが必要か any を使うと型の恩恵がなくなります。 // any を使</t>…

DNS nameserver の種類と設定：1.1.1.1・8.8.8.8 などパブリックDNS一覧 DNS（Domain Name System）はドメイン名を IP アドレスに変換する仕組みです。どの DNS サーバーを使うかは /etc/resolv.conf で確認・設定できます。 /etc/resolv.conf の見方 cat /e…

lsof コマンドの使い方：使用中のポートとプロセスを調べる lsof（List Open Files）は、プロセスが開いているファイルやネットワーク接続を一覧表示するコマンドです。「このポートを使っているプロセスはどれか」を調べるときに特に役立ちます。 macOS・Li…

.ssh の各ファイルの役割：id_ed25519・id_rsa・authorized_keys SSH を使っていると ~/.ssh/ ディレクトリにさまざまなファイルが作られます。それぞれのファイルが何のためにあるのかをまとめます。 ファイル一覧と役割 ファイル 役割 id_ed25519 Ed25519…

環境変数の export と PATH：.zshrc での書く順番に注意 .zshrc や .bashrc でツールのパスを設定するとき、書く順番によって export が正常に機能しないことがあります。 問題のある設定例 # NG: この時点で mise は PATH に入っていないので失敗する expor…

cargo-watch：ファイル変更時に自動ビルド・テストを実行する方法 cargo-watch はファイルの変更を検知して、cargo build や cargo test などのコマンドを自動で再実行するツールです。コードを書き直すたびに手動でコマンドを実行する手間がなくなります。 …

mise で Node.js をインストールする方法：.nvmrc の使い方 mise はバージョン管理ツールで、Node.js を含む複数の言語を一元管理できます。Ruby や Python をすでに mise で管理しているなら、Node.js も mise に統一することで .tool-versions や mise.tom…

mise で Ruby をインストールする方法：.ruby-version の使い方 mise はバージョン管理ツールで、Ruby を含む複数の言語をまとめて管理できます。この記事では mise を使った Ruby のインストールから、プロジェクトごとのバージョン固定、.ruby-version フ…

Playwright入門：TypeScriptでE2Eテストを書く Playwrightとは PlaywrightはMicrosoftが開発するE2E（End-to-End）テストフレームワークです。実際のブラウザを操作してユーザーの操作を自動化し、アプリ全体の動作を確認できます。 Chromium・Firefox・WebK…

dig・nslookup入門：DNS名前解決とレコード確認コマンド dig・nslookupとは dig と nslookup はDNS名前解決の結果をコマンドラインで確認するツールです。ドメインのIPアドレス・メールサーバー・ネームサーバーなどを調べるときに使います。 ツール 特徴 di…

Storybook入門：React TypeScriptでコンポーネントのStoryを書く Storybookとは StorybookはUIコンポーネントをアプリから切り離して、独立した環境で開発・確認できるツールです。 通常の開発：アプリを起動 → 特定の画面まで遷移 → コンポーネントを確認 S…

ActiveRecord N+1問題の解決：includes・preload・eager_loadまとめ N+1問題とは 関連を持つレコードをループで取得するとき、1回の一覧取得 + N件分の関連取得 = N+1回のSQLが発生する問題です。 posts = Post.all # SELECT * FROM posts （1回） posts.eac…

Apollo Client + React入門：TypeScriptでGraphQL CRUDを実装する はじめに この記事は「GraphQL入門：TypeScriptでスキーマ・Query・Mutationを実装する」の続きです。Apollo Serverで立ち上げたGraphQLサーバーに対し、React + Apollo ClientでCRUD操作を…

GraphQL入門：TypeScriptでスキーマ・Query・Mutationを実装する GraphQLとは GraphQLはFacebookが開発したAPI用クエリ言語です。RESTと異なり、クライアントが必要なフィールドだけを指定して取得できます。 # REST GET /users/1 → { id, name, email, crea…

BullMQ入門：Node.js(TypeScript)でジョブキューを実装する BullMQとは BullMQはRedisをバックエンドに使うNode.js向けのジョブキューライブラリです。メール送信・画像変換・外部API呼び出しなど時間のかかる処理をバックグラウンドで非同期に実行できます…

GitHub PRとIssueのフィルター検索：is:merged is:openまとめ 基本フィルター GitHubのPR・Issue一覧画面の検索ボックスに入力するフィルター構文です。 タイプで絞る is:pr PRのみ is:issue Issueのみ ステータスで絞る is:open オープン is:closed クロー…

Redis Pub/Sub入門：Node.jsとTypeScriptで実装する Pub/Subとは Pub/Sub（Publish/Subscribe）はメッセージの送信者（Publisher）と受信者（Subscriber）を直接結びつけないメッセージングパターンです。PublisherはチャンネルにメッセージをPublishし、そ…

MySQL EXPLAINの読み方：実行計画でSQLのボトルネックを特定する EXPLAINとは EXPLAIN はMySQLがSQLをどのように実行するかを表示するコマンドです。インデックスが使われているか、何行スキャンしているかを確認でき、スローなクエリの原因を特定するときに…

fzf入門：zshのhistory検索・ファイル検索を強化する設定 fzfとは fzf（fuzzy finder）はコマンドラインのインタラクティブなファジー検索ツールです。インストールするだけで Ctrl+R のhistory検索がインクリメンタルになり、ファイル選択やディレクトリ移…

ブラウザのカスタムイベント：CustomEventとdispatchEventの使い方 CustomEventとは ブラウザには click や keydown などの組み込みイベントに加え、独自のイベントを定義して発火できる仕組みがあります。CustomEvent + dispatchEvent を使うことで、DOM要…

React DevTools Profiler：再レンダリングを特定してパフォーマンス改善 Profilerタブとは React DevToolsの「Profiler」タブはReactコンポーネントのレンダリングを録画・計測するツールです。どのコンポーネントが何回・何ms かかって再レンダリングされた…

React DevTools 入門：Components タブでpropsとstateを確認する React DevToolsとは React DevToolsはReactアプリのデバッグに特化したブラウザ拡張機能です。通常のブラウザ開発者ツールでは見えないReactのコンポーネントツリー・props・stateをリアルタ…

ブラウザイベント入門：キーボード・マウス・フォーカスの発火順序 イベントの伝播：3つのフェーズ ブラウザのイベントは次の3フェーズで伝播します。 ① キャプチャリング：document → 親 → 対象要素（上から下） ② ターゲット：対象要素でイベント処理 ③ バ…

TypeScriptのドラッグ&ドロップ：HTML5 Drag and Drop API入門 HTML5 Drag and Drop APIとは ブラウザ標準のAPIで、ライブラリなしにドラッグ&ドロップを実装できます。draggable 属性と複数のドラッグイベントを組み合わせて使います。 イベントの種類と発…

ReactのforwardRef：React 19で不要になった背景と移行方法 forwardRefとは forwardRef は親コンポーネントから子コンポーネントの DOM要素に ref を渡すためのAPIです。React 18以前では ref が特殊なpropとして扱われていたため、このラッパーが必要でした…

TanStack Router 入門：型安全なルーティングの基本 TanStack Routerとは TanStack RouterはReact向けの型安全なルーティングライブラリです。URLパラメータやクエリパラメータまでTypeScriptの型が効き、遷移先のパスも補完されます。React Router v6と比べ…

React Router v6 入門：Routes・Link・useNavigateの使い方 React Routerとは React RouterはReactアプリにルーティング（URLに応じて表示するコンポーネントを切り替える）を追加するライブラリです。v6からAPIが大幅に変わり、よりシンプルに書けるように…

TanStack Query 入門：useQueryでデータフェッチを簡単に TanStack Queryとは TanStack Query（旧React Query）はReactでのデータフェッチ・キャッシュ・同期を管理するライブラリです。useEffect + useState で自前実装していたローディング・エラー・キャ…

Redux Toolkit 入門：createSliceとconfigureStoreの基本 Redux Toolkitとは Redux Toolkit（RTK）はReduxの公式ツールキットです。従来のReduxは設定が煩雑でボイラープレートが多かったため、それを解消するために作られました。現在はReduxを使う場合はRT…

ReactのuseReducer入門：useStateとの違いと使い分け useReducerとは useReducer は useState の代替となるフックで、複数の状態や複雑な状態遷移を管理するのに適しています。Reduxと同じ「action → reducer → 新しい状態」というパターンで状態を更新しま…