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《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

enchant.js100行未満!!本格シューティングゲーム作り方

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてし

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第2回目のはじまりです。今回は、JavaScriptでの演算(えんざん)の方法を学び、今月の残《のこ》り日数を計算してみましょう。

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

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

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

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

Local by Flywheel

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

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

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