メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
開発・コード変換
/
npm scripts ガイド
{}
npm scripts ガイド
dev/npm-scripts-guide
package.jsonのscriptsフィールドの書き方と便利なスクリプト例。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
npm scripts ガイドでは、package.
json
のscriptsフィールドの書き方と便利なスクリプト例。
関連する観点として npm scripts、package.
json
、スクリプト を確認し、結果をコピーして別の作業に使えます。
結果
--- 基本 --- "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint .", "test": "vitest", "test:watch": "vitest --watch", "typecheck": "tsc --noEmit" } --- ライフサイクル --- preinstall → install前 postinstall → install後 prebuild → build前 postbuild → build後 pretest → test前 --- 便利パターン --- "dev": "concurrently \"cmd1\" \"cmd2\"" "clean": "rm -rf dist .next" "check": "npm run lint && npm run typecheck && npm run test" "release": "npm version patch && npm publish" --- 変数 --- $npm_package_name パッケージ名 $npm_package_version バージョン --- 実行 --- npm run <script> pnpm <script> (run省略可) npx <command> (ローカルbin実行)
コピー
使い方
結果欄の「基本」セクションで、dev、build、start、lint、testなどのscripts例を確認します。
ライフサイクル欄でpreinstall、postinstall、prebuild、postbuild、pretestの実行タイミングを見ます。
便利パターン欄から、並列実行、clean、check、releaseの短い例を選びます。
変数と実行欄を確認し、npm run、pnpmのrun省略、npxの違いを手順書へ反映します。
入力例・出力例
INPUT
基本: build
OUTPUT
"build": "next build"
INPUT
checkスクリプト
OUTPUT
"check": "npm run lint && npm run typecheck && npm run test"
INPUT
パッケージ変数
OUTPUT
$npm_package_version バージョン
よくある利用シーン
Next.jsプロジェクトのpackage.
json
に、基本的なdev/build/startをそろえたいとき。
lint、typecheck、testを直列に実行するcheckスクリプトを下書きしたいとき。
prebuildやpostinstallなどの自動フック名を、実装前に確認したいとき。
npm scripts内で参照できるnpm_package_nameやversionの変数名を思い出したいとき。
結果確認のポイント
構文、引用符、改行、エスケープが利用先の仕様に合っているか確認してください。
npm scripts、package.
json
、スクリプトの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
本番の秘密情報、APIキー、パスワードは入力しないでください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
npm scripts ガイドの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
preとpostのライフサイクルフックはどのように使いますか?
npm scriptsでは "prebuild" や "postbuild" のようにスクリプト名にpre・postプレフィックスを付けると、npm run buildの前後に自動で実行されます。例えば postinstall を定義すると npm install 後に自動実行されるため、コード生成やパッチ適用に使われます。
scriptsで複数コマンドを連続実行するには?
&&を使うと前のコマンドが成功した場合のみ次を実行します(例:"build": "tsc && node build.js")。||は前が失敗した場合に次を実行します。並列実行には&を使うかconcurrentlyやnpm-run-allなどのパッケージが便利です。
scriptsからnpmパッケージのCLIを直接呼べますか?
はい。node_modules/.bin/ に格納されるCLIツールはscripts内でフルパスなしに呼び出せます。例えば eslint や tsc を "lint": "eslint src" のように記述するだけで、ローカルインストールされたバイナリが実行されます。
関連ツール
JSON整形ツール
JSONの整形(Pretty Print)・圧縮・バリデーション・ツリービュー表示。構文エラーの位置表示、YAML変換にも対応。
正規表現テスター
正規表現のリアルタイムテスト。マッチ箇所のハイライト、グループキャプチャ表示、よく使うパターンのチートシート付き。
CSV→JSON変換
CSVファイル・テキストをJSON形式に変換。配列/オブジェクト形式の選択、ヘッダー行の自動認識にも対応。
JSON→CSV変換
JSONデータをCSV形式に変換。配列やネストしたJSONにも対応。
UUID生成ツール
UUID v4をワンクリックで生成。ハイフンなし、大文字、小文字など各種フォーマット対応。一括100個まで生成可能。
タイムスタンプ変換
UNIXタイムスタンプと人間が読める日時形式を相互変換。秒・ミリ秒に対応(マイクロ秒・ナノ秒は非対応)。ログ解析やAPI開発のデバッグに。
ASCIIコード表
ASCIIコード(0-127)の文字・10進数・16進数・2進数の一覧表。
アクセシビリティチェックリスト
Webアクセシビリティ(WCAG 2.1)の主要チェック項目を一覧表示する。