プログラムメモ

SSHで接続した先のサーバーのグローバルIPアドレスを、IPv4とIPv6で取得する。

Tue, 02 Jun 2026 10:27:11 +0900

# ● サーバーのグローバルIPアドレスを、IPv4で取得する。 ``` curl -4 ifconfig.io ``` # ● サーバーのグローバルIPアドレスを、IPv6で取得する。 ``` curl -6 ifconfig.io ```

git 現在のブランチ名を調査する

Wed, 20 May 2026 15:26:26 +0900

現在のローカルブランチが追跡しているリモートブランチを調べる ``` git rev-parse --abbrev-ref @{u} ``` 現在ローカルでチェックアウトしているブランチ名を表示する ``` git symbolic-ref --short HEAD ``` このリポジトリのメインのブランチ名を master または main で返す。2つ存在する場合はエラーを返す。 ```sh git branch --format '%(refname:short)' | grep -E '^(main|master)$' | { branches=$(cat); count=$(echo "$branches" | wc -l | tr -d ' '); [ "$count" -gt 1 ] && echo "Error: main と master...

biome より高速、設定が楽、oxlint , oxfmt

Fri, 15 May 2026 08:57:49 +0900

# ● oxlint ### ・oxlsintのインストール ``` npm i -D oxlint ``` ### ・oxlintを実行する ``` # ソースコードチェックのみ npx oxlint . # 自動修正 oxlint --fix . ``` package.json にコマンドを記述しておきます。 ``` "scripts": { "lint": "oxlint . --disable-unicorn-plugin", "lint:fix": "oxlint --disable-unicorn-plugin --fix .", }, ``` ### ・oxlsintで現在有効なルールの一覧を出力するコマンド ``` npx oxlint --rules ``` # ● oxfmt ``` npm i -D...

pnpm で [ERR_PNPM_MISSING_TIME] The metadata of XXXXX is missing the "time" field エラーが出る場合の対応

Thu, 14 May 2026 09:19:57 +0900

キャッシュが問題であることが多い。一旦キャッシュを削除しましょう。 ```sh # 削除前にストア全体のサイズを調べる du -sh "$(pnpm store path)" # 未使用のハードリンクを削除 pnpm store prune # 再度、ストア全体のサイズを調べて、差分を見る。 du -sh "$(pnpm store path)" ```

Next.js DevTools MCP

Tue, 28 Apr 2026 16:03:10 +0900

# ● Next.js 16 の DevTools MCP Next.js DevTools MCP（パッケージ名：next-devtools-mcp）は、Next.js開発を効率化するbridge MCPサーバーです。 Next.js 16のビルトインMCPエンドポイント（/_next/mcp）と、Cursor/ClaudeなどのMCPクライアントを繋ぎ、ランタイム診断（エラー/ログ取得）、アップグレード支援、ブラウザ自動化を提供します。 # ● Next.js DevTools MCPの設定 Next.js DevTools MCPの設定は、プロジェクトルートに.mcp.jsonを作成するだけです。 ``` { "mcpServers": { "next-devtools": { "command": "npx",...

Cloud Flare で nextjs server actions を全て遮断する

Thu, 23 Apr 2026 19:08:13 +0900

# ● Cloud Flare で nextjs server actions を全て遮断する ###・WAFを設定する ``` Security → Security Rules から Create Rules → Custom Rule ``` ルールの設定内容 ``` ・Rule name : Block Next.js Server Actions ・設定 Field: Header Operator: exists Value: next-action ・Choose Action : Block ```

Cloud Flare で botを全て遮断する Bot fight mode をオンにする

Thu, 23 Apr 2026 18:36:41 +0900

# ● Cloud Flare で botを全て遮断する Bot fight mode をオンにするこちらのメニューから Bot Fight Mode をオンにします。 ``` Security → Settings → Bot fight mode ``` 注意点 : OGP 画像などを出力している場合は、Twitterなどのアクセスも遮断することになるので、うまくOGPが取得されなくなってしまうようです。その場合は、こちらの対策をすると良いようです。 ↓ 参考 : https://zenn.dev/ausssxi/articles/62aa7324d189c3

EC2 の next.js サーバを CloudWatch !!!

Wed, 22 Apr 2026 16:47:28 +0900

## EC2のNext.jsサーバーをCloudWatchで監視する方法 ### 1. 設定方法 #### Step 1: すでにEC2インスタンスに付いているロールを探して、そのロールに追加でアタッチします。 ``` 1. ロールに移動して「許可を追加」ボタンをクリックします。 2 .「CloudWatchAgentServerPolicy」を検索して追加します。 ``` #### Step 2: CloudWatch Agentのインストール（Amazon Linux 2 / AL2023） ```bash sudo yum install -y amazon-cloudwatch-agent ``` ↑ エラーが出る時はこちらのコマンドでインストールできます： ```sh wget...

KUSANAGI の WAF

Wed, 22 Apr 2026 12:05:29 +0900

KUSANAGI CLIで簡単に制御可能です # ● KUSANAGI 9 で WAF の設定を確認する / on , off する ``` # 状態確認 kusanagi status # 有効化： kusanagi waf on # 無効化 kusanagi waf off ``` # ● KUSANAGI 8 で WAF の設定を確認する / on , off する ``` # 状態確認 kusanagi waf status # 有効化： kusanagi waf on # 無効化 kusanagi waf off ```

Gitのマージコンフリクトを事前に知る git merge-tree

Tue, 14 Apr 2026 13:15:34 +0900

# git merge-tree でマージコンフリクトを事前に検知する ## git merge-tree とは `git merge-tree` は、**ワーキングツリーやインデックスを一切変更せずに、マージ結果をシミュレートするコマンド**です。通常、マージコンフリクトを確認するには実際に `git merge` を実行する必要がありますが、`git merge-tree` を使えばブランチを切り替えることなく、コンフリクトの有無だけを確認できます。 ```bash git merge-tree --write-tree <マージ先ブランチ> <マージ元ブランチ> ``` > `--write-tree` オプションは Git 2.38（2022年10月）以降で利用可能です。 --- ## 出力の読み方 ### コンフリクトなし...

claude code 便利コマンド

Thu, 23 Apr 2026 17:16:59 +0900

# ● claude code 便利コマンド ### claude code のバーの色を赤色にする「/color」 ``` /color red ``` ### claude code ののセッションに適した名前を自動的につけてもらう「/rename」 ``` /rename ``` なお、バーの色やセッション名などは、再度次のコマンドで読み直したときにも反映されているので、タスクの種類ごとに分けておくといいと思います。 ### claude code ののセッションに適した名前を自動的につけてもらう「/resume」「起動時に claude -r」 ``` /resume ``` その他、関連コマンドとしては以下のようなものもあります： - /history — 現在のセッション内のメッセージ履歴を表示 - /clear —...

サプライチェーンから守るための npm , pnpm 設定

Thu, 21 May 2026 09:05:54 +0900

# ● 1 . npm設定自身のホームフォルダ以下の .npmrc ファイルに、以下の設定を行います。 ``` vi ~/.npmrc ``` ``` # 7日経過したnpmパッケージしかインストールさせない。 min-release-age=7 ``` # ● 2 . 自分自身のプロジェクト内の .npmrc に以下を設定します。 ``` cd <プロジェクトフォルダ> vi .npmrc ``` ``` # 7日経過したnpmパッケージしかインストールさせない。 min-release-age=7 # ^1.2.3 のような範囲指定バージョンを使わず1.2.3 のように正確なバージョンで保存 save-exact=true # postinstall など、スクリプトを実行させない ignore-scripts=true ``` #### pnpmでの設定...

nvm で nodejs のバージョンを管理する

Fri, 24 Apr 2026 18:45:44 +0900

### 1. nvm をインストールするまず nvm をインストールします（sudo なしでユーザー領域にインストールするのが推奨） ```bash # 必要な依存をインストール（最小構成） sudo yum install -y git bash curl # nvm の install.sh を実行 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash ``` コマンド実行後、`nvm` コマンドが使えるようにシェルを再読み込みします。 ```bash source ~/.bashrc ``` 確認： ```bash nvm --version ``` ### 2. 必要な Node.js バージョンをインストール ```sh nvm...

unixのシェル( bash )の便利な設定(1文字ショートカットとヒストリ)。gitブランチ表示

Mon, 30 Mar 2026 16:40:13 +0900

#● lsコマンドを短縮する unixシェルで一番よく使うコマンドの代表格といえば ``` ls -la ``` だと思います。これを短縮して ``` l [Enter] ``` で実行できると便利なので以下のようにbash のエイリアスを設定します。ホームディレクトリ内の .bash_profile または .bashrc に記述 ``` # alias alias ll='ls -la' alias l='ls -laF' alias c='cd' alias h='history' alias gr='grep' alias hg='history | grep ' alias g='git' alias d='docker' alias dc='docker-compose' alias tf='terraform' alias r='rsub '...

XSERVER VPS 運用

Mon, 30 Mar 2026 15:47:54 +0900

# ● apt の upgrade ``` sudo apt update sudo apt full-upgrade sudo apt autoremove -y ```

Claude ベストプラクティス

Wed, 25 Mar 2026 18:48:20 +0900

# ● /model opusplan ``` /model opusplan ``` プランモードの時だけ Opus を使ってくれる # ● settings.json の sandbox **settings.json** ``` "sandbox": { "enabled": true, "allowUnsandboxedCommands": false }, ``` # ● Plan のフォルダーを相対パスにする **settings.json** ``` "plansDirectory": "./plans", ``` # ● settings.json の autoモード #### A. 起動時に指定する場合 ``` claude —permission-mode auto ``` .bash_profile や...

AIに細かく質問してもらう skill

Wed, 25 Mar 2026 08:57:44 +0900

https://www.aihero.dev/my-grill-me-skill-has-gone-viral **.claude/skills/grill-me/SKILL.md** ``` --- name: grill-me description: Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me". --- Interview me relentlessly...

Github の Self-hosted Runner

Mon, 23 Mar 2026 17:14:58 +0900

# ● Github の Self-hosted Runner の仕組み - 自分で用意したマシン上で GitHub Actions のジョブを実行するためのエージェントバイナリ（runsvc.sh / run.sh など）を常駐させておく。 - ランナーは GitHub へのアウトバウンド HTTPS（基本 443）で接続し、ポーリングで「ジョブはあるか？」を定期的に問い合わせる。 - ジョブ実行中は、GitHub-hosted と同様に、ステップごとのログやステータスを GitHub に送信する。 # ● Github の Self-hosted Runner を設定する」 #### 1. リポジトリ単位で設定する場合 ``` リポジトリの Settings → Actions → Runners → New self‑hosted runner（または...

CLAUDE.md と AGENTS.md　どっちを使う？

Mon, 23 Mar 2026 12:13:37 +0900

# ● 結論 → どちらか一つだけで良い例えば CLAUDE.mdからAGENTS.mdへシンボリックリンクを貼っておくだけで良いです。あるいは、以下のようにしてもOKです。 **CLAUDE.md** ``` @AGENTS.md ``` # ● 1. CLAUDE.md と AGENTS.md の両方を読める AIエージェント | AIエージェント | 読み取り優先順・挙動 | | ----------------------- | -------------------------------------------------- | | Claude Code (Anthropic) | CLAUDE.md を優先、存在しなければ...

無料のウイルス/マルウェア対策 ImunifyAV

Mon, 16 Mar 2026 16:06:25 +0900

# ● ImunifyAVのインストール ``` wget https://repo.imunify360.cloudlinux.com/defence360/imav-deploy.sh bash imav-deploy.sh ``` 以下のような運用にすると良いでしょう： ``` 1. ImunifyAV無料版をインストール 2. cronで週1回 `sclp scan` を実行 3. 通知メールで結果確認→手動対応 ```

LaravelでCSRFエラーの時に再読み込みし、エラー画面を表示させずに再読み込みさせる。

Wed, 11 Mar 2026 08:43:27 +0900

# ● LaravelでCSRFの時にカスタム例外ハンドラでCSRFエラーをキャッチしてリダイレクトする #### 方針 `TokenMismatchException` を検知 → 元のURLへリダイレクト → フラッシュメッセージで通知 ## 実装 **`app/Exceptions/Handler.php`** ```php use Illuminate\Session\TokenMismatchException; public function register(): void { $this->renderable(function (TokenMismatchException $e, $request) { return redirect() ->back()...

爆速 oxfmtをインストールする / VS Codeで利用できるようにする

Thu, 30 Apr 2026 13:00:34 +0900

# ● oxfmtのインストール ```sh npm install -D oxfmt ``` ##### ● oxfmt の設定ファイルをPrettierの設定ファイルから移植する。 ```sh npx oxfmt --migrate prettier ``` ##### ● oxfmt のコマンドをpackage.json に追加する ```sh "format": "oxfmt --check", "format:fix": "oxfmt", ``` # ● oxfmtの実行 ``` npm run format ``` ``` npm run format:fix ``` # ● oxfmt を VS Codeで利用できるようにするこちらをインストールします...

Claude CodeによるGitHubへの操作が判別される仕組み

Mon, 09 Mar 2026 17:27:27 +0900

# Claude CodeによるGitHubへの操作が判別される仕組み ## 仕組み Claude Code がコミットを作成すると、コミットメッセージの末尾に `Co-Authored-By` トレーラーが自動付与されます。 ``` Co-Authored-By: Claude Sonnet 4.6 ``` GitHub はプッシュされたコミットを解析してこのトレーラーを検出し、メールアドレスに紐づく Anthropic のアカウントをコントリビューターとして表示する。 `Co-Authored-By` は GitHub が公式サポートする仕様であり、ペアプログラミングや共同作業の貢献者を記録する目的で使われています。 ## オフにする方法...

現在のブランチのリモート（アップストリーム）を確認する。

Fri, 27 Feb 2026 09:12:37 +0900

# ● 自分が今いるブランチのアップストリームを確認する： ``` git branch -vv | grep "^\*" ``` # ● 全てのブランチのアップストリームを確認する ``` git branch -vv ``` # ● git upstream コマンドとして登録しておくと便利です。 **~/.gitconfig** ``` [alias] upstream = branch -vv | grep "^\\*" ```

Claude Codeに対して、確認を一切せずにタスクを実行してほしい時の起動コマンド

Fri, 20 Feb 2026 12:00:00 +0900

``` claude --dangerously-skip-permissions ```

AWS SAM CLIでローカルでテストを行う

Tue, 17 Feb 2026 18:08:59 +0900

AWS SAM CLIのインストール ```sh brew tap aws/tap brew install aws-sam-cli ``` バージョンを確認する ```sh sam --version ``` aws cli で該当ユーザーでアカウント情報が返ることを確認する ``` aws sts get-caller-identity ``` SAMのビルド ``` sam build ```

claude codeに使用トークン量とモデル名などを常時表示させる

Tue, 17 Feb 2026 16:39:29 +0900

引用: https://zenn.dev/little_hand_s/articles/dbd5fc27f5a2f0 ###・ statusline.jsを作成する ```sh code ~/.claude/statusline.js ``` ###・以下の内容で保存する。 ``` #!/usr/bin/env node const fs = require('fs'); const path = require('path'); const readline = require('readline'); const { execSync } = require('child_process'); // Constants const COMPACTION_THRESHOLD = 200000 // Read JSON from stdin let input =...

OpenClawの始め方

Mon, 16 Feb 2026 12:42:10 +0900

# ● OpenClaw インストール ```sh curl -fsSL https://openclaw.ai/install.sh | bash ``` インストール後に簡単な質問が出るので答えていきます。また、AIモデルも選択します。 Claude の自分自身のサブスクリプション内で使う場合は、次のコマンドでトークンを発行します。 ``` claude setup-token ``` （発行されたトークンを貼り付けます） # ● Slack App を作る ## アプリ作成手順 1. **Slack APIサイトにアクセス**: ブラウザで https://api.slack.com/apps を開きます（Slackアカウントでログイン必須）。 2. **Create New Appボタンを探す**: ページ上部に「Create New...

next.js の並列ルート（Parallel Routes）

Sat, 14 Feb 2026 10:15:14 +0900

## 並列ルート（Parallel Routes） ### 通常のJSX配置 ```tsx export default function Layout({ children }) { return ( <> {children} ) } ``` ### Parallel Routes での配置 ```tsx export default function Layout({ children, sidebar, modal }) { return ( <> {sidebar} {children} {modal} ) } ``` 後者では `app/@sidebar/page.tsx` や...

Cursor CLI でコマンドラインでCursorを使う

Tue, 10 Feb 2026 13:20:15 +0900

#### cursor CLI にログインする ``` cursor agent login ``` #### cursor CLIで使用可能なモデル一覧を表示させる。 ``` cursor agent --list-models ``` # ● cursor CLI を起動する ``` cursor agent ``` （以降、Cursor CLI Agent内での操作です） #### モデルを選択する ``` /model ``` #### モードを（ノーマル → Auto run → Plan → Ask と変更する。） ``` 「Shift」+「Tab」 ``` あとは Claude Code ほとんど同じです。

Claude Code で、エージェントチームを自動的に作らせるように設定する。

Mon, 09 Feb 2026 09:58:24 +0900

# ● Claude Code で、エージェントチームを自動的に作らせるように設定する。 ### 1 . Cloud Code の設定を変更する。 **~/.claude/settings.json** に次の設定値を追加する。 ``` "env": { "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1" }, ``` ### 2 . tmuxをインストールして起動する。 ``` # tmuxをインストールする brew install tmux # tmuxを起動する tmux ``` ### 3 . Claude Code を起動して、チームが作れるかどうか聞いてみる。 ``` claude ❯ チームを作れるような設定になっていますか？? ```...

next.js でビルド中を判別する

Fri, 06 Feb 2026 10:53:33 +0900

# ● next.js でビルド中を判別する ``` if ( process.env.NEXT_PHASE === 'phase-production-build' ){ console.log( '● ビルド中です！' ); } ``` https://github.com/vercel/next.js/blob/633e2749/packages/next/src/shared/lib/constants.ts#L70-L86

next.js で hydration error が起きる可能性があるものを調べる。

Tue, 03 Feb 2026 14:20:01 +0900

Next.jsのHydration Errorが起きる可能性があるものを包括的にリストアップします。 ## 1. **ブラウザAPI関連** ### Window/Document オブジェクト - `window.innerWidth` / `window.innerHeight` - `window.outerWidth` / `window.outerHeight` - `window.scrollX` / `window.scrollY` - `window.pageXOffset` / `window.pageYOffset` - `window.screen.width` / `window.screen.height` - `window.screen.availWidth` / `window.screen.availHeight` -...

何か外部の値（例えばwindow size）を取得する、useSyncExternalStore

Mon, 02 Feb 2026 13:42:13 +0900

# ● useSyncExternalStore の使い方 ``` useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) ``` 説明 ``` useSyncExternalStore( 1. subscribe関数, 2. クライアントコンポーネント時のsnapshot関数, 3. SSR時のsnapshot関数 ) ``` ### ● SSR時 ``` getServerSnapshot() 関数を実行して終了。 ``` ### ● クライアントコンポーネント時 #### 1. マウント時 ``` 1. コンポーネントがレンダリングされる 2. useSyncExternalStore が呼ばれる 3. getSnapshot() を呼び出して現在の値を取得...

Claude Codeで「Shift + Enter」で改行コードを入力する。

Mon, 02 Feb 2026 12:46:53 +0900

Karabiner-Elements で、以下のように設定します。 ``` { "description": "【Claude Code】Shift+Enterを'バックスラッシュ+enter'に変換", "manipulators": [ { "conditions": [ { "bundle_identifiers": [ "com.apple.Terminal" ], "type": "frontmost_application_if" }, {...

react19 の useRef

Wed, 28 Jan 2026 10:29:35 +0900

``` useRef には便宜上のオーバーロードがまだ存在し、useRef(null) は自動的に RefObject を返すようになっています。useRef の引数必須化に対する移行を容易にするために、useRef(undefined) に対する実用的なオーバーロードが追加され、自動的に RefObject 型を返すようになります ``` ``` import { useRef, useEffect } from 'react'; function InputFocus() { // inputRef は RefObjectになる const inputRef = useRef(null); useEffect(()...

AIをローカルマシンで安全に実行するDocker Sandboxes とは ?

Mon, 26 Jan 2026 23:03:03 +0900

# ● Docker Sandboxes とは Docker Sandboxesは、AIエージェント(コーディングエージェント)をローカルマシン上で安全に実行するための機能です。Claude Codeのようなエージェントが、コンテナ化されたワークスペース内で安全にコマンドを実行したり、パッケージをインストールしたり、ファイルを変更したりできます。 ## `docker sandbox run ` の動作このコマンドを実行すると、以下のプロセスが行われます: 1. **コンテナの作成**: テンプレートイメージからコンテナを作成し、現在の作業ディレクトリをコンテナ内の同じパスにマウントします 2. **Git設定の自動注入**:...

vscode / cursor / windsurf / antigravity で git worktree の作成方法

Tue, 27 Jan 2026 08:30:52 +0900

## ● 1 . リポジトリを表示します ## ● 2 . リポジトリが表示された後にリポジトリ横の3点リーダーメニューからWorktreeの作成が選択できるようになります。 ## ● 3 . Cursorの場合はまずメニューをVSCodeと同じ表示にします。...

WebStorm でTypeScript-Go（tsgo）のLanguage Server を使用するための設定を追加する

Wed, 21 Jan 2026 16:13:56 +0900

Webstorm → 設定 → 言語＆フレームワーク → TypeScript → こちらを選択する ↓

Claude Code の skills

Wed, 21 Jan 2026 21:38:57 +0900

# skill-creator → anthropic公式のスキル #### 引数付き起動 ``` /create-skill pdf-converter PDFファイルを画像に変換するスキル ``` #### 引数なし起動（対話的） ``` /create-skill ``` # UI UX Pro Max → フロントエンドのUIを書くのにすごく便利 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill # seo-review → AIで作ったサイトのSEO審査に使います https://github.com/leonardomso/33-js-concepts/tree/master/.opencode/skill/seo-review # skills 使い方 ```...

css grid でレスポンシブでレイアウトを変える

Mon, 12 Jan 2026 17:31:52 +0900

``` .grid { display: grid; gap: 16px; background-color: rgb(233, 233, 233); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .box { border: 3px solid red; background-color: #ff000011; color: #F00; font-size: 40px; display: flex; justify-content: center; align-items: center;...

flex で gap を変数にして使う

Thu, 08 Jan 2026 13:42:08 +0900

``` .owner__vision__box{ // 変数 --gap: 30px; display: flex; flex-wrap: wrap; gap: var(--gap); margin: 38px 0px 10px 0px; li { display: block; border: 1px solid red; width: calc( (100% - var(--gap) * 2) / 3 ); } } ```

日本語フォントのCSS設定

Thu, 28 May 2026 13:34:33 +0900

``` // カーニング font-feature-settings: "palt"; letter-spacing: 0.09em; // 数字と日本語の間に余白を入れる text-autospace: normal; // 折り返し overflow-wrap: anywhere; word-break: normal; // 変なところで折り返さない。（」が文頭に来るのを防ぐ） line-break: strict // 折り返しを通常モードにする text-wrap: wrap; ```

nextjs / vite でも使用されている Node.js向けの軽量で美しいユーザーインターフェースのプロンプトライブラリ

Wed, 25 Mar 2026 09:17:27 +0900

# ● clack/prompts https://github.com/bombshell-dev/clack `npx skills add vercel-labs/agent-skills` などで実行されるVercelのskillsで採用されているライブラリです。モダンな表現になります。 # ● terkelg/prompts https://github.com/terkelg/prompts

biome

Fri, 15 May 2026 08:52:25 +0900

# ● biome ``` npm install --save-dev --save-exact @biomejs/biome // 設定ファイルの初期化 npx @biomejs/biome init --jsonc ``` ###・biomeでソースコードの整形 = prettier ``` npx @biomejs/biome format ``` ###・biomeでlint ``` npx @biomejs/biome lint ``` ###・biomeで lint+prettier 両方を実行します。 ``` npx @biomejs/biome check ``` #### ・Biomeでno-restricted-importsを実現する方法...

Playwright パラレル

Tue, 23 Dec 2025 18:06:26 +0900

# Playwright パラレル * **ディレクトリ構造は「ドメイン／機能」で分ける** * **並列可否（衝突関係）は「メタ情報」として別レイヤーで表現する** > **構造（何のテストか）と > 実行制約（どう実行できるか）を混ぜない** ## なぜ「並列可能集合ディレクトリ」はダメなのか ### 1. 並列可否は「性質」であって「所属」ではない * ドメイン：**本質的・安定** * 並列可否：**環境・実装・時代依存** ```text ✗ tests/parallel-safe/ ✗ tests/serial-only/ ``` これは： * DB構造が変わる * テストデータが改善される * 並列制御が賢くなる …だけで **ディレクトリ再編が発生**します。 ### 2. 1テストが複数の制約を持てなくなる現実のテストはこうです： *...

as const satisfies の使い所

Fri, 19 Dec 2025 11:19:59 +0900

# ● 例1 （別に as const satisfies を使わなくても良い例） #### 問題1 . エラーになる例 ``` type HttpMethod = "GET" | "POST" | "PUT" | "DELETE"; type Route = { path: string; method: HttpMethod; }; // ❌ widening が起こる const routes1: Record = { getUser: { path: "/users/:id", method: "GET" }, createUser: { path: "/users", method: "POST" }, }; routes1.getUser.method // 型: HttpMethod (Union型) //...

ブラウザのリフレッシュレート

Wed, 17 Dec 2025 14:48:40 +0900

# ● ブラウザのリフレッシュレートブラウザのリフレッシュレートというのは誰がどのタイミングで決定するのか？ ## 誰が決定するか **ディスプレイ(モニター)のハードウェア**が決定します。ブラウザではありません。 ``` ディスプレイのリフレッシュレート ↓ (OSが検出) ↓ (ブラウザが取得) requestAnimationFrame のタイミング ``` ## 一般的なリフレッシュレート - **60Hz**: 一般的なディスプレイ (約16.67ms/フレーム) - **120Hz/144Hz**: ゲーミングモニター (約8.33ms, 6.94ms/フレーム) - **240Hz**: ハイエンドゲーミングモニター (約4.17ms/フレーム) ## ブラウザによる違い...

macで markdownファイルを見やすくする

Fri, 12 Dec 2025 13:34:08 +0900

# ● treemd インストール方法 ``` brew install treemd ``` （結構インストールに時間がかかるので、気長に待ちましょう） # ● mdcat インストール方法 ``` brew install mdcat ```

cssグリットで要素を上下左右中央にセンタリング表示

Mon, 08 Dec 2025 17:23:18 +0900

p-fv { min-height: 500px; display: grid; place-content: center; }