いまさらNode.js入門

記事概要

環境構築まわりは誰か出来る人ひとりがやってしまえば
触る必要がない（むしろ触らないほうが良いくらい）ので
なかなか知識が付きにくい。
という事で少し勉強してみた事をまとめてみました！

Node.js とは

そもそもNode.jsとは何ぞやというところですが、
めちゃくちゃ簡単に言うと、サーバーサイドで動くJavaScript環境の事です。

と言葉で聞いてもピンと来ないので、実際にどういう事か
次のスライドで見てみましょう。

やっている事の説明は次のスライドで行っています。

前のスライドでやっている事

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

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

では次に、Node.jsでよく使用される
npmについて見ていきましょう。

npm とは

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

npmには凄い人たちが作った、
凄いモジュールが沢山あります。
Node.jsではそれらのモジュールをインストールする事で
使用することができるのですが、そのインストールの際
npmを使用します。

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

npmはこのような事を解決して
モジュールAをインストールする。と実行するだけで
そのモジュールを実行するために必要なモジュールを
併せてインストールしてきてくれます

モジュールの使用方法

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

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

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

npm init

色々と入力を求められますが、すべてEnterで大丈夫です。
するとpackage.jsonというファイルができるので
このファイルを開いてみましょう。

package.jsonの中の"scripts"に
"test"というscriptがあるかと思います。
この部分を下記の様に書き換えてみましょう。

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

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

npm run test

これが基本的なnpm-scriptの実行方法です。

npm-scriptを実行する際はpackage.jsonがある
ディレクトリでnpm run [スクリプト名]で
実行が可能です!

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

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

npm install onchange

インストールが完了したのを確認したら
package.jsonを見てみましょう。すると、
"dependencies"という項目に"onchange"が
追加されていると思います。これがあることで、
npm installというコマンドを打つだけで、
onchangeモジュールをインストールしてきてくれます。

つまり、複数人で開発を行う際package.jsonが
共有されていれば、その階層でnpm installを行うだけで
"dependencies"にあるモジュール群を全てインストール
してきてくれるという仕組みです！

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

それではインストールしてきたonchangeモジュールを
実際に使ってみましょう。詳細な使用方法は
公式にあるので、そちらを参考にしてください。

まずは今回使用しているディレクトリの中に、srcというディレクトリを作成してください。

次に、package.jsonを開いて先ほど編集した
"scripts"の"test"の箇所を下記の様に
変更してください。

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

先ほどのスクリプトでやっている事としては
下記のような感じです。

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

今回は、srcディレクトリ内で、変更があったら
変更があったファイル名を出力する。
という単純なものです。

途中で使われている{{changed}}というのも、
onchangeモジュールの機能の一つで、
変更が検知されたファイルの
ファイル名を教えてくれます。

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

npm run test

すると、監視モードになると思うので、
作成したsrcディレクトリに適当なファイルを作成したり
編集したりしてみてください。
変更したファイル名が出力されたら成功です

以上がNode.jsの簡単な説明になります！
今回使用したonchangeモジュールは使い方次第で
とても便利に使用できるので、とてもおすすめです。

今までNodeを使ってるけど、どんなものなのか
あまり理解してなかったので、同じような人の
助けになれば幸いです

お わ り