記事概要

今回は、フロントエンド界隈では必須のスキルとなりつつある

Node.js とは

そもそもNode.jsとは何ぞやというところですが、
よく説明で使われるのは「サーバーサイドで動くJavaScript」です。
言葉で聞いてもピンと来ないので、実際に手を動かして見てみましょう！

下記の様な手順で作業を行ってみると、
素のJavaScriptとNode.jsの違いが感覚的につかめるかと思います。

1. デスクトップ等に
   test
   を出力する
   js
   ファイルを作成
2. js
   ファイルをダブルクリックで実行しようとするとエラーが出る
3. Node.js
   を使用してコマンドラインから作成したスクリプトを実行すると
   test
   が出力される

素の

正確には違うかもしれませんが、
これがサーバーサイドで動くってことかぁ
となんとなく感じでいただけたかと思います！

では次に、

npm とは

npmはパッケージ管理システムの一種です。

モジュールは依存関係を持っている事が多く、
「モジュールAを使用するためにはモジュールBが必要で
そのモジュールBを使用するためにはモジュールCが～…」
みたいなことが頻繁に起きます

モジュールの使用方法

では、実際にモジュールを使用してみましょう！
まずは、今回作業するディレクトリを作成してください。
私はデスクトップに

※ Node.jsはインストール済みを想定しています。
※ ターミナルはgit bashを使用しています。

下準備

まずは該当のディレクトリに移動して、下記コマンドを打ってみましょう。

npm init

色々と入力を求められますが、すべてEnterで大丈夫です。
すると

  "scripts": {
    "test": "echo hello world !"
  }

そして、下記コマンドを実行すると「hello world !」が
表示されるはずです！

npm run test

これが基本的な

次はnpmでモジュールをインストールして、
そのモジュールを使用したスクリプトを作成・実行していきましょう。

モジュールの使用

今回は例としてonchangeモジュールを使用してみましょう。
このモジュールはファイルの変更を検知してくれるという機能になります。
下記コマンドでインストールを行いましょう。

npm install onchange

インストールが完了したのを確認したら

つまり、複数人で開発を行う際

必要なモジュールをひとりひとりが一個ずつ
インストールする必要が無いのは、このおかげです。

それではインストールしてきた

まずは今回使用しているディレクトリの中に、

次に、

  "scripts": {
    "test": "onchange src/* -- echo {{changed}}"
  }

行っている事としては下記のような感じです。

onchange [監視するファイル] -- [変更があったときに実行されるスクリプト]

今回は、『

途中で使われている

では、実際にスクリプトを実行してみましょう。

npm run test

すると、監視モードになると思うので、
作成した

以上が

今までは