1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. npm-scriptsの使い方。自作のコマンドによるタスク実行方法

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるようになります。

今回はnpm-scriptsを使って、自作のコマンドを設定する方法を紹介します。

目次
  1. npm-scriptsについて
  2. npm-scriptsの使い方。かんたんなタスクを作る
  3. まとめ

npm-scriptsについて

gulpやwebpackを使っている方であれば、簡単なコマンドを入力するだけで複雑なことをやってくれる、あの便利さを知っていることでしょう。

そういった処理を、手軽に自分で作れてしまうのがnpm-scriptsです。
あらかじめ、繰り返し使われる処理をnpm-scriptsで作っておけば、指定したコマンドを実行するだけで、簡単に複雑な処理をおこなうことができるようになります。

またnpm-scriptsは、Node.jsと同時にインストールされるnpmの機能です。
Node.jsのインストールについては、以下の記事を参考にしてください。

npm-scriptsの使い方。かんたんなタスクを作る

npmを使って開発したいディレクトリに移動したら、以下のコマンドを実行します。

$ npm init -y

これでpackage.jsonというファイルが作られます。
package.jsonの中は、以下のようになっています。

{
  "name": "npmscript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

6〜8行目が、npm-scriptsの部分です。ここにコマンドを追加することで、そのコマンドを使えるようになります。
では、この部分を書き換えて、コマンドを作ってみましょう。

{
  "name": "npmscript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "hello": "echo \"hello\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

7行目を書き換え、helloというコマンドを作ってみました。
このコマンドを実行するには、以下のようにします。

$ npm run hello

> npmscript@1.0.0 hello
> echo "hello"

hello

helloと出力されれば成功です。

まとめ

今回はnpm-scriptsに書いておく方法を紹介しました。
よく使うオプションをあらかじめ設定しておくことで、作業が捗るようになると思います。

以上、npm-scriptsで自作のコマンドを設定する方法でした。

スポンサードリンク

関連コンテンツ

オススメ記事

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回は、JavaScriptでのマップの作り方を紹介《しょうかい》しました。しかし、まだマップを配置《はいち》しただけで

リセットCSS は何を使う? おすすめ8選(コピペも可能!)

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

迷路やRPGで使えるマップを作ってみよ!

【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力《にゅうりょく》で移動《いどう》するところまで、紹

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しか

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です