メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
開発・コード変換
/
npm scripts ガイド
{}
npm scripts ガイド
dev/npm-scripts-guide
package.jsonのscriptsフィールドの書き方と便利なスクリプト例。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
npm scripts ガイドは、npm scripts ガイドの用途、入力、出力を確認しながら日常作業を短時間で処理するためのページです。
入力例と結果を見比べながら、入力条件と出力形式が利用先に合っているか確認することができます。
npm scripts ガイドでは、package.
json
のscriptsフィールドの書き方と便利なスクリプト例。
開発・コード変換の作業で必要になりやすい「コード、設定値、APIデータの整形や変換」を、ページ上の入力欄からすぐに試せます。
関連する観点として 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実行)
コピー
使い方
npm scripts ガイドの入力欄に、確認したい文字列や数値を入れます。
必要なオプションがある場合は、用途に合わせて選択します。
表示された結果を確認し、問題がなければコピーして利用先へ貼り付けます。
入力例・出力例
INPUT
npm scripts ガイド
OUTPUT
npm scripts ガイドの処理結果
入力条件と出力形式が利用先に合っているか確認する
よくある利用シーン
実装中の小さな確認、レビュー前の整形、設定ファイルの下書きを作るとき
npm scripts、package.
json
、スクリプトに関する確認を、手元のメモやスプレッドシートを開かずに短時間で済ませたいとき。
npm scripts ガイドの結果を、レビュー、公開前チェック、日々の作業メモに流用したいとき。
結果確認のポイント
入力条件と出力形式が利用先に合っているか確認する
構文、引用符、改行、エスケープが利用先の仕様に合っているか確認してください。
npm scripts、package.
json
、スクリプトの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
結果を確認せずに本番データへそのまま反映する
本番の秘密情報、APIキー、パスワードは入力しないでください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
npm scripts ガイドの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
npm scripts ガイドは何に使えますか?
npm scripts ガイドはnpm scripts ガイドの用途、入力、出力を確認しながら日常作業を短時間で処理するための無料ツールです。入力内容を確認しながら、結果をコピーして日々の作業に使えます。
入力したデータは保存されますか?
多くの処理はブラウザ内で完結します。サーバー処理が必要な場合も、必要な処理の範囲に限って扱います。秘密情報や個人情報は入力前に必要性を確認してください。
結果を使う前に何を確認すべきですか?
入力条件と出力形式が利用先に合っているか確認する
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)の主要チェック項目を一覧表示する。