Node.js環境構築

【JavaScript】VSCodeのコンソール出力をnpmで自動実行する方法

javascriptコンソール出力の自動実行アイキャッチ画像 Node.js

この記事では、npmを使った開発環境の自動実行設定と、その自動実行を適切に終了する方法を初心者にも分かりやすく解説します。これらの手順を理解することで、効率的な開発環境のセットアップと管理ができるようになります。

コンソール出力を自動実行する前準備

VSCodeとNode.jsのインストール

VSCodeのインストールがまだの方はこちら↓↓↓

Node.jsは、JavaScriptをパソコン上で直接実行するためのソフトウェアです。コンソール出力を自動実行するには、Node.jsのインストールが必要です。

フォルダ、ファイルの準備

  1. VSCodeを開き、新しいフォルダ「test」と新しいファイル「test.js」を作成します。
  2. ファイルに以下のコードを入力します:
JavaScript
console.log("Hello, Node.js!");
test.jsのスクリプト作成画面

自動再実行の設定(オプション)

VSCode左上の「表示」「ターミナル」を選択。

test.jsを実行する為のVSCodeターミナル表示方法画面

必要なパッケージをインストール

ターミナルで以下のコマンドを実行して、必要なパッケージをインストールします

npm install --save-dev nodemon

--save-devオプションは、開発環境でのみ使用するパッケージとしてpackage.jsonのdevDependenciesセクションに追加するために使用します。nodemonは、ファイルの変更を監視し、自動的にサーバーを再起動するツールで、開発効率を大幅に向上させます。

jsonファイルに追加

package.jsonファイルを開き、”scripts”セクションに自動実行用のコマンドを追加します。

JSON
"scripts": {
  // 本番環境での実行用スクリプト。'npm start'コマンドで実行される
  "start": "node test.js",
  // 開発環境での実行用スクリプト。ファイル変更を監視し自動再起動する。'npm run dev'で実行
  "dev": "nodemon test.js"
}

scriptsセクションは、npmコマンドを通じて実行できるスクリプトを定義する場所です。“start”スクリプトは通常の実行用、”dev”スクリプトは開発時の自動再起動用です。これにより、npm run devコマンドでnodemonを使用した自動再起動が可能になります。

  1. "start": "node test.js":
    • このスクリプトは通常、本番環境や最終的なテスト時に使用されます。
    • npm start コマンドで直接実行できます。
    • Node.jsを使用してtest.jsファイルを一度だけ実行します。
  2. "dev": "nodemon test.js":
    • このスクリプトは開発中に使用されます。
    • npm run dev コマンドで実行します。
    • nodemonを使用してtest.jsファイルを実行し、ファイルの変更を監視して自動的に再起動します。

既存のjsonオブジェクト後に「,」カンマを追加して”scripts”オブジェクトを追加してください。

自動再実行モードで実行

自動再実行モードで実行するには、ターミナルで以下のコマンドを使用します

npm run dev

これで、ファイルを保存するたびに自動的にスクリプトが再実行されます。

このコマンドを実行すると、nodemonがアプリケーションを監視し始めます。ファイルに変更があると自動的にサーバーが再起動され、最新のコードが反映されます。これにより、開発者は手動でサーバーを再起動する手間が省け、生産性が向上します。

自動実行を止める方法

Ctrl + C の使用(macOSの場合:Control + C)

ターミナルで Ctrl + C キーを押します。「バッチジョブを終了しますか」と表示されるので、「」を入力して「Enter」を押すと自動実行が止まります。

自動実行を止める処理画面

これは最も一般的で簡単な方法です。Ctrl + Cを押すと、現在実行中のnpmプロセス(この場合はnodemon)が中断され、ターミナルのプロンプトに戻ります。

プロセスの強制終了

  • タスクマネージャー (Windows) でnodeプロセスを終了
  • ターミナルで killall node (Mac/Linux)

この方法は、通常の方法で終了できない場合や、バックグラウンドで実行されているnodeプロセスを終了させたい場合に有効です。ただし、この方法は全てのnodeプロセスを終了させるため、注意が必要です。

特定ポートのプロセス終了

  1. lsof -i :3000 でポート3000を使用しているプロセスIDを確認します。
  2. kill -9 <プロセスID> で該当プロセスを強制終了します。

この方法は、特定のポートを使用しているプロセスのみを終了させたい場合に有効です。まずプロセスIDを特定し、そのIDを指定して終了させます。これにより、他の実行中のプロセスに影響を与えずに、目的のプロセスのみを終了できます。

まとめ

  • package.jsonのscriptsセクションで自動実行コマンドを設定できます。
  • npm run <スクリプト名>で自動実行を開始できます。
  • Ctrl + C や killall などのコマンドで自動実行を終了できます。

npmの自動実行設定と終了方法を理解することで、開発作業の効率が大幅に向上します。初めは複雑に感じるかもしれませんが、実践を重ねることで自然と身につきます。これらの技術を活用して、より生産的な開発環境を構築しましょう。

自動実行を適切に設定することで、コードの変更を即座に反映させたり、テストを自動的に実行したりすることができます。一方で、自動実行を適切に終了する方法を知ることも重要です。不要なプロセスが背景で動き続けることを防ぎ、システムリソースを効率的に使用できます。

これらの知識は、小規模なプロジェクトから大規模な開発まで、様々な場面で役立ちます。npmの自動実行機能を使いこなすことで、開発者としてのスキルアップにもつながるでしょう。

コメント

タイトルとURLをコピーしました