npm コマンドの使い方まとめ：install・run・ci・update の基本 npm install # package.json の依存をインストール npm install <pkg> # パッケージを追加 npm install -D <pkg> # 開発依存として追加 npm run <script> # scripts を実行 npm ci # クリーンインストール（CI向</pkg></pkg>…

docker compose の使い方：up・down・build コマンドまとめ docker compose up -d # バックグラウンドで起動 docker compose down # コンテナを停止・削除 docker compose ps # 起動中のサービスを確認 docker compose logs -f # ログをリアルタイムで確認 d…

GitHub Copilot 入門：料金・VS Code・CLI の設定まとめ プラン 月額 コード補完 チャット 向いている用途 Free 無料 2,000回/月 50回/月 お試し Pro $10 無制限 AIクレジット込み 個人開発 Business $19/人 無制限 AIクレジット込み 小〜中規模チーム Enter…

git tag の使い方：タグの作成・確認・削除・プッシュまとめ git tag v1.0.0 # 軽量タグを作成 git tag -a v1.0.0 -m "リリース v1.0.0" # 注釈付きタグを作成 git push origin v1.0.0 # リモートへプッシュ git push origin --tags # すべてのタグをプッシ…

Apple Container 入門：brew install container から使い方まで brew install container brew services start container container system kernel set --recommended container run --rm hello-world Apple Container は Apple が開発した macOS 向けのネイ…

TypeScript 7.0の新機能まとめ：erasableSyntaxOnly・noCheck・ignoreConfigの使い方 npm install -D typescript@7 npx tsc --version # Version 7.0.2 TypeScript 7.0 では --erasableSyntaxOnly・--noCheck・--ignoreConfig の3つの新しいコンパイラオプシ…

git log --graph --oneline でブランチをツリー表示する git log --graph --oneline --decorate --all これだけでブランチの分岐・マージがアスキーアートのツリーで表示されます。 基本の使い方 # ブランチツリーを表示（全ブランチ対象） git log --graph …

GitHub ラベルをテンプレート化する：gh CLI で一括作成・再利用 # デフォルトラベルを全削除 gh label list --json name | jq -r '.[].name' | while IFS= read -r label; do gh label delete "$label" --yes done # カスタムラベルを一括作成 bash labels.…

// 子コンポーネントが公開するAPIの型 export type InputFieldHandle = { focus: () => void clear: () => void getValue: () => string } // useImperativeHandle で外から呼べるメソッドを定義する const InputField = forwardRef<InputFieldHandle, Props>((props, ref) => { cons</inputfieldhandle,>…

// 画面表示時に自動フォーカス const nameRef = useRef<HTMLInputElement>(null) useEffect(() => { nameRef.current?.focus() }, []) // Enter で次フィールドへ移動 const moveFocus = (e: React.KeyboardEvent<HTMLInputElement>, next: React.RefObject<HTMLInputElement | HTMLButtonElement | null>) => { if (e.key === 'Enter') { e.pr</htmlinputelement></htmlinputelement></htmlinputelement>…

miseのdotfiles機能：.zshrcや.gitconfigを複数PCで統一する # ~/.config/mise/config.toml [dotfiles] root = "~/.dotfiles" ["~/.zshrc"] ["~/.gitconfig"] mise dotfiles apply # シンボリックリンクを展開して設定を適用 mise はバージョン管理だけでな…

JavaScriptで配列の重複を除去する：Set・filter・reduceの使い方 const unique = [...new Set(array)]; 最もシンプルな方法です。Set は重複を持たないため、一度変換してスプレッド構文で配列に戻すだけで重複が除去できます。 はじめに JavaScriptで配列…

mise で Ruby をインストールする方法：.ruby-version の使い方 mise install ruby@3.3.0 # インストール mise use ruby@3.3.0 # プロジェクトに固定（mise.toml に書き込まれる） ruby --version # 確認 mise はバージョン管理ツールで、Ruby を含む複数の…

RSpecのlet_it_be：test-profで高速化するDB生成の使い方 # let! を let_it_be に変えるだけ let_it_be(:user) { create(:user) } # グループ全体で1回だけ生成（let!はitの数だけ生成） let! との違い：let! は各 it の前に毎回DBへINSERTします。let_it_be…

TypeScriptで通知バッジを実装する：ベルアイコンに数字を表示する SNSやチャットアプリでよく見る、ベルアイコン右上に数字を表示する通知バッジの実装です。ライブラリなしの HTML + CSS + TypeScript で作れます。 HTML構造 position: relative の親要素…

TypeScriptドラッグ&ドロップ発展：ゴースト要素でカンバンボードを実装する HTML5 Drag and Drop API入門の発展編です。マウスイベント（mousedown・mousemove・mouseup）を使ってゴースト要素をカーソルに追従させる実装を紹介します。 HTML5 Drag APIとの…

mise run 入門：mise.toml でタスクを定義して Makefile を置き換える miseのタスク機能を使うと、mise.toml にビルド・テスト・lintなどのコマンドをまとめて定義できます。make コマンドに頼らずに、プロジェクト共通のコマンドをシンプルに管理できます。…

TypeScript ESLint 設定入門：flat config で型チェックを有効にする TypeScriptプロジェクトにESLintを導入する最小手順です。typescript-eslint v8以降は ESLint の新しい設定形式（flat config）をデフォルトで使います。 インストール npm install --sav…

vhs入門：ターミナル操作をGIFに録画するコマンドラインツール vhs はターミナル操作を GIF や動画として録画できるツールです。.tape というスクリプトファイルに操作を書いておけば、何度でも同じ GIF を再生成できます。 vhs とは Charm が開発する OSS …

git revertでコミットを取り消す方法：PR単位のrevertまで解説 git revert は、コミットの内容を打ち消す新しいコミットを作るコマンドです。 git reset のように履歴を書き換えないため、すでに push 済みのブランチでも安全に使えます。障害対応でマージし…

Rails FactoryBot入門：RSpecで使うテストデータの作り方まとめ RSpec でテストを書くとき、テストデータを都度 User.create(name: "...") で作るのは手間がかかります。FactoryBot を使うと、モデルのデフォルトデータを一箇所に定義して create(:user) の…

lazygit入門：Gitをターミナルで快適に操作するTUIツール lazygit はターミナル上で動く Git クライアントです。ステージング・コミット・ブランチ操作・プッシュをキーボードだけで完結でき、git コマンドを手打ちする手間が大幅に減ります。 lazygitとは T…

JavaScriptで日付が1日ずれる原因：タイムゾーン問題の対処法まとめ JavaScript で日付を扱うとき「保存したはずの日付が1日前になっている」「API に送ったら前日の日付が届いた」という問題がよく起きます。原因はほぼ必ず UTC とローカル時刻の解釈の違い…

Node.jsでTypeScriptを直接実行する：node app.tsの使い方 Node.js 22.6 以降、TypeScript ファイルをコンパイルなしで直接実行できます。tsc や ts-node をインストールしなくても node app.ts が動きます。 バージョンと対応状況 Node.js バージョン 状態 …

JavaScriptのreplaceとreplaceAll：文字列置換の使い方まとめ JavaScript で文字列を置換するには replace() と replaceAll() を使います。2つの違いは「最初の1件だけ置換するか、すべて置換するか」です。 replace()：最初の1件だけ置換 const str = 'hell…

JavaScript 大文字・小文字変換：toUpperCase と toLowerCase JavaScript で文字列を大文字・小文字に変換するには toUpperCase() と toLowerCase() を使います。どちらも引数なしで呼び出すだけで動作します。 toUpperCase()：すべて大文字に変換 const str…

Node.js fetchのエラーハンドリング入門：TypeScriptで型安全に書く Node.js 18以降、fetch がネイティブで使えます。 ただし fetch のエラーハンドリングはAxiosと挙動が異なり、知らないとハマります。 この記事では2種類のエラーの違いから、TypeScriptで…

Node.js 24のnode:sqlite入門：npmインストールなしでSQLiteを使う Node.js 22.5（2024年7月）で追加された node:sqlite の現状を整理します。 better-sqlite3 などのパッケージをインストールせずに SQLite を扱えます。 バージョンと安定性 - Node.js 22.1…

JavaScriptファクトリパターン入門：クラス版と関数版を比較する GoFのFactoryパターンは「どのクラスをインスタンス化するかを呼び出し側に知らせない」設計です。 JavaScriptに持ち込むと、クラスを使わないファクトリ関数という形に自然と落ち着きます。 …

JavaScriptシングルトンパターン入門：クラス版とES Modules版を比較する GoFのデザインパターンはオブジェクト指向言語（Java/C++）を前提に設計されています。 JavaScriptに持ち込むとき、「クラスで書くべきか」「もっとJSらしい書き方があるか」は悩みど…