触って直感で覚えるNode.js入門
2020-01-06
目次
記事概要
今回は、フロントエンド界隈では必須のスキルとなりつつある
Node.js
環境構築から、実際に簡単なモジュールの使用方法まで紹介し ます。
Node.js とは
そもそもNode.jsとは何ぞやというところですが、
よく説明で使われるのは「サーバーサイドで動くJavaScript」です。
言葉で聞いてもピンと来ないので、実際に手を動かして見てみましょう!
下記の様な手順で作業を行ってみると、
素のJavaScriptとNode.jsの違いが感覚的につかめるかと思います。
- デスクトップ等にを出力する
test
ファイルを作成js
- ファイルをダブルクリックで実行しようとするとエラーが出る
js
- を使用してコマンドラインから作成したスクリプトを実行すると
Node.js
が出力されるtest
素の
js
しかし、
Node.js
js
js
バックエンド言語としても使用できるようになります。
慣れ親しんだJSでバックエンドの処理も書ける事から、フロントエンドエンジニアを中心に人気が高まったようです
正確には違うかもしれませんが、
これがサーバーサイドで動くってことかぁ
となんとなく感じでいただけたかと思います!
では次に、
Node.js
npm
npm とは
npmはパッケージ管理システムの一種です。
npm
Node.js
使用することができるのですが、そのインストールの際に
npm
モジュールは依存関係を持っている事が多く、
「モジュールAを使用するためにはモジュールBが必要で
そのモジュールBを使用するためにはモジュールCが~…」
みたいなことが頻繁に起きます
npm
モジュールAをインストールする。と実行するだけで
そのモジュールを実行するために必要なモジュールを併せてインストールしてきてくれます。
PHPでいうところのcomposerと同じ役割ですね
モジュールの使用方法
では、実際にモジュールを使用してみましょう!
まずは、今回作業するディレクトリを作成してください。
私はデスクトップに
test
※ Node.jsはインストール済みを想定しています。
※ ターミナルはgit bashを使用しています。
下準備
まずは該当のディレクトリに移動して、下記コマンドを打ってみましょう。
npm init
色々と入力を求められますが、すべてEnterで大丈夫です。
すると
package.json
package.json
"scripts"
"test"
この部分を下記の様に書き換えてみましょう。
"scripts": {
"test": "echo hello world !"
}
そして、下記コマンドを実行すると「hello world !」が
表示されるはずです!
npm run test
これが基本的な
npm-scripts
npm-scripts
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.js
同じような人の助けになれば幸いです!