ユーザー: 備忘録としてユースケース毎にどういう操作をするのかなどまとめて欲しい。markdownの記事にして欲しい。
AI: 提供された会話ログをもとに、**pnpmと最新のTypeScriptツールチェーン(2026年想定)**の運用方法をユースケースごとに整理した備忘録を作成しました。
ZennやQiita、個人のNotionなどにそのまま貼り付けて使えるMarkdown形式になっています。
この記事では、pnpm を中心としたパッケージ管理の基本操作から、モノレポでの運用、さらにはRust/Go製の爆速ツール(Biome, Oxlint, tsgo, tsdown, Vite+)を組み合わせたモダンな開発環境の構築方法までをユースケース別にまとめました。
基本的に 「すべてpnpmで統一」 し、npm や npx コマンドは一切使用しません。
| やりたいこと | 推奨コマンド | 備考(旧コマンド) |
|---|---|---|
| 一時的なCLIツールの実行 | pnpm dlx <ツール名> |
npx の置き換え |
| プロジェクトの生成 | pnpm create <テンプレート> |
内部で dlx が呼ばれる |
| プロジェクト初期化 | pnpm init |
npm init と同じ |
| 依存関係の追加 | pnpm add <パッケージ> |
npm install <パッケージ> |
| 開発用依存(dev)の追加 | pnpm add -D <パッケージ> |
npm install --save-dev |
| 全パッケージのインストール | pnpm install |
npm install |
| スクリプトの実行 | pnpm <スクリプト名> |
npm run <スクリプト名> |
| ローカルバイナリの実行 | pnpm exec <コマンド> |
.bin/ 内のツールを実行 |
モノレポ(workspace)環境でも特定のパッケージだけを更新できます。
- 特定パッケージの依存のみ更新(ルートディレクトリで実行)
pnpm update --filter <パッケージ名>
- semver範囲を無視して強制的に最新(latest)にする
pnpm update --latest --filter <パッケージ名>
node_modules やロックファイルがおかしくなった場合のクリーンインストール手順です。
- 単一プロジェクトの場合
rm -rf node_modules pnpm-lock.yaml pnpm install
- モノレポの特定パッケージのみリセットする場合
※またはプロジェクトルートから
cd packages/my-app rm -rf node_modules pnpm-lock.yaml pnpm installrm -rf packages/my-app/node_modules && pnpm install --filter my-app
pnpmはデフォルトでシンボリックリンクによる厳格な node_modules 構造を持つため、直接ファイルが見えにくい場合があります。その際は pnpm exec と Nodeのデバッガを使います。
# 例: jestの内部にデバッガを仕掛ける
pnpm exec -- node --inspect-brk node_modules/.bin/jestNode.jsとpnpm自体のバージョン管理には Volta を使用します(プロジェクト単位での固定を推奨)。
# pnpmのインストール
volta install pnpm@10
# プロジェクトの package.json にバージョンをピン留め
volta pin node@24
volta pin pnpm@10Node.js 22.18+ / 24 LTS以上では、TypeScriptのネイティブ実行(Type Stripping)がデフォルトで有効になっています。そのため、多くの場合 tsx は不要です。
- 基本(推奨)
node --watch src/index.ts
tsxが必要なケース(保険としてpnpm add -D tsx)enum、namespace、レガシーデコレータを使用している場合- チーム内に古いNode.jsバージョンの開発者がいる場合
- 完全なソースマップが必要な場合
ESLint, Prettier, tsc, tsup といった従来のツールを置き換える、軽量・爆速のセットアップです。
| 役割 | 推奨ツール | 備考 |
|---|---|---|
| Lint & Format | Biome または Oxlint + Oxfmt |
ESLint/Prettierを完全リプレース。圧倒的に高速。 |
| 型チェック | tsgo |
MS公式のGo言語製tsc代替(プレビュー版)。型チェックが5〜10倍速い。 |
| ライブラリビルド | tsdown |
tsupの後継。Rolldown/Oxcベースでd.ts生成が爆速。 |
| アプリのビルド | Vite (rolldown-vite) / Vite+ |
Webアプリ用。将来はVite+で全部統合される見込み。 |
pnpm workspace を使ったモノレポ構成での設定ファイル(tsconfig.json等)のベストプラクティスです。
- プロジェクトルートに
tsconfig.base.jsonを配置し、各パッケージでextendsする。 moduleResolution: "bundler"とisolatedDeclarations: trueを設定し、最新のビルドツールに最適化する。
- Vite (
vite.config.ts) Vite 8以降はresolve.tsconfigPaths: trueを設定するだけで、tsconfigのエイリアスパス(@/*など)を自動解決してくれます。 - tsdown (
tsdown.config.ts) デフォルトでtsconfig.jsonを自動的に読み込むため、特別な設定なしでパス解決や型生成(dts: true)を行ってくれます。
タスクのオーケストレーションやキャッシュには Turbo (turborepo) または Vite+ run を使用し、ルートディレクトリから一括でビルドや型チェックを実行します。
# ルートからの実行例
pnpm turbo run build
pnpm turbo run typecheck(返答終了理由: STOP)
ユーザー: うーん。pnpm,oxlint,oxfmt,rolldown+vitextsgoの環境での動作確認をするためのプロンプトというかコーディングエージェントへの命令という底でのplanを考えてほしい。tsの実行や型チェックも含めて
AI: コーディングエージェント(Cursor, Cline, GitHub Copilotなど)にそのまま貼り付けて実行させることができる、「2026年版 最新Rust/Go製ツールチェーン環境の構築・動作確認」 を目的としたプロンプト(指示書)を作成しました。
エージェントが迷わずステップ・バイ・ステップで構築と検証を行えるように、明確な Plan(実行計画) と 制約事項 を設けています。
以下のテキストをコピーして、AIエージェントに送信してください。
# 目的
あなたは最新のフロントエンド技術とRust/Go製ツールチェーンに精通したシニアエンジニアです。
2026年現在の最新ベストプラクティスに基づき、`pnpm`, `oxlint`, `oxfmt`, `Vite (Rolldown対応)`, `tsgo` を組み合わせた動作確認用のプロジェクトをゼロから構築し、各ツールが正しく連動して動作するか検証してください。
# 技術スタック
- パッケージマネージャ: `pnpm` (npm/npxは絶対に使用しない)
- Linter / Formatter: `oxlint`, `oxfmt` (BiomeやESLint/Prettierは使用しない)
- 型チェック: `tsgo` (`@typescript/native-preview`) ※tscのGo言語プレビュー版
- アプリバンドラ: `vite` (Rolldown統合を意識した設定)
- TSスクリプト実行: Node.js 24 LTS以上のネイティブType Stripping (`node src/script.ts`)
# 制約・注意事項
1. パッケージの追加やコマンド実行には、必ず `pnpm`, `pnpm dlx`, `pnpm exec` を使用してください。
2. Node.jsのネイティブTS実行機能を利用するため、シンプルなTSファイルは `tsx` を使わず `node` コマンドで直接実行してください。
3. すべてのステップでエラーが発生した場合は、自己修復を試みる前に原因を分析し、方針を報告してください。
---
# Plan (実行計画)
以下の Phase 1 から Phase 4 までの手順をステップ・バイ・ステップで実行してください。各Phaseが終わるごとに結果を報告し、次のPhaseに進んでください。
## Phase 1: プロジェクトの初期化と依存関係のインストール
1. 空のディレクトリを作成し、移動してください(ディレクトリ名: `modern-ts-sandbox`)。
2. `pnpm init` を実行して `package.json` を作成してください。
3. 以下のパッケージを開発時依存 (`devDependencies`) としてインストールしてください。
- `oxlint`, `oxfmt`
- `@typescript/native-preview` (これがtsgoです)
- `typescript` (型定義用)
- `vite`
4. `package.json` に `"type": "module"` を追加してください。
## Phase 2: 設定ファイルの構築
以下の設定ファイルを作成してください。
1. **`tsconfig.json`**
- `target: "ES2022"`, `module: "ESNext"`, `moduleResolution: "bundler"`
- `isolatedDeclarations: true`, `noEmit: true`, `strict: true`
- `paths: { "@/*": ["./src/*"] }` を設定し、パスエイリアスを有効化する。
2. **`vite.config.ts`**
- Vite 8以降の機能である `resolve.tsconfigPaths: true` を有効化し、`tsconfig.json` のパス解決をViteに連動させる。
## Phase 3: 検証用ソースコードの作成
ツール群の動作を確認するため、`src` ディレクトリを作成し、以下のファイルを用意してください。
1. **`src/index.ts` (Viteでのバンドル・型チェック用)**
- パスエイリアス (`@/utils`) をインポートして使用するコード。
- わざと型エラー(`tsgo` で検知させる用)と、フォーマット崩れ・未使用変数(`oxlint`/`oxfmt` で検知・修正させる用)を含めること。
2. **`src/utils.ts`**
- `index.ts` からインポートされる簡単な関数。
3. **`src/script.ts` (Nodeネイティブ実行用)**
- Viteを通さず、CLIスクリプトとして `node src/script.ts` で直接実行できるシンプルなTypeScriptコード。
4. **`index.html` (Viteのエントリポイント)**
- プロジェクトルートに作成し、`src/index.ts` を読み込む。
## Phase 4: スクリプトの定義と動作検証
`package.json` の `scripts` に以下のコマンドを定義し、順番に実行して動作を検証してください。
1. `"lint": "oxlint src"` -> 実行してエラーが出ることを確認する。
2. `"format": "oxfmt --write src/**/*.ts"` -> 実行してフォーマットが整形されることを確認する。
3. `"typecheck": "tsgo --noEmit"` -> 実行して意図した型エラーが出力されることを確認する。その後、ソースコードの型エラーを修正して再度実行し、通ることを確認する。
4. `"script": "node src/script.ts"` -> 実行して、NodeのネイティブType StrippingによりTSがそのまま動くことを確認する。
5. `"build": "vite build"` -> 実行して、Rolldown(Vite)によって `dist` に正常にバンドルされることを確認する。
さあ、Phase 1 から開始してください。- 前提の共有: AIに対して「2026年基準」「npm禁止」「Rust/Go製ツール指定」という前提を強く認識させます。
- Phase制の導入: エージェントが勝手に暴走したり、中途半端な状態で処理を終えるのを防ぐため、明確なマイルストーン(Phase 1〜4)を設けています。
- 意図的なエラーの埋め込み指示: Lintや型チェックが「本当に動いているか」をエージェント自身に確認させるため、あえてエラーになるコードを書かせてから修正させるフローを入れています。
- NodeネイティブTS実行の検証:
script.tsを用意させ、最近のNode.jsの目玉機能であるType Strippingが正しく作動するかどうかのテストも組み込んでいます。
(返答終了理由: STOP)
ユーザー: 最終的に試行錯誤もしつつ全部の動作確認をし記事にしてほしい。
{
"runSettings": {
"temperature": 1,
"model": "models/gemini-3.1-flash-lite-preview",
"topP": 0.95,
"topK": 64,
"maxOutputTokens": 65536,
"safetySettings": [
{
"category": "HARM_CATEGORY_HARASSMENT",
"threshold": "OFF"
},
{
"category": "HARM_CATEGORY_HATE_SPEECH",
"threshold": "OFF"
},
{
"category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
"threshold": "OFF"
},
{
"category": "HARM_CATEGORY_DANGEROUS_CONTENT",
"threshold": "OFF"
}
],
"enableCodeExecution": false,
"enableSearchAsATool": false,
"enableBrowseAsATool": false,
"enableAutoFunctionResponse": false,
"outputResolution": "1K",
"thinkingLevel": "THINKING_MINIMAL",
"enableImageSearch": false
},
"systemInstruction": {}
}
{ "scripts": { // 開発とビルド "dev": "vite", // アプリ開発 "build:lib": "tsdown", // ライブラリビルド // LintとFormat (Biomeの例) "lint": "biome lint --write", "format": "biome format --write", // 型チェック (tsgoを使用) "typecheck": "tsgo --noEmit" }, "devDependencies": { "biome": "latest", "tsdown": "latest", "@typescript/native-preview": "^7.0.0-dev" } }