VSCodeで「npmスクリプト」を使う

はじめに

この記事ではVSCode上でnpmスクリプトを実行する手順を説明します。

npmスクリプトとは

npmスクリプトとは、開発環境node.jsを用いたシステムで使用される、長い文字列のコマンドを短いコマンドに置き換えるための手法またはその短いコマンドのことです。

CLI（コマンドラインインターフェイス）方式を採用するアプリは、独自のUI画面を持たず、ターミナルと呼ばれる仲介役のアプリにコマンド文字列を入力することで操作が行われます。よく使うコマンド文字列が長いと入力も大変です。そこで、長い文字列のコマンドを短いコマンドに置き換えるための手法としてnpmスクリプトが生まれました。しかし短くなってもコマンドがコマンドであることに変わりありません。アプリ操作のためにコマンドを暗記しなければならないのは面倒です。

VSCodeには、CLIアプリからnpmスクリプトを読み取り、メニューとして一覧表示する機能があります。

npmスクリプト一覧を表示する

1. VSCode起動
2. node.jsを使って開発されたアプリ（たとえばDocusaurus）のプロジェクトフォルダを開く
3. サイドバーにプロジェクトフォルダ内ファイル一覧を表示させる
4. サイドバー右上端にあるメニュー呼び出しボタンをクリック
5. ポップアップメニューより「Npmスクリプト」を選ぶ
6. サイドバー下端にアプリに登録されているnpmスクリプトの一覧が表示される
7. 了

npmスクリプトを実行する

1. 実行したいnpmスクリプトにマウスカーソルを合わせる
2. 実行マーク（▶︎）が浮かび上がるので、マークをクリック
3. スクリプトが実行される
4. 了

備考：スクリプト実行結果はパネル画面の「ターミナル」タブに表示されます。

おわりに

コマンドを暗記しなければならないというCLIアプリ最大の問題点がVSCodeのおかげで解消されました。素晴らしい発明だと思います。